Picnic for Rails
picnic-rails is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the
picnic-rails gem, and ensure that the
sass-rails gem is present - it is added to new Rails applications by default.
It is also recommended to use Autoprefixer with Picnic to add browser vendor prefixes automatically. Simply add the gem:
bundle install and restart your server to make the files available through the pipeline.
Import Picnic styles in
Make sure the file has
.css.scss extension (or
.css.sass for Sass syntax). If you have just generated a new Rails app,
it may come with a
.css file instead. If this file exists, it will be served instead of Sass, so remove it:
$ rm app/assets/stylesheets/application.css
Do not use
//= require in Sass or your other stylesheets will not be [able to access][antirequire] the Picinc variables.
- picinc.scss - main project Sass file, imports Picnic and variables.
@import 'picinc/variables'; @import 'picinc/checkbox'; @import 'picinc/select';
Using [Autoprefixer][autoprefixer] with Picnic is recommended. [Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from Can I Use.
The full list of Picinc variables can be found here. You can override these by simply redefining the variable before the
@import directive, e.g.:
$picnic-deep: true; $picnic-tablet-width: 750px; $picnic-laptop-width: 1200px; $picnic-success: green; @import 'picinc';