A lightweight, design-agnostic, Sass framework for developing responsive, mobile-first web sites/apps.
Warning: Satin is a work-in-progress, and subject to backwards-incompatible changes!
- Mobile-first. All the default styles and classes apply for mobile devices first, and are incrementally updated as the device width goes up.
- Flavoured BEM naming methodology
All the classes in Satin follow a custom flavoured BEM naming methodology.
The general idea is to break up the design/code into reusable and nest-able components, or blocks. Every child element of this block has to be named with .parentName_childName
.
.block-name {}
.block-name__element-name {}
.block-name--modifier-name {}
<div class='block-name'>
<div class='block-name__element'>
<div class='block-name__element__another-element block-name__element__another-element--modifier'>
Ugh...
</div>
</div>
</div>
- camelCase to for word grouping
- single underscore for children
- separate dash modifier which is always in relation to the class on the left side:
.blockName {}
.blockName_elementName {}
.blockName -modifierName {}
<div class='blockName'>
<div class='blockName_element'>
<div class='blockName_element_anotherElement -modifier'>
Yay!
</div>
</div>
</div>
There are 6 breakpoints by default:
- small (320px and up)
- smallPlus (428px and up)
- medium (600px and up)
- mediumPlus (800px and up)
- large (1025px and up)
- largePlus (1400px and up)
A sample grid looks like this
<div class='grid'>
<div class='grid_column -small6 -large3'>
Column 1
</div>
<div class='grid_column -small6 -large3'>
Column 2
</div>
<div class='grid_column -small6 -large3'>
Column 3
</div>
<div class='grid_column -small6 -large3'>
Column 4
</div>
</div>