在这 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地址：
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>
