Omega Theme and Subtheme – CSS

well, the holidays are upon us and i have been pretty busy. so here i am trying to play catchup.

i have decided to go with the omega theme. it has several points that have made me choose it.

  1. it has an html5 subtheme starter kit. 
  2. it is pretty well documented – http://drupal.org/node/819164
  3. it is a responsive theme, meaning it will execute media queries that will assign a specific css based on browser size, which means it is easily adaptable for mobile, which is the size that it is really meant to be used with (mobile) first.
  4. it is designed to be subthemed so that the core theme can be updated without impacting the subtheme that you create.

there are many elements that go into the successful creation of an Omega subtheme. I suggest you read the whole handbook. But, here, I will skip to the Omega CSS particulars.

  • global.css = global
  • yoursubthemename-alpha-default.css = default
  • yoursubthemename-alpha-default-narrow.css = narrow
  • yoursubthemename-alpha-default-normal.css = normal
  • yoursubthemename-alpha-default-wide.css = wide

it is important to note that these css files listed also indicate how the css files are “stacked” or “inherited”. What you see is that mobile devices are dealt with first. and that the layers are stacked up to a “wide” monitor arrangement. this encourages you to write “lean” css code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: