bulma-rails

Integrates Bulma with the rails asset pipeline.

A modern CSS framework based on Flexbox.

Installation

Add this line to your application's Gemfile:

gem "bulma-rails", github: "diproart/bulma-rails"

And then execute:

$ bundle

What diffrent from original?

bulma-extentions
move libs to vendor/assets/*

Usage

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

Styles logic

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

Contributing