CSS Architecture

  1. The CSS foundation of this site is built with the Sass preprocessor langauge.
  2. The Bourbon library is used for auto browser prefixing and the Neat library is used for the grid framework. Bourbon and Neat are open-source products from Thoughtbot.
  3. Media queries are built mobile first.
  4. Hard coded magic numbers are avoided and, if necessary, defined in the _variables.scss file.
  5. Spacing units are as much as possible defined as rem or em units so they scale appropriately with text size.

Naming Convention

The naming convention used in this library is based off of BEM methodologies (block, element, modifier) but uses a more casual and human readable syntax. All words are separated by a single dash and modifiers come directly before the object they are modifying. The purpose of this is to have a more friendly language for those not familiar with BEM but still imposes a logical convention for structure. For example:

  • .block
  • .block-element
  • .modifier-block-element
  • .alert
  • .alert-title
  • .danger-alert-title

Browser Support

Browser compatility is tested against IE8 and up, and latest versions of Chrome, Firefox, and Safari. Partial support for HTML5 and CSS3 in IE8 and IE9 are supplied by polyfills:

  1. html5shiv: adds support for HTML5 elements.
  2. respond.js: addds support for media query.
  3. selectivr.js: adds support for CSS3 psuedo and attribute selectors.
  4. rem.js: adds support for rem units.