最新紀錄

css· 3 分鐘

鐵人賽 26 - 實戰心法 - 應避免的 Sass @extend

Sass 的 @extend 可以將相同的樣式整理再一起，在其他語言來說是非常帥氣的技法，但在 CSS 中請警慎使用。 就如同本篇鐵人賽一開始所介紹到的 OOC…

cssSass

2016 年 12 月 26 日 繼續閱讀 →

css· 3 分鐘

鐵人賽 25 - 實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 Grid System，然後還提供變數讓 Grid 還有額外的參數可以設定，手寫的 CSS 如果要重新計算 12 組以上的計…

cssSass

2016 年 12 月 25 日 繼續閱讀 →

css· 2 分鐘

鐵人賽 24 - 實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid，但透過自幹會了解更細的運作原理，grid system 和其他元件不太一樣，他是屬於外容器型的元件，一層包覆著一層變化性相當高，如…

cssBootstrap

2016 年 12 月 24 日 繼續閱讀 →

css· 3 分鐘

鐵人賽 23 - 實戰心法 - 常見的垂直置中手法

上一章節介紹了各種 Utilities ，唯獨垂直置中不介紹，因為在製作、使用垂直置中時要先思考 “支援的瀏覽器”，就算現在全部 IE 的使用率低於 2% 的情…

cssBootstrap

2016 年 12 月 23 日 繼續閱讀 →

css· 3 分鐘

鐵人賽 22 - 實戰心法 - 經常使用，但卻容易被忽視的 CSS

Bootstrap 3 載入以後其實就有包含大部分的元件，原本的設計概念上是希望透過一套框架就能滿足大多的需求，但實際在專案運作時有許多客製化需要微調，而很多微…

cssBootstrap

2016 年 12 月 22 日 繼續閱讀 →

css· 2 分鐘

鐵人賽 21 - Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時，如果有需要新增、調整，都是寫在 CSS 的後方或是另開一個新檔透過 “覆蓋” 的特性來新增、調整。先前的文章已經介紹了如何…

cssBootstrap

2016 年 12 月 21 日 繼續閱讀 →

css· 2 分鐘

鐵人賽 20 - Sass 資料夾結構

對於 Bootstrap 有一定了解後，我們即將要開始新增元件，不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SM…

cssBootstrap

2016 年 12 月 20 日 繼續閱讀 →

css· 2 分鐘

鐵人賽 19 - Bootstrap 一次看懂元件的使用組合

Bootstrap 的官方文件有完整的說明以及範例，就算是如此，還是會有許多朋友希望有快速入門的介紹，本篇就來介紹絕大部分 Bootstrap 元件的組合手法，…

cssBootstrap

2016 年 12 月 19 日 繼續閱讀 →

css· 2 分鐘

鐵人賽 18 - Bootstrap 元件分類概觀 (content, container)

接下來我們依循著 OOCSS 與 Bootstrap 的設計模式繼續擴資、修改元件，不過在繼續下一個階段以前，我們先來了解一下 Bootstrap 的設計模式。

cssBootstrap

2016 年 12 月 18 日 繼續閱讀 →

css· 2 分鐘

鐵人賽 17 - Bootstrap 自定義樣式超簡單

在導入框架至網站時，還要考慮框架是否符合網站風格以及往後的維護性。Bootstrap 雖然設計上是要給開發者直接運用的，但實際上他所設計的彈性非常之高，也很適合…

cssBootstrap

2016 年 12 月 17 日 繼續閱讀 →