Crossbar

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

• Doc (coming soon)
  
• Changelog
  
• Issues
  

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/_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 module 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 state 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/all';
   @import 'layout/all';
   @import 'module/all';
   @import 'state/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