Design

• Dochub.io

Basics

tag
.class
#id

display: block - default 100% width 
display: inline - consumes width of content

position: absolute - out of flow

Guides

• http://www.youtube.com/watch?v=_mgyfwYKpmQ

• http://www.w3.org/wiki/Floats_and_clearing

Accessibility

Headings should not be removed using display:none, because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". [1]

Tools

• ColorZilla Ultimate CSS Gradient Generator

Sass

• Sass features tutorial
• Sass reference
• Sass functions

_partial.sasst  - partial files, for inclusion, will not be compiled

• SASS - The Next Wave in Styling and Theming
• Sass and Compass overview

Other

• http://thoughtbot.com/bourbon/
• sass-recipes
• https://github.com/perezd/CSS3-Ribbons#readme

Compass

• Compass tutorials
• Compass reference
  • CSS3
    • CSS3: Images (use for gradients)
  • Helpers
  • Layout
    • Layout: grids
    • Layout: sticky footer
    • Layout: stretching
  • Reset utilities
  • Typography links
    • Typography: lists
    • Typography: text
    • Typography: vertical rhythm

• Sass (SCSS) and Compass Cheat Sheet

Grids

• http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/
• http://blog.carbonfive.com/2009/03/02/compass-960-semantics/
• http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/
• http://compass-style.org/reference/blueprint/grid/

Susy

• Susy
• Introduction to Building Websites Using Susy and Compass's Vertical Rhythm