通过本文可以了解到如何在 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 -
领取专属 10元无门槛券
私享最新 技术干货