theming

As a follow up to the previous post talking about our (re)branding process, we wanted to share with you some of the details of the new theme for our site, as well as a few configuration changes, and what we learned.

960 Grid-based Theme

In an earlier post, our theme lead Alberto talked a bit about CSS Frameworks, including the 960 Grid System, which is compatible with Drupal's Zen framework. Those are two of the main tools in his theming toolkit, so we made sure to get a theme designed that would comply with using the grid system. Alberto then took the layout CSS file from the 960 Framework and substituted that for the layout CSS file in Zen, but otherwise used all the other Zen files.

Earlier this week, following much anticipation, we launched our website redesign (if you're reading this via RSS, check it out! http://affinitybridge.com), which has been in the works for several months. It began as a rebranding of the company logo, then new business cards, and finally the website. When we began this redesign process with Kirsti Wakelin, who did the design for all three, we had to spend some time considering and reconsidering what we wanted to convey with our logo and branding. Affinity Bridge has always tied itself to the imagery of bridges. We had to ask ourselves if that was something that still spoke to us, and that we felt still spoke to the people and organizations we work with.

Unless you're able to travel to the US, it's not often that we Vancouverites get the chance to go to a theming workshop put on by the author of one of the most well loved, and well used Drupal theming books to date.

January 11, 2010, Emma Jane Hogbin, co-author of Front End Drupal, is coming to town and is putting on a one-day workshop for 20 keen beginner themers.

The workshop will be geared towards people who have previous HTML/CSS experience and at least a familiarity with PHP. It will focus on bringing those basic skills and sharpening them with a focus on how to work with the Drupal theming system.

The Workshop

Front End Drupal is focuses on issues of site design, behavior, usability, and management. The focus is to show how to style Drupal sites, make the most of Drupal’s powerful templating system, build sophisticated community sites, streamline site management, and build more portable, flexible themes.

You may have heard or read comments similar to the following about CSS frameworks:

"They are not flexible enough."
"It's too much useless code."
"I like to keep my CSS clean."
"Why do I need a framework if I know what I'm doing?"
"The site is not going to change, so we don't need a CSS framework."

A CSS framework cannot be expected to be the final solution to all your problems, but it can be a useful tool for structuring and theming your site more efficiently. Read on to learn more about what CSS frameworks are, pros and cons of using them, existing framework options, and related themes.

What exactly is a CSS framework?

Every time you start a new project there are several basic lines of code that you add to your CSS; you may want to remove the default margins added by the browsers, set the font size to 12px as the browser standard, create a popular layout, etc.

We all know the infamous style.css file, and how easy is open it up in your text editor and start to dump code in to the infinite and beyond. Even though things have changed a little bit with D6 and the .info file, look at your CSS for any given site and ask yourself, "is this what we really want, a huge file where we dump everything?"

When you finish the first version of your theme, things may look nice. The CSS is clean, you have selectors grouped following your desired criteria, maybe you have some comments to help separate these groups, etc. But then another develper opens your file to make some edits, and the disaster has begun.

The next developer is not going to go through the hundreds, or possibly thousands, of lines of code that you have added, just to have an idea where they should place his/her new selectors. That person doesn't even know if the new style is going to overwrite your work, so after the code is placed they do a quick look at the page, and if everything looks awesome, the work is done.