Gem Version

Crossbar

Crossbar scaffolds, in your project, a Sass project structure inspired by SMACSS principles.

Rationale

After reading the book SMACSS and finding it very enlightening, I decided to compile this gem; using the lessons learned from the book. Crossbar serves my basic need when starting a project but your are free to using it. And I encourage you to adapt it to fit your needs.
Crossbar will scaffold your a stylesheet structure with a basic set of sass variables and styles for base elements.

Using Crossbar

Foreword

Crossbar is made to work with a CSS reset; not to replace one. Normalize is my reset of choice; so this is the first thing that gets called in base/_b-all.scss, with the following @import 'vendor/reset';. Remove this line if you decide to use a different Reset or manage your vendor dependencies differently.

Sass structure

1. Base

The base directory contains a set of styles that will help anyone start a project with a minimal amount of styling. Base elements are styled directly at the element selector level. It doesn't and shouldn't contain any class or ID selectors. Exemple of base Sass elements include:

  • Reset
  • Vendor CSS
  • Base font sizing
  • Default font family.
  • Heading sizing.

2. Layout

The layout directory contains styles that are large containers of a page. This directory can include Sass files such as:

  • Responsive Grid
  • Page specific layout (footer, header, section, etc.)

3. Modules

The modules directory will, probably, contain the bulk of your Sass files. A page may contains multiple modules; and every module should be completely independent of its context. These modules may include, and are not limited to the the followings:

  • Content block
  • Primary action button
  • Secondary action button

4. States

The states directory may contain Sass files that will augment and override all other styles.
For example, a fieldset may be hidden until the user enables it. In this case we can use toggle between the is-hidden or the is-shown states.

.is {
  &-hidden {
    display: none;
  }

  &-visible {
    display: block;
  }
}

Order of imports

  • Reset
  • Vendor dependencies
  • Base styles
  • Layout styles
  • Modules styles
  • States styles

Requirements

  • Sass 3.3+
  • Ruby 1.9.3+

Installation

  1. Install the Crossbar gem using RubyGems package manager:

    $ gem install crossbar
    

    if you use rbenv, make sure to run rbenv rehash without errors.

  2. Install Crossbar into the current directory:

    $ crossbar install
    

    Alternatively, you can install Crossbar into a specific directory:

    $ crossbar install --path path/to/your/stylesheet/directory
    

    This install Crossbar, with all the necessary files, to the directory specified after the --path option.

  3. Add Crossbar to your project by calling the following from your main Sass files

    @import 'base/b-all';
    @import 'layout/l-all';
    @import 'modules/m-all';
    @import 'states/s-all';
    

License

Crossbar is free software, and may be redistributed under the terms specified in the license.

Contributing

  1. Fork it ( https://github.com/makabde/crossbar/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request