在這 Bootstrap 主導(dǎo)的世界里，Semantic UI和Foundation備受歡迎, 其它的一些框架很難脫穎而出。不過, 這三個是眾所周知的, 已經(jīng)相對成熟, 并且在市場上存在了相當(dāng)長的時間, 但是它們都相對較重, 它們都需要對核心有深刻的理解，尤其是你需要自己定制些東西的時候（你曾經(jīng)在Semantic中定制過下拉組件嗎惧浴？？Ｒ莅睢）
一股清流
Bulma來了脂矫。 Jeremy Thomas的作品枣耀，一個漂亮、輕量庭再、時尚的 CSS 框架捞奕。 如果你還沒有用過, 我建議你去看看它的網(wǎng)站。它極具互動性拄轻，更重要的是颅围，它純粹是 CSS！
使用 Bulma 的主要優(yōu)點是它的盒模型完全是基于 Flexbox恨搓。 (是的院促！ 不再有 CSS 浮動和百分比!)
Bulma的主要特征有：
- 100%響應(yīng)式設(shè)計
- 模塊化
- 現(xiàn)代化
- 免費
我在上個周末使用 Next.js 和 Bulma 創(chuàng)建了一個非常小的項目。 下面是我在使用這個框架中的一些筆記斧抱。
優(yōu)雅的Flexbox
正如我之前提到的, Bulma的柵格完全是用 Flexbox 實現(xiàn)的常拓。 想要實現(xiàn)彈性的等寬布局，只用給你的元素加一個 column 類就行了辉浦。
你也可以通過添加適當(dāng)?shù)男揎椃麃碚{(diào)整列的寬度弄抬。 is-four-fifths, is-two-fifths, is-half 等等。
Bulma是以移動端優(yōu)先設(shè)計的盏浙，所以在豎直閱讀上做了很多優(yōu)化眉睹。
模塊化
在壓縮和gzip之后荔茬，框架本身只有21kB废膘。這已經(jīng)很不錯了，同時你也可以只引用你需要的模塊慕蔚。
Bulma都是用SASS寫的丐黄，并且分成了39個.sass文件。你可以單獨引用這些文件孔飒，并且可以重用這些樣式灌闺。
在Bulma中，你可以很輕松的定制你想要的坏瞄。代碼分離桂对，變量也被抽出來了，這使你幾乎可以隨意配置你想要的鸠匀。
整潔的表單控制
當(dāng)要選擇一個CSS框架的時候蕉斜，除了定制和可維護性之外，我最看重的就是對于表單樣式的控制。
對于表單元素的樣式宅此，我是比較傳統(tǒng)的机错。相較于用JS實現(xiàn)的炫酷效果，我更傾向于用原生的父腕，瀏覽器自帶的實現(xiàn)方式弱匪。原因很簡單，移動設(shè)備上的觸摸機會（touch opportunity)璧亮。
在Bulma里萧诫，我們能很容易實現(xiàn)一些原生表單元素的效果，比如錯誤狀態(tài)以及提示枝嘶，各種各樣的按鈕以及帶有圖標(biāo)的輸入框财搁。
你需要做的只是加些class，Bulma的優(yōu)雅之處就在于不需要額外增加DOM元素就能做出漂亮的樣式躬络。
同樣我也非常喜歡Level和Hero布局尖奔，它們使橫向布局和簡單的banner制作變得非常簡單。
總而言之, Bulma 是一個非常好的多功能 CSS 框架, 內(nèi)置了許多功能和組件, 我們可以輕松地重用和定制穷当。 雖然它仍在開發(fā)中, 但它確實是穩(wěn)定提茁、成熟的, 所以我不會過分強調(diào)在商業(yè)項目中使用它。
開始使用
最簡單的馁菜，我們只需要引入Bulma的CDN地址：
https://cdnjs.com/libraries/bulma
或者通過NPM來安裝：
npm install bulma
如果你想在項目中使用FontAwesome茴扁，別忘了在項目中引入：
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
