Theming

Understand Omega CSS and DOM for Drupal 7

Last updated March 3, 2020
Categories

Check your version

This tutorial covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Sprout Video

The combination of Omega, Alpha and our new 960 robots base theme means that there are a pile ton of CSS files included in our pages now. These CSS files provide the foundation for some of the coolest features in Omega like the mobile first approach and the ability to provide a responsive design. Lets take a look at

  • The various CSS files included by alpha, Omega, and our subtheme and how they work together
  • Do a quick expirement to demonstrate the various CSS files associated with Omega's media queries
  • Talk abou the HTML output by the Omega theme and how it's structured.

So put on your goggles beacuse we're about dive deep into the land of responsive CSS.

Additional resources

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.