Responsive Design with Sass and Compass

Notes from DrupalCon 2012 from a session I attended about Responsive Design with Sass and Compass

Design in browser.

LiveReload => saves sass on the fly for in-browser designing.

FireSass

SVG.

• supported in IE6-10, FF2, Chrome, Safari, iOS, and Android 2.2.3 image wrapper for xml.
• great for iconography in general.
• some limitations:
  • some gradients, drop shadows, ff pixelates svgs.
  • svg sprites don’t work in firefox.

Turn icons into fonts, and embed fonts. suffers from blurry edges if they don’t render at a specific pixel size. easy to throw in icon fonts. quick to done. monochrome only.

css icons… there is a compass plugin for this.

release candidate of sass 3.2

Fluid grid systems:

Twitter Bootstrap

Susy Grid

Singularity grid system

Themes:

• http://drupal.org/project/borealis
• http://drupal.org/project/aurora
• http://rubygems.org/gems/compass-aura

“Measure” (line-length) “Letting” (line-height)

Use modular scale to do font scaling on a body font-size. Breakpoints off of a predefined measure.