CSS

What happens when you give nerds the space to get creative? Friday at Affinity Bridge Head Quarters went a little something like this...

Ariane: Wow Alberto, our site header and footer are moving! But you hate Flash, how did you do that!??

Alberto: Well, actually it's not flash at all! It is a very neat script named jParallax that I had been wanting to experiment with for animating the illustrations on the site.

Ariane: Can you tell us a little bit more about this script, how does it work, how is the movement controlled, the overlapping, etc?

Alberto: I sure can. According to wikipedia "Parallax is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight". What jParallax does is use the jQuery library to implement this effect.

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.

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.