Compass Boilerplate
The one-line-install foundation for clean, low-specificity, compass-based stylesheets, powered by Libsass. Supports node-sass).
Installation
npm install compass-mixins # Dependency npm install compass-boilerplate
/* app.scss or other stylesheet */ ; // If you want it ; // If you want it ;
Example Usage
;
Becomes:
Documentation
- BEM Methodology
- Blocks
- Elements
- Modifiers
- Namespacing
- Lists
- Media Queries
- Placeholders
- Strings
- Tables
- Third-party SASS tools
- Compass mixins
- Normalize
- HTML5BP
- Units and Layout
- Variables
BEM Methodology
If you're not familiar with the BEM approach of organizing CSS selectors, then read his CSS Tricks article.
Mixin: Block
@include block()
sets the context for any block styling. It automatically namespaces nested classes.
Downsides
There are some downsides to using this package:
- Code becomes less searchable. You can't just search for
button__primary
, you have to findprimary
inbutton
. - ??
Development
PRs are welcome! It's easy to work on this project:
git clone git@github.com:sir-dunxalot/compass-boilerplate.gitcd compass-boilerplatenpm install
Please work on a feature branch and issue a PR to master
without a version bump.
To run the tests:
npm test