mltsy / picnic-rails

Picnic CSS for Rails Assets Pipeline

Picnic for Rails

Installation

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.

gem 'picnic-rails'

It is also recommended to use Autoprefixer with Picnic to add browser vendor prefixes automatically. Simply add the gem:

gem 'autoprefixer-rails'

bundle install and restart your server to make the files available through the pipeline.

Import Picnic styles in app/assets/stylesheets/application.css.scss:

@import 'picinc';

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.

• You can include all modules separately. List of all available modules is here. It is required to include variables first.

@import 'picinc/variables';
@import 'picinc/checkbox';
@import 'picinc/select';

Configuration

Sass

Sass: Autoprefixer

Using [Autoprefixer][autoprefixer] with Picnic is recommended. [Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from Can I Use.

Usage

Sass

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';

You're in good company

picinc autoprefixer