CSS IDs and Classes in an Omega theme: a general outline

When you approach the task of theming a new Omega subtheme, it's worth bearing in mind the variety of classes and IDs that are built in to the Omega structure.

Taking the content section which in this case contains a content region which takes up 8 columns of grid width, and a sidebar region which takes up the remaining 4 columns, you can see a nested structure:

  • section with id of "section-content" and classes of "section" and "section-content"
    • div with id of "zone-content-wrapper" and classes of "zone-wrapper", "zone-content-wrapper" and "clearfix" (this div only exists if the zone is configured to have a full width wrapper)
      • div with id of "zone-content" and classes of "zone", "zone-content", "clearfix" and "container-12"
        • div with id of "region-content" and classes of "grid-8", "region" and "region-content"
          • div with classes of "region-inner" and "region-content-inner"
        • div with id of "region-sidebar" and classes of "grid-4", "region" and "region-sidebar"
          • div with classes of "region-inner" and "region-sidebar-inner"

Here is an image showing this structure:

Structure of blocks in content section

Mothership

Mothership is an HTML5 base theme that offers a workaround to Drupal’s obscure love for wrapping everything in 2 divs and slapping on 3 CSS classes wherever possible.

Like other blank canvas base themes (eg Stark, Framework), this theme will NOT make your site look pretty. Unlike the others, it will do more to help you clean up the mess of excessive markup that Drupal provides out of the box, offering settings to optionally remove CSS classes in the markup.

If you really like the markup & CSS options that Drupal provides, this theme is probably not for you, and that's perfectly okay. If, on the other hand, you care about clean markup & CSS, Mothership could be the solution you have been dreaming of all your life.

The cure for divitis

Drupal suffers from divitis: <div><div><div><div><div><div><div><div>$foo….. I didn't ask for 3 div wrappers so don't add them, Drupal!

Class war

<div class="baseclass anotherbaseclass yetanotherclass andonemorejustbecausewemightneedit">...</div>
- No reason to load in classes that aren't needed!

Pages

Subscribe with RSS Subscribe to RSS - html5