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.



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


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

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

If you liked this post, share it with your followers or follow me on Twitter.