Sunday, March 1, 2009

Object Oriented CSS


How do you scale CSS for millions of visitors or thousands of pages? Nicole first presented Object Oriented CSS at Web Directions North in Denver. Since then, the response has been overwhelming. OOCSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.


Two main principles

  1. Separate structure and skin
  2. Separate container and content

Getting Started

  1. Download all the files and set up a local directory
  2. Open template.html (this is the basic template you will modify to create all other pages).
  3. Set your left and right column widths by extending the column objects
  4. Use grids to break the page up further into smaller sections.
  5. Test your site functionality by adding content objects from the content.css file. These can also be found in library.html.
http://www.slideshare.net/stubbornella/object-oriented-css?type=presentation
http://wiki.github.com/stubbornella/oocss

No comments: