[译] Bulma: 2018年你应该关注的CSS框架

3,305 阅读3分钟

原文地址:https://matwrites.com/bulma-css-framework-for-2018/

image

在这 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 等等。

image

Bulma是以移动端优先设计的,所以在竖直阅读上做了很多优化。

模块化

在压缩和gzip之后,框架本身只有21kB。这已经很不错了,同时你也可以只引用你需要的模块。

Bulma都是用SASS写的,并且分成了39个.sass文件。你可以单独引用这些文件,并且可以重用这些样式。

在Bulma中,你可以很轻松的定制你想要的。代码分离,变量也被抽出来了,这使你几乎可以随意配置你想要的。

整洁的表单控制

当要选择一个CSS框架的时候,除了定制和可维护性之外,我最看重的就是对于表单样式的控制。

对于表单元素的样式,我是比较传统的。相较于用JS实现的炫酷效果,我更倾向于用原生的,浏览器自带的实现方式。原因很简单,移动设备上的触摸机会(touch opportunity)。

image

在Bulma里,我们能很容易实现一些原生表单元素的效果,比如错误状态以及提示,各种各样的按钮以及带有图标的输入框。

你需要做的只是加些class,Bulma的优雅之处就在于不需要额外增加DOM元素就能做出漂亮的样式。

image

同样我也非常喜欢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>