Satin

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!

---

Documentation

Quick overview

• 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

Class names (flavoured BEM 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.

Standard BEM example:

.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>

Satin flavoured BEM:

• 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>

Breakpoints

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)

Grid

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>