rigging

Welcome to Rigging

Rigging is a framework of Sass placeholder elements, mixins and functions designed to enable Rails applications' stylesheets to remain organised, semantic and easy to maintain.

It includes a variety of control templates for boxes, alerts, etc. that can be customised to suit your own site's visual design needs. The intention is to provide clear structure without enforcing a visual design ethos at the same time. (Let's face it, all those sites using Twitter Bootstrap have become so easy to spot...)

When installed as a gem in your Rails apps, the libraries are integrated into the asset pipeline.

Rigging is built on top of Chris Eppstein's Compass, so all of its awesome tools and utilities are available in your Sass toolbelt as well.

Principles

• HTML markup should be minimal and semantic.
• CSS for each HTML element should be able to use Sass @include and @extend directives to make their definitions easy to understand and maintain.
• The use of Rigging encourages good practice: it does not impose a design.

Usage

In your application.css.scss file, use Sass @import directives to load the module(s) your application needs.

# to use rigging's reset CSS (not included in the main rigging import – see
# below for an explanation
@import 'rigging/reset';

# to import all of rigging's modules in one go
@import 'rigging';

# to import an individual module, or group of modules
# NB: modules below do not yet exist
@import 'rigging/tables'; # all rigging table modules
@import 'rigging/tables/zebra-striping'; # import only zebra striping module

Notes

Reset CSS

Rigging is predominantly designed not to change any of your CSS until and unless you declare that you want it to. The @import 'rigging'; directive should never alter any of your site's presentational qualities until you start using its mixins, placeholders and variables.

A reset.css file goes against this principle, because its sole purpose is to directly affect change. For this reason, although Rigging includes a reset.css file, it is not included in the standard module imports.

If you wish to use Rigging's reset.css file, you must explicitly import it before any other CSS declarations in application.css.scss:

@import 'rigging/reset';

Alternatively, you can roll your own reset.css file and continue to use Rigging's mixins.