Tapestry
![Bower version](https://camo.githubusercontent.com/bf1bd5a98cd1b84c327a67291ed0fe5e54dd02d1a4080e70681977a696cacf33/68747470733a2f2f62616467652e667572792e696f2f626f2f74617065737472792e737667)
CSS guidelines
Goals
- Maintainable OOCSS components
- Scalable code
Naming
- BEM - Block-element--modifier
- PascaleCase for component name
- camelCase for component childs
- Lowercase for modifiers
- Use
is-*
andhas-*
modifiers when needed
<div class="Component Component--modifier is-state">
<div class="Component-child"></div>
<div class="Component-otherChild"></div>
</div>
Spacing and indentation
- Two spaces indent
- Space after
:
property declaration - Space before
{
rule declaration - Closing braces on a new line
.Component {
display: inline-block;
}
Else
- Never use IDs
- No magic number
- Only use
!important
on utility classes - Max nesting level: 3
Development
Installation
npm install
npm install -g garris/backstopjs#version_2_0
Run
gulp // starts server and watch files, available on localhost:3000
gulp icons // builds icons
Pre-commit and pre-push
Installation
Pre-commit hook ensures code has been linted.
npm run pre-commit
Bypass
To bypass the pre-commit, just add -n
option.
git ci -n
git ci -nm "My commit message"
Tests
Tests are run with Travis and have to be updated before branch merges. They can be run locally with these following commands.
npm run lint // linter
backstop reference // visual tests: builds references
backstop test // visual tests: compares references with actual HEAD