iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
影片教學

CSS 優良部份 系列

本系列影片將會分享新手常見 CSS 錯誤,並探討近年設計模式與框架的演進,深入了解 CSS/SCSS Component、Utility 發展史,同時將分享近期熱門框架,介紹未來 CSS 架構趨勢

鐵人鍊成 | 共 30 篇文章 | 98 人訂閱 訂閱系列文 RSS系列文
DAY 21

【Bootstrap 5 客製化教學 - 1】環境架設,SCSS 整合輕鬆建

想了想還好先介紹 Tailwind,因為 Bootstrap 在 utility 上也做了蠻大的改善,也剛好藉由兩者來比較~ 影片重點 CDN 載入方式 N...

2020-10-06 ‧ 由 廖洧杰 分享
DAY 22

【Bootstrap 5 客製化教學 - 2】十分鐘帶你一覽 BS5 SCSS 核心程式碼

這次主要是拿 Bootstrap 4 與 5 的底層程式碼,來深入瞭解 BS5 更新了哪些東西,這次 BS5 也針對了 util 來大刀闊斧改革了一番,覺得有...

2020-10-07 ‧ 由 廖洧杰 分享
DAY 23

【Bootstrap 5 客製化教學 - 3】一鍵變數,輕鬆客製化樣式

本篇一窺變更 Bootstrap 5 樣式教學,只要新增一色系變數,所有的 BS5 元件與 util 皆會具備該變數 class 功能。 影片重點 講解整合...

2020-10-08 ‧ 由 廖洧杰 分享
DAY 24

如何提升 CSS Class 可讀性

不論你是用 Bootstrap 還是 Tailwind,都會遇到一個 HTML 塞滿了各種 Components、utils class,看起來我們無法減少...

2020-10-09 ‧ 由 廖洧杰 分享
DAY 25

OOCSS 容器與內容分離

在 Bootstrap 上,在 Layout Grid 與 Components 之間很容易達到容器與內容分離概念,而 Tailwind 本身也可以透過 ut...

2020-10-10 ‧ 由 廖洧杰 分享
DAY 26

【Bootstrap 5 客製化教學 - 4】透過 Bootstrap 達到容器與內容分離

影片重點 以 Bootstrap 5 來講解如何達到容器與內容分離 Codepen Demo 示範流程 BS5 元件設計概念 文獻連結 Bootstr...

2020-10-11 ‧ 由 廖洧杰 分享
DAY 27

【Tailwind CSS 教學 - 14】透過 Tailwind 達到容器與內容分離

影片重點 以 Tailwind 來講解如何達到容器與內容分離 Codepen Demo 示範流程 Tailwind 元件設計概念 文獻連結 Tailw...

2020-10-12 ‧ 由 廖洧杰 分享
DAY 28

【Bootstrap 5 客製化教學 - 5】RFS 響應式文字設定

RFS 在 BS5 上是預設開啟的功能,個人認為是一個字體設計的巧思,覺得蠻棒的,在 GitHub 的介紹為 「Automates responsive re...

2020-10-13 ‧ 由 廖洧杰 分享
DAY 29

【Bootstrap 5 客製化教學 - 6】BS5 utilities 客製化,讓他變得跟 TailwindCSS 一樣強!

其實 BS5 utilities 原始碼打開有讓我有驚艷的感覺,整體有重寫過,所涵蓋的功能也蠻適用的,其實將 Tailwind 的東西整過來到 BS5 也是相...

2020-10-14 ‧ 由 廖洧杰 分享
DAY 30

【終章】 Tailwind VS Bootstrap5 誰能稱霸?

這趟 30 天旅程,讓我對 CSS Components 與 Utility 的設計上有了更深入瞭解,最後的最後,就讓我將這兩個框架做一個完美的 ending...

2020-10-15 ‧ 由 廖洧杰 分享