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