Nice to Meet You

I’m Hannah, a Taiwanese 30 years old front end developer.
Learning and sharing always makes me happy, and I am interested in the new things including coding and design.

Skills

  • HTML, RWD
  • JS, ES6, AngularJs, VueJs, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer, now is in afusion
  • Sass / css lecturer for prototype-hacker
  • Host a conference at FEDC
Contact me
#, | Oct 14 2018

[Bootsrtap 4 進階] 客製化你的 styles


誰適合閱讀
有用過一次以上 Bootstrap 的人

從 bootstrap 3 出來之後我非常頻繁的使用過一年,但在 CSS Flex 流行之後就不用了.為什麼?
因為案子 components 都跟 bootstrap 不同,與其蓋來蓋去難以維護不如手刻.導致引入了一大包 bootstrap 90% 都只用它的 grid (不得不說在 Flex 不流行年代, b3 grid 真的有夠好用).那既然 CSS Flex 完全可以取代 bootstrap grid ,為何還要用它呢?
這邊看看 bootstrap minified 過可是還有超肥 145 kb 阿(肥胖哥 jquery 3x 也才 87k 而已)

Bootstrap 4 出來之後大家都說真的好用,一開始我還嗤之以鼻,覺得 b4 改成 Flex, 那為何不用純 CSS 的 Flex 就好還要引入這一大包呢?但還是好奇試了一陣子,覺得它除了客製化, utilities 也真的很方便,你甚至可以只用他寫好的 sass mixin, function 就不需要自己寫了(mixin, function 引入是不會影響效能的要用了才算 K 數),而且因為 document 寫得很好,就算再多人一起協作也容易修改跟維護

Bootstrap 4 新的概念是 Library 而不是 Framework. 顧名思義希望有用在引入就好.這一篇不會教大家 grid 或是 component 怎麼用,而是如何使用 bootstrap 這包 scss, 讓你在效能最佳的情況下刻出你要的畫面


案子適合用 Bootstrap 嗎?

說不定你案子根本不適合那就可以先跳過這篇了,我用自己寫過五年以上前端經驗先下一個結論

不適合 B4

  • 設計稿沒什麼邏輯,components 之間不太一致
    B4 用程式邏輯幫你算好很多事,例如按鈕 hover 上去都是原本顏色暗 10% , 如果設計稿沒什麼規則那與其一個一個改,不如手刻
  • 沒看過 B4 document 就開始寫
    假如你沒看過文件就開始寫你會比手刻多花三倍時間再想 style 怎麼都出不來你想要的樣子甚至用 inline style 去蓋

適合 B4

  • 超過兩人團隊
    用 b4 最大好處之一是它 document 寫得非常好,就算上一個同事離職按照 b4 邏輯寫相信你可以很容易修改他的 styles
  • 每一頁的 Component 是很一致的,有出 guideline 給你的設計稿
  • Component 跟 b4 的很像

 

Theming

Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes

B4 建議我們不要去動核心的 code, 因為他 document 寫非常清楚.你改了下一個工程師也不會知道你改了什麼.

1. File structure

如果你是用 npm, 他建議 File structure 如左圖,右邊是我這次 demo 的 structure

variable 我會另外複製貼上 b4 variable scss/_variables.scss 引入(就不用一個一個慢慢找, 這邊命名為 _custom-bootstrap-variables),而是否要維持 sass 變數 defulat 我覺得都沒差
而在 _custom.scss 那個檔案我只會引入我想要的 b4 components(節省效能)

2. 找出跟你專案相符合的 B4 Component

2 跟 3 步驟可以倒過來,我是習慣先找出會用的 B4 元件再回來改整體 style.
在這個步驟你需要知道 b4 有提供哪些元件.複製 b4 code 貼上他們 (這也是後來都不用 pug 原因,因為不能複製貼上XD)

(設計稿來自六角學院)

3. Sass options

$enable-*
你可以在 custom-bootstrap-variables (也就是我步驟一提到複製貼上 bootstrap variable scss/_variables.scss 的檔案) 找到 $enable-* 開頭的變數,直接改就可以定義你要的樣式(例如網站樣式有沒有圓角,陰影之類).

修改預設變數
重頭戲來了,你網站的 primary color / secondary color, navbar padding, button padding 等等一定跟 b4 不同,這時搜尋關鍵字搜尋 custom-bootstrap-variables.scss 直接改即可(b4 命名的很好, 可以很快找到自己想改的地方)

改完會發現 90% 就完成你想要的樣子了,下面左圖為 b4 預設變數,右邊是調成自己的

到這邊你可能有疑惑.那假如我的網站有圓角又有直角那到底要設哪一個呢,你可以先定義大部份的(例如幾乎都是圓角 $enable-rounded: false) 之後再針對少部分直角做處理就好.

結論

這個例子我手刻 css 只有 30 行以內,真的是驚人的少.運用 b4 有好有壞,其中一個壞處是一個 tag 可能有超多 class, 但卻很容易一起維護.尤其很推他的 utilities 跟寫好的 mixins !! 適不適和整包引入就看大家專案需求了