CSS Frameworks A Love Affair

Let me preface this post by saying I’m a huge fan of using frameworks to build websites. They speed up the development process, make prototyping fun and interactive, and many come packed with handy plugins and that our clients are asking for anyways.

This isn’t your typical framework-bashing post because, like most people, I believe in the idea that we shouldn’t have to reinvent the wheel each time a new project comes in. For example, I use Foundation’s grid on many of my projects. It’s flexible, lightweight and prevents me from having to write the same 12-column grid time and again.

But that’s where the reliance on frameworks should start and end. The truth is that many frameworks, including Foundation and Bootstrap, are way bigger than anything the average website needs. Yes, they are pretty lightweight considering all the features they boast but, in a world where every downloaded byte and every call to the server counts, why should we serve more than the user needs?

So while other posts debate which framework is better or why no one should ever use frameworks ever, I’m going to share the two ways I use them and hope it helps others use them both more often and less often.

Wireframing with Frameworks

I use frameworks to wireframe my web projects. I used OmniGraffle until I realized how much clients love being able to view rough sketches of their websites and apps online and being able to interact with them.

Plus, wireframing directly in the browser allows me to lay the foundation for my HTML, speeding up the development process once the wireframes have been approved. Low risk, high return!

For wireframing, it’s totally ok to use the full install of a framework. That way, you have every feature at your disposal and can implement them on a moment’s notice. Need a carousel? Thumbnail image gallery? Offscreen navigation? They’re all in there to play and experiment with as you firm up a solid user experience and information architecture.

Production Sites with Frameworks

Once I have approved wireframes, I know exactly which components I used to build the prototype and which I can ditch. Both Foundation and Bootstrap allow you to download custom versions of their frameworks. If you’re like me and and write your CSS in SASS, then it’s easy to open up Foundation’s foundation.scss file and comment out all of the partials that do not need to be compiled into your project. Just edit that one file and you’re off to the races!

I talk to way too many web designers who rely on the full version of a framework to build their sites. Sure, use the components you need but please remove the rest. The World Wide Web will thank you. Or at least smile upon you. Or nothing at all. Whatever, just do it.

As I previously mentioned, I typically just use Foundation’s grid partial in many of my projects. Sure, I could just hand-write my own grid, but why do it when I’m already comfortable with it? Plus, how different is it to write my own and repurpose that one for every new project?

I certainly wouldn’t be opposed to importing other partials if I felt it was necessary in the project. In some cases, using more framework components is more efficient than writing your own. Specifically, I’m thinking of low-budget projects or ones with a quick turnaround. I’m not saying you get what you pay for, but sometimes the reality of a situation determines what web designers and developers are able to accomplish.

The bottom line: use only the components you need and avoid making the final product look like a Foundation or Bootstrap clone. If your client wanted her site to look just like every one else’s, she would have purchased a $40 WordPress theme or signed up for Wix.

Wrapping Up

I hate the black and white, all-or-nothing arguments over whether frameworks are a good or bad thing in web development. I think there is a lot of gray and it just depends on what the framework is being used for.

However, I believe there are best practices we ought to consider when using them rather than blindly building sites with them. Prototype liberally and deploy conservatively. It can get more nuanced than that, but it captures my general philosophy.