Theme Upgrade: Design and SMACSS choices

It is time to make some choices. Choices on how I want my theme to look and feel … plus it is time to dig into some of the CSS. As you can see, my hijacked theme is pretty basic. Header, content area filled with post previews, and sidebar filled with widgets. I plan on removing the post page and having the page open in a modal but here is the basic areas of a post page.

Screen shot of current Home Page. Red is header, dark blue is main content, light blue is Post Preview area, yellow is sidebar, and green is widget.
Screen shot of current Home Page. Red is header, dark blue is main content, light blue is Post Preview area, yellow is sidebar, and green is widget.
Post page
Post page

SMACSS: A breakdown

I can try to describe smacss but I think the authors words work pretty well:

ABOUT SMACSS

Scalable and Modular Architecture for CSS is an approach to web development written by me, Jonathan Snook. You can reach me on my blog at Snook.ca or on Twitter at @snookca.

What does this mean to you and I? Jonathan Snook talks about creating categories for different types of CSS. This organizational system lends nicely to CSS processors like Compass.

  • Base – These are very base style and should include any browser resets.
  • Layout – These rules define where content is on the page and what the boxes should look like. i.e header, content areas, nav bars, and side bars.
  • Module – These rules define how content and what not looks inside layout areas.
  • State – These rules define how different parts react to users.
  • Theme – SMACASS is designed to be modular, so this category is for small details that might change the branding or theme of the design.

Using this system, I can already see lots of work that needs to be done to get my hijacked theme up to snuff. I can see how this should mix well with HTML5’s new structure.

Dev Tools view one of the post preview boxes. That is a lot of DOM processing.
Dev Tools view one of the post preview boxes. That is a lot of DOM processing.
Dev Tools  look at the DOM for the sidebar widgets.
Dev Tools look at the DOM for the sidebar widgets.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.