[译] 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>
复制代码