Integrates Bulma with the rails asset pipeline.
A modern CSS framework based on Flexbox.
Add this line to your application's Gemfile:
gem "bulma-rails", github: "diproart/bulma-rails"
And then execute:
$ bundle
- bulma-extentions
- move libs to
vendor/assets/*
To import all assets in your Rails project, add the following line to your application.scss
:
@import "bulma";
Preferred SASS syntax
config.sass.preferred_syntax = :sass
- app/
- assets/
- stylesheets/
_common.sass
_vars.sass
application.sass
project.sass
Rename application.css
to application.sass
/**
*= require project
*/
Create project.sass
and app/assets/stylesheets/_vars.sass
files.
// _vars.sass
// import initial
@import "bulma/sass/utilities/initial-variables"
// setup projects colors
$green: #46a932
$blue: #499bea
$border-color: #e1e1e1
$gray: #f5f5f5
$grey-dark: #333333
// overwrite default bulma vars
$primary: $blue
$success: $green
$danger: #d80000
main project style app/assets/stylesheets/project.sass
// project variables
@import 'vars'
// bulma core
@import 'bulma/bulma'
// all bulma extenstions
// @import 'bulma-extensions/extensions'
// or one by one
// @import 'bulma-extensions/bulma-badge/bulma-badge'
// @import 'bulma-extensions/bulma-divider/bulma-divider'
// @import 'bulma-extensions/bulma-quickview/bulma-quickview'
// @import 'bulma-extensions/bulma-steps/bulma-steps'
// @import 'bulma-extensions/bulma-tooltip/bulma-tooltip'
// @import 'bulma-extensions/bulma-calendar/bulma-calendar'
// @import 'bulma-extensions/bulma-pageloader/bulma-pageloader'
// @import 'bulma-extensions/bulma-ribbon/bulma-ribbon'
// @import 'bulma-extensions/bulma-switch/bulma-switch'
// @import 'bulma-extensions/bulma-checkradio/bulma-checkradio'
// @import 'bulma-extensions/bulma-pricingtable/bulma-pricingtable'
// @import 'bulma-extensions/bulma-slider/bulma-slider'
// @import 'bulma-extensions/bulma-timeline/bulma-timeline'
// import other project styles
// app/assets/stylesheets/_common.sass
// @import 'common'
// app/assets/stylesheets/_footer.sass
// @import 'footer'
// app/assets/stylesheets/_nav.sass
// @import 'nav'
For information about customizing Bulma, see: http://bulma.io/documentation/overview/start/
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Added some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request