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
Install the Crossbar gem using RubyGems package manager:
$ gem install crossbar
if you use rbenv, make sure to run
rbenv rehash
without errors.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.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
- Fork it ( https://github.com/makabde/crossbar/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request