Most web apps can benefit by leveraging a CSS framework to follow best practices. Realized-app is no different.

Our chosen CSS framework, Object Oriented CSS stood out because of two underlying principles:

• Separate structure and skin
• Separate container and content

With Object Oriented CSS, columns or grids control width. Content controls height. Modules provide containers. Skins are applied to any of these structures.

Like Rails, the framework continues to evolve. Our adoption of Object Oriented CSS divides it into three parts:

• Core
• Core mods
• Skins

The core consists of five .css files: libraries, template, grid, content and module. Rather than modifying the core, we place any modifications to the core in five core mods files. We then associate a distinct skin.css to each of the core elements. As the core files evolve, we simply replace them without disturbing the remaining files.