在 Rails 中使用 Bulma 框架

通过本文可以了解到如何在 Rails 中使用 Bulma　框架。

什么是 Bulma？

Bulma 是一个基于 Flexbox 设计的开源 CSS　框架。

容易学习，容易上手，节省开发时间。

如何使用 Bulma

使用 bulma-rails 这个 Gem。

编辑Gemfile

在 上方添加如下代码

执行 完成安装

修改app/assets/stylesheets/application.scss

在最后添加

修改app/assets/javascripts/application.js

方法一

按照官方文档说明，若需要使用fontawesome，则需要添加下面一行到 `

在 上面添加到app/views/layouts/application.html.erb的　　中间

方法二

或者将上述 下载并保存到app/assets/javascripts/下面

并修改app/assets/javascripts/application.js，在 上方添加

如何自定义 Bulma 颜色等

修改app/assets/stylesheets/application.scss

在 前面添加代码，大致变成这样：

具体可以参考

Bulma Customise

How to customize bulma variables in rails

在文中说到，需要将文件名修改为application.css.scss

但实际使用中，发现不改变名字也可以，于是名字就没动。

Links

Bulma Github

Learn Bulma CSS for free

题图：google.com

- End -