在這 Bootstrap 主導(dǎo)的世界里,Semantic UI和Foundation備受歡迎, 其它的一些框架很難脫穎而出。不過, 這三個是眾所周知的, 已經(jīng)相對成熟, 并且在市場上存在了相當(dāng)長的時間, 但是它們都相對較重, 它們都需要對核心有深刻的理解,尤其是你需要自己定制些東西的時候(你曾經(jīng)在Semantic中定制過下拉組件嗎惧浴??R莅睢)
一股清流
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>