[譯] Bulma: 2018年你應該關注的CSS框架

原文地址：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>
複製代碼