CSS Frameworks: First Looks

CSS can be the most frustrating part of website development. This is solely due to the the inconsistencies and lack of implemented standards on the part of Microsoft for their Internet Explorer (IE). The only reason I still take the time to ensure my web pages look good in IE is because 30% of my visitors are still using the browser.

So I decided to embark on a journey using CSS Frameworks to see if they could reduce my CSS pain and allow me to design a website more rapidly. Here is a summary of my first experience.

I began to consider my options for choosing a CSS Framework in response to a post I saw on Noupe ( 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started ).

I began by going through the list of frameworks reviewed and downloading each one. I have an XAMPP distribution installed on my computer which I use for development. So I unpacked the files for each framework distribution into its own directory from the web root.

It is noteworthy that the version numbers of most distributions are pre-release or beta (i.e. – Blueprint is version 0.8).

I then set out to examine each one for how easy it was to use in my development environment. My first task was to review the documentation and see how easy it was to use. I was reminded of the painful reality that good developers are very impressive at getting your applications to do cool things. But they still lack the desire to document anything to the point that the rest of us can understand how the thing works. This doesn’t apply to all developers of course. But it certainly applies to most of the framework developers.

The most thorough documentation provided was for the YAML (Yet Another Multi-column Layout) CSS Framework. Full documentation was provided in English and German and the examples included were very impressive. But it was still difficult for me to determine the best way to use their CSS classes. In every distribution, I was looking for something that resembled a quick reference sheet of their classes. Looking through the CSS code didn’t offer too much more comfort either. It looked like I would need to spend a lot of time trying to understand what they did before I could begin to use it.

My preferred CSS Framework is Blueprint. The BluePrint CSS Framework had minimal documentation, but it was concise and easy to understand. Of all of the distributions, I was up and coding quicker with BluePrint than with any other distribution. The grid system used is a 24 column approach that allows you to easily specify the width of column and container with just a class.

The BluePrint CSS Framework was the easiest to use and understand from my viewpoint. However, they all need a bit of work to become the Rapid Application Development tools they are striving to be. They have all included fixes for the faults of Internet Explorer, but this is still no guarantee that you won’t have cross browser compatibility problems.

After quickly designing a new layout for my site, I was disappointed to see that IE still didn’t respect my layout options. I needed to tweak the CSS to make the page work in IE. The good news was that the amount of effort in tweaking was far less than if I had developed the CSS from scratch. Also, the website looks great, and as expected in all browsers non-IE. The bad news is that, even after the tweaking, there are still some minor formatting issues in IE.

CSS Frameworks In Summary

I really came to appreciate the challenge it must be to develop a CSS Framework when one of the most popular browsers doesn’t conform to the industry standard. Any respect I ever had for IE is now completely gone.

Many CSS Frameworks still require some work if they want to become what they are meant to be – a Rapid Application Development tool.

It is still early days for CSS Frameworks. I am looking forward to seeing these develop further. I am sure it will become much easier once all browsers comply with the standard.

Tweet This