I am available for freelance work - HIRE ME

Why I Use CSS Frameworks

posted by Matt Ward on Mar 3, 2011.

I’m a big fan of CSS frameworks, and the immense benefits that they bring to my work as a web designer and developer. In this article, I would like to look at some of the reasons why I use these types of tools and even consider some of the criticisms that have been laid against them.

As a web designer and developer, I both love and appreciate a good, well conceived and exceptionally executed CSS framework. I’ve worked with a handful and checked out many more, and I find them to be one of the most useful resources available on the web. In this post, I would like to offer my perspective on these frameworks, looking at some of the perceived disadvantages and outlining some of the benefits.

For any readers who don’t know what a CSS framework is, it’s kind of like a template which contains a series of predefined, CSS constants, which are either applied at a global level, or which provide you with custom, pre-styled classes that you can use in your HTML. At a really basic level, a reset stylesheet is a type of framework, which is designed to strip out a number of preset browser styles and bring the a common baseline to a document in all browsers. Other types of frameworks have been designed to allow for the use of grids, to improve typography and even to provide the basics of media query-driven responsive design.

Some common and/or popular frameworks include the 960 Grid System, Less Framework, Tiny Fluid Grid and Baseline. These are all great frameworks that are worth a few moments of your time, so be sure to check them out!

A Tool, Not a Crutch

I know that there are some people out there, many of whom I have a great deal of respect, who really don’t like CSS frameworks, and who argue that we should be creating our own styles and our own unique work. From most of what I have read, I think that people with this viewpoint tend to see a framework as a crutch that lesser developers or designers can lean on in their own work.

I really don’t see it that way.

To me, a good CSS framework is just a tool that makes my life easier and helps me develop sites more quickly and effectively. I haven’t used frameworks like the 960.gs system because it was seemed like some sort of magical tool that just took care of all my layout needs in some way that I couldn’t quite grasp. I actually understand exactly how it works, and that’s one of the basic reasons why I do use it. It’s a simple solution that I am quite fond of, and after having grasped the concept, it was the way I wanted to develop my sites (at least until recently, but touch on that in another post).

Given this, the idea of writing my own code didn’t seem so much like reinventing the wheel as it did just making a direct copy of a wheel that was sitting right in front of me.

In other words, I see it as totally unnecessary to completely rewrite something that has already been written. Frameworks exist, and many of them have been built by some very smart and talented people. For me using them is not a matter of laziness or a lack of inexperience. Instead, it’s a matter of pragmatic efficiency!

The Issue of Bloat

The other comment that I have heard against the use of frameworks is that they tend to add a lot of extra bulk to a CSS file and bloat it up with styles that you’re never going to use. For example, if you look at the 960.gs code, you’ll see class definitions for things like

.container_16 .grid_9{width:520px}
.container_16 .grid_10{width:580px}
.container_16 .grid_11{width:640px}

And on it goes. With a wide range of different container sizes and column options, and with a number of prefix and suffix spacing classes, this does add a fair number of styles rules to the stylesheet. As such, I think that the bloat criticism does have some merit, but it doesn’t bother me too, too much. The size of most CSS frameworks that I’ve looked at is not all that large, especially when compared to the dozens and sometimes hundreds of additional style rules that go into any given stylesheet, or against other types of frameworks like jQuery (who really uses all of the built in methods?).

Besides, if file size and performance are really an issue, you can always minify or otherwise compress the file, use any of a variety of online tools to optimize your CSS, or use Chrome’s built in analytic tool (Inspect Element » Audits » Run), which will actually show you the unused styles on a page (thanks to @Brandon_Diaz for the headsup on that one!). If you find you only need half of the framework, just take the other half out!

The CMS Parallel

One comparison that I like to make is between frameworks and content management systems. A huge percentage of the world’s websites are running on WordPress, while many others are driven by the likes of Drupal, Joomla, Concrete5, ExpressionEngine, MoveableType, Unify and LightCMS (just to name a few off the top of my head). Setting the issue of personal preference aside, it seems to me that, in the grand scheme of things, there seem to be fewer and fewer sites that are either built on a set of flat, HTML files or even running on custom content management systems (though I do know some awesome people who like to work that way).

The point is that a CMS like WordPress is, in many ways, a framework in its own right. Instead of working on your CSS, however, it provides a framework for organizing, storing and presenting content. It also generally offers a means of creating a custom theme through which to filter that content, thus marrying it to a pre-defined design.

It’s by far the best solution for building anything but the very simplest of sites, and I strongly doubt that there are all that many people out there that would object to the use of these CMS solutions (though I have read about the bloat of some of the larger systems, like WordPress, which contain features that most users will never take advantage of). There are excellent solutions available to us already, many without any associated cost. So, unless you are a really advanced programmer who enjoys coding your own CMS (which is cool too), then it only makes sense to use what’s out there.

Obviously, a CSS framework exists on a whole different scale, but I believe that the parallel is strong. These frameworks are there, and if they fit with your design and/or development strategy, go ahead and use them.

Going Custom

Of course, going custom is always and option too. Many of the designers and developers that I know use frameworks that they have custom built themselves. Sometimes this customization is done from the ground up. Other times, it’s achieved by mashing a handful of existing frameworks together to create a virtual Monster of Franken-CSS. Sometimes, these personal, custom frameworks will eventually evolve into something that is released publicly, which is part of the reason that we have so many different frameworks targeted at providing solutions to the same problem. Often, these will be parallel forks of the same original concept!

So is custom the way to go? I’ve started to move in that direction myself, but I don’t think that it’s necessarily a requirement, or even something that designers and developers should be actively undertaking, at least not at first. It comes back to what I’ve been saying through the entire article–if a solid solution exists, go with it. There is no real need to create your own framework simply for its own sake. The only reason that I am moving towards creating something custom for myself is that there isn’t a single framework that encompasses everything I’m looking for.

So I’m looking at creating what I need. Even I’ll probably be using a number of existing frameworks as a frame of reference and working to bring them together into something that works for me! In this, I am reminded of BlueTrip, which is a framework that, according to its website, “originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.”

Conclusion

Some people might look at my defense of frameworks and call me lazy, or think that I’ll use somebody else’s freely distributed code simply because I can’t be bothered to write my own. Not so! I just live in the real world. I have a wife and a daughter, I have commitments in other areas of my life, and other things that I like to do. Any time that I can save without comprising the quality of my work, is an absolute bonus for me. Good, well written CSS frameworks that compliment my development style are one set of tools that I have found to be incredibly useful in this area.

Above anything else, that is the primary reason that I use, and will continue to use some of the best CSS frameworks. Every time I get to close my MacBook early and play a few more minutes with my little girl, it’s all worth it to me!

What do you think? Do you use some sort of CSS framework? Or maybe you use several? I’d love to hear your thoughts and opinions on this matter.

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Mar 3, 2011

Brandon Diaz says:

My thoughts on frameworks are the same as boilerplates. For those that use them correctly they’re an immense help, however many people simple take them at face value.

Ideally you’d find/create a framework, and remove/add whatever you commonly use. There’s no one-size-fits-all solution.

Right now I use a very stripped down HTML5 boilerplate with a custom framework based on the 978 grid. I also have commonly used classes for floats and such.

Also, thanks for the mention. ;]

Mar 3, 2011

Aaron Tweeton says:

I was very much against CSS frameworks until perhaps today when I quickly redid my WordPress theme using a blank theme and the Baseline.css framework. It’s not the greatest thing in the world, but I was able to launch it in only a few hours of development time. I like the Baseline.css framework because it doesn’t have as much of the bloat and confusion other frameworks have.

Mar 3, 2011

Dwayne says:

I love 960.gs. It covers all of the right bases and it’s small, easy to learn and the class names are somewhat semantic.

I hate it when I read blog posts from stupid nerds saying that CSS frameworks are a bad idea, blah, blah, blah.

It’s about time someone posted something nice about them, they’re invaluable.

Mar 3, 2011

Colin Oakes says:

Nice post Matt. I think you hit the mark on all of your points. You present both sides of the debate and I would say you came out on top.

If any one is looking for a CSS checker for Firefox give Dust-Me a try (https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/)

Also if your looking for more frameworks check out this round up of frameworks and grid systems I put together, http://goo.gl/gFav5

Thanks for sharing your thoughts once again Matt, keep them coming!

Mar 4, 2011

cyril gupta says:

I’ve recently started using the bluetrip cms in my latest app. It’s helpful, but I am changing so many default styles to suit my own presentation ethos.

Earlier I was using just a reset stylesheet. But this is certainly better. I use LESS, and right now there’s no LESS compatible framework.

Mar 4, 2011

Piotr Nalepa says:

I use CSS framework Baseline, just for it typography stylesheet. I prefer creating my own stylesheets.

Mar 4, 2011

Nils Geylen says:

Reading this, I may give them another shot, see which one I may be able to use.

Thing is, I work for small clients, small sites. Already I find WP too bulky so I often use a lighter CMS or hand code.

In that regard, I like your analogy: a CMS is a framework too, of sorts. If you dislike working with them because of that, you’re doing it wrong I think.

Mar 4, 2011

jamesvec says:

I am a huge fan of the 960 gs, especially when I have to mock up something quickly in the browser. I would say it easily cuts my development time in half, especially when you take into consideration all the cross browser bugs I find when I code custom. (sometimes I R BAD AT MATH)

Mar 4, 2011

Jeremy Carlson says:

I’ve tried the 960gs, and while I don’t care for frameworks like this, I will admit that it is really well done. That doesn’t mean I think that frameworks are bad. I actually don’t care one way or the other. You either like using them or you don’t. I’m with you in that, if it speeds up my development time, I’m all about it. CSS frameworks just didn’t do that for me.

Mar 4, 2011

Sara says:

Well, I use a framework (I just switched from 960gs to Blueprint), but I often need to set a custom width here or there. Still, the overall site is coded more quickly and more uniformily than if I did all the CSS from scratch, so it’s worth the tiny bit of extra “bloat” to make it work.

Mar 4, 2011

Yvonne says:

I use the Gantry Framework, which is based on the 960gs, for my Joomla development projects. I must say that it is a great tool. Sometimes my clients wonder how their websites would look like when widgets/modules are rearranged differently or when the sidebar is moved to the other side, and I can show them very quickly utilizing the framework (more quickly than modifying my mock up in Photoshop).

Mar 4, 2011

Daniel S says:

I dont like CSS Frameworks – i can write my three or four container declaration with a little bit of “float: left” for myself.

For our german readers, i’ve written an article about css frameworks (and why they are useless) : http://www.shiftedwork.de/blog/2010/09/09/uber-den-unsinn-von-css-frameworks/

Mar 4, 2011

Angie Bowen says:

I’ve never had any real luck with premade frameworks but once I actually sat down and created my own from scratch, I realized how much time it saves me.

Mar 5, 2011

Norbert says:

I don’t think CSS framework is that important, more important is HTML framework. You need to have the same HTML for every component on all your projects, e.g. everywhere #globalNavigation, #primaryNavigation, #secondaryNavigation, #footerNavigation. All marked semantically and yes, than you can and you definitely will have a “standard” CSS for that HTML. I would stop talking about CSS frameworks and start to call it HTML frameworks.

Mar 8, 2011

gordon says:

I hate css frameworks and prefer to develop everything on my way, no how they tell me. But for begginers maybe its good.

Mar 8, 2011

Niki Brown says:

Avid 960.gs user here! It’s amazing how fast I can code a basic layout now. And yeah, making time for other things in life is nice :)

Mar 8, 2011

Matt Ward says:

Yeah I’ve given the 960.gs a lot of love! Starting to migrate away from it a bit though. Planning on writing a bit about that in the coming weeks too!

Mar 8, 2011

David says:

Sites that use frameworks eventually start getting really boring since they all kinda look a little the same. I like things that are consistent but yet also unique and different.

Mar 9, 2011

Arthur Corenzan says:

I made up my way of using CSS frameworks; since I don’t like having classes like .grid-1 or .span-7 in my markup, I use LESS to make Blueprint framework grid work as a mixins and functions, than I call .span-7 inside my semantic-named classes and ids.

On production I deploy only parsed CSS. :)

Mar 13, 2011

Edgar says:

I use a german framework Yaml. Is fantastic.
Very useful.

May 26, 2011

Hosting Best says:

I just stick with WordPress, allows me to get something semi-good looking up in a few hours and then allows me to easily edit as needs be. Good article BTW

Jun 30, 2011

Alex says:

As Edgar said, YAML is a great framework and we implemented it in our WordPress Framework, the one and only WordPress Framework with HTML5 and CSS3 support. You might want to check it out at http://xtreme-theme.com

Jul 1, 2011

Dustin says:

What about:

http://www.rootstheme.com/

http://themble.com/bones/

Both are based on CSS frameworks, grid systems and include the well known HTML5 Boilerplate.

Jul 17, 2011

Jesus Castillo - Culturismo sin Tonterias says:

You need to have the same HTML for every component on all your projects, e.g. everywhere #globalNavigation, #primaryNavigation, #secondaryNavigation, #footerNavigation. All marked semantically and yes, than you can and you definitely will have a “standard” CSS for that HTML.

Nov 18, 2011

Matthew Trow says:

I’ve been considering the framework approach for some time. I’m using parts of the HTML5 Boilerplate and often end up simply copying my CSS code from an old project and modifying it.

My take on frameworks is to pick the bits you need – but you absolutely need to know what your doing first.

If you have no understanding of how the framework has been put together, you’ll end up with an almighty mess of code.

Also, overcomplicated frameworks can end up creating *more* work – I took a quick look at the twitter bootstrap CSS file. It’s completely unusable for me, as there’s *far* too much specific styling going on.

If your an experienced frontend developer, take a look at the frameworks available, learn from them and … roll your own!

The alternative, if you pick the wrong framework for a project, is trying to hammer a square peg into a round hole – frustration and a whole lot of mess.

Apr 18, 2012

Ankeet Maini says:

I couldn’t agree more with you on using framework. I being a novice had a great help from them.

I mixed and matched with 1140 for grid, Blueprint for typography, and EricMeyer’s for reset!

So far so good!

May 29, 2012

nyc says:

I think you have the right idea here, I was just thinking the same thing today. This would in theory let you move to another framework without changing the html markup at all.

Leave a Comment

Links

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014