Since the beginning of January, Smart Ideas has new look. The new custom Drupal theme is based on Object Oriented CSS (OOCSS).
It was really easy to setup the Drupal theme using OOCSS. page.tpl.php is based on the OOCSS page template. It is enough to include the following CSS files in order to achieve a reasonable look:
libraries.csstemplate.csscontent.css
Afterward, the author can use his creativity to adjust the default styles and styles added by Drupal modules (forums, blocks, etc.).
The OOCSS files should be included before any other CSS files. libraries.css contains Yahoo reset. Therefore, it should be included as the first CSS file. In case of a conflict between style rules, Drupal rules should have higher priority (thus Drupal CSS files should be included after OOCSS files).
Following OOCSS features are used in the custom Drupal theme:
- grids are used to style the panels on the front page.
- modules are used to style most of the blocks.
- tabs are used to style the primary menu.
Several problems were found with OOCSS. If used out of the box, even the HTML delivered with OOCSS code does not display correctly (at the time of writing this blog post) in IE7 and Safari 3.2. The custom theme contains workarounds for these problems. Issues were filed here: http://github.com/stubbornella/oocss/issues (issues 23, 24, 25).