Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Home

stubbornella edited this page · 52 revisions

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.

Ready for alpha testing

Please help me test the grids and template objects. Put them through their paces and let me know if you manage to break them!

  • Grids
  • Page Templates

Base Libraries

OOCSS is built on top of reset and fonts from the YUI libraries. These libraries provide a common starting point across different navigators.

  • Reset and Fonts from YUI are a starting point.

Upcoming

  • Module Structures
  • Module Skins
  • Content objects
  • Library

Thanks!

I’ve had the good fortune to work/study/play with some amazing developers, engineers, managers, designers, and visionaries over the years. All of them contributed in different ways to shaping my ideas about how CSS should be built and maintained. Many many thanks to Arnaud Gueras, Florian Harmel, Sebastian Tiphaine, Yann Doussot, Thomas Vial, Adrien Thery, Sebastien Cardif, Thomas Vergnaud, Etienne Bernard, Yannick Bonnieux, Renaud Boyerand, Matt Sweeney, Nate Koechley, Leslie Jensen-Inman, Philip Tellis, Stoyan Stefanov, Robin Garner, Kevin Michel, Christophe Dubois, Orphelie Dudemaine, Medhi El Azmi, Christophe Charles, Eric Prudhommeaux, Mark Mason, Tenni Theurer, Steve Souders, Jennifer Le Hegaret, Praveen P N, Doug Crockford, Nicholas Zakas, Norm Francis, Christian Heilmann, Jenny Han Donnelly, Tom Croucher, Brian Rountree, Ryan Grove, Philippe Mihelic, Stephanie Troeth, Nick Fogler, Gonzalo Cordero and the other Jukus. I’m sure I’ve forgotten some… deepest apologies.

“If you can’t be a good example, then you’ll just have to serve as a horrible warning.”

Catherine Aird
Something went wrong with that request. Please try again.