Some of my boilerplate CSS

Taking some notes of my boilerplate variables

location Raleigh,  NC,  US

Typography

Leading

This goes into the line-height tag. 

  --leading: 1.45;
  --leading-tight: .8;
  --leading-short: 1.36;
  --leading-slim: 1.18;
  --leading-fine: 1.09;
  --leading-flat: 1;
  --leading-loose: 1.7;

Kerning

This goes into the letter-spacing tag. 

  --kerning: normal;
  --kerning-loose: .05ch;
  --kerning-tight: -.04ch;
  --kerning-caps: .1ch;

Spacing

I like to use the font sizes and scale for all spacing, as everything comes down to the font size and relationships. As such:

  • the --gutter is the vertical spacing, between columns and such;
  • flow-space is the horizontal spacing, a counterpart to the gutter; and
  • --measure is the line length.