在 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 -

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180728G1O2XD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券