SubHead block title

SubHead block body. This block shows you what a block looks like in the subHead region.

Object Oriented CSS Base Theme

Navigation
User login
Left block title
Left block body. This block shows you what a block looks like in the left region. Image of Foundation Drupal 7: Learn How to Use the Drupal Framework to Quickly Build Feature-rich Websites Foundation Drupal 7: Learn How to Use the Drupal Framework to Quickly Build Feature-rich Websites
Right block title
Right block body. This block shows you what a block looks like in the right region. Image of Learning Drupal 6 Module Development: A practical tutorial for creating your first Drupal 6 modules with PHP Learning Drupal 6 Module Development: A practical tutorial for creating your first Drupal 6 modules with PHP

Object Oriented CSS Base Theme was an experimental base theme and is now abandonded.

Download Object Oriented CSS Base from drupal.org/project/oocss. This version is 6.x-1.0 from 2010-Apr-03, a 48.13 KB download.

There is nothing object oriented to see in the code or CSS. The developer refers to another developer who, in turn, mentions two main principles

  • Separate structure and skin
  • Separate container and content

There are already a lot of themes separating the layout from the decorative elements. Look at all the themes with one file named layout.css and another named style.css. OOCSS would have to do something radical to create a better separation.

Separating a content container from the contained content is already common. The construction of the container is the critical bit. Most themes use only two divisions for each container to provide horizontal centering. Placing three container divisions around content lets you play all sorts of tricks including vertical centering. The problem is the hundreds of unused divisions you end up with when you are not playing those tricks. The tradeoffs will be the usual HTML/CSS bloat versus flexibility and processing efficiency versus flexibility.

Stay tuned for the theme with some OOCSS added.

Validation

This theme validates as both CSS 2.1 and CSS 3. W3C valid CSS 3

Example HTML

Here are example HTML elements to see how they are formatted by this theme.

<a href="?x">link 1</a>: link 1 This is a test of a link you have not visited. See how links are highlighted. Hover your mouse over this link to see any hover effects that might be used then select the link to see the link displayed as visited.

<a href="?y">link 2</a>: link 2 Leave this link unselected as a comparison link you have not visited.

<abbr title="abbreviation">abbr</abbr>: abbreviation

<acronym title="Cyclic Redundancy Checksum">CRC</acronym>: CRC

<blockquote>blockquote</blockquote>:

blockquote

<cite>cite</cite>: cite

<code>code</code>: code

<div>div</div>:

div

<form> and <input>: The the comments form at the end of this page (if you are logged in).

<em>em</em>: em

<h1>h1</h1> is usually the top heading in the page. Repeating h1 in this test would break heading nesting.

<h2>h2</h2>:

h2

<h3>h3</h3>:

h3

<h4>h4</h4>:

h4

<h5>h5</h5>:

h5

<h6>h6</h6>:

h6

<hr />:

<ol><li>li</li></ol>:

  1. li

<p>paragraph</p>:

paragraph

<pre>.h3
      {
      font-size: 1.17em;
      }</pre>

.h3
      {
      font-size: 1.17em;
      }

<q>quote</q>: quote

<span>span</span>: span

<strong>strong</strong>: strong

<table><thead><tr><td>th1</td><td>th2</td></tr></thead>
<tbody>
<tr><td>td1</td><td>td2</td></tr>
<tr><td>td3</td><td>td4</td></tr>
</tbody>
</table>:

th1 th2
td1 td2
td3 td4

<ul><li>li</li></ul>:

  • li
CSS 2.1: 
Validates as CSS 2.1

Submitted by peter on Mon, 07/13/2009 - 21:24