James Wilson

Web developer. Drupal enthusiast. Surfer and musician. I craft bespoke websites at Bluespark.

Responsive Design with SASS/Compass

Design in browser.

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



  • 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


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