原文地址：https://matwrites.com/bulma-css-framework-for-2018/
在這 Bootstrap 主導的世界裡，Semantic UI和Foundation備受歡迎, 其它的一些框架很難脫穎而出。不過, 這三個是眾所周知的, 已經相對成熟, 並且在市場上存在了相當長的時間, 但是它們都相對較重, 它們都需要對核心有深刻的理解，尤其是你需要自己定製些東西的時候（你曾經在Semantic中定製過下拉元件嗎？？！）
一股清流
Bulma來了。 Jeremy Thomas的作品，一個漂亮、輕量、時尚的 CSS 框架。 如果你還沒有用過, 我建議你去看看它的網站。它極具互動性，更重要的是，它純粹是 CSS！
使用 Bulma 的主要優點是它的盒模型完全是基於 Flexbox。 (是的！ 不再有 CSS 浮動和百分比!)
Bulma的主要特徵有：
- 100%響應式設計
- 模組化
- 現代化
- 免費
我在上個週末使用 Next.js 和 Bulma 建立了一個非常小的專案。 下面是我在使用這個框架中的一些筆記。
優雅的Flexbox
正如我之前提到的, Bulma的柵格完全是用 Flexbox 實現的。 想要實現彈性的等寬佈局，只用給你的元素加一個 column 類就行了。
你也可以通過新增適當的修飾符來調整列的寬度。 is-four-fifths, is-two-fifths, is-half 等等。
Bulma是以移動端優先設計的，所以在豎直閱讀上做了很多優化。
模組化
在壓縮和gzip之後，框架本身只有21kB。這已經很不錯了，同時你也可以只引用你需要的模組。
Bulma都是用SASS寫的，並且分成了39個.sass檔案。你可以單獨引用這些檔案，並且可以重用這些樣式。
在Bulma中，你可以很輕鬆的定製你想要的。程式碼分離，變數也被抽出來了，這使你幾乎可以隨意配置你想要的。
整潔的表單控制
當要選擇一個CSS框架的時候，除了定製和可維護性之外，我最看重的就是對於表單樣式的控制。
對於表單元素的樣式，我是比較傳統的。相較於用JS實現的炫酷效果，我更傾向於用原生的，瀏覽器自帶的實現方式。原因很簡單，移動裝置上的觸控機會（touch opportunity)。
在Bulma裡，我們能很容易實現一些原生表單元素的效果，比如錯誤狀態以及提示，各種各樣的按鈕以及帶有圖示的輸入框。
你需要做的只是加些class，Bulma的優雅之處就在於不需要額外增加DOM元素就能做出漂亮的樣式。
同樣我也非常喜歡Level和Hero佈局，它們使橫向佈局和簡單的banner製作變得非常簡單。
總而言之, Bulma 是一個非常好的多功能 CSS 框架, 內建了許多功能和元件, 我們可以輕鬆地重用和定製。 雖然它仍在開發中, 但它確實是穩定、成熟的, 所以我不會過分強調在商業專案中使用它。
開始使用
最簡單的，我們只需要引入Bulma的CDN地址： cdnjs.com/libraries/b…
或者通過NPM來安裝：
npm install bulma
複製程式碼如果你想在專案中使用FontAwesome，別忘了在專案中引入：
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
複製程式碼