CSS Frameworks

A framework is a “set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused” (Frameworks for Designers, by Jeff Croft, A List Apart, June 12, 2007). Basically a CSS framework, such as Olav Bjorkoy’s Blueprint, is a CSS framework that is designed to cut down on your CSS development time. It provides a CSS foundation to build your project on, with an easy to use grid, with typography and a print stylesheet. I have been reading about frameworks of various funtions including ajax, JavaScript, HTML, and Web 2.0. The concept smacks of templates for hire, which is having someone else do the hard work of designing a stylesheet(s) and you just plug it in and write the HTML structure and save a lot of time in the process.

I think using a “hired hand” to create your CSS is not a good idea for anyone learning the deeper aspects of coding with CSS and XHTML. You simply have to experience the process to become proficient at it. But I like the idea of developing your own framework that includes a lot of CSS features you use over an over. This would be an obvious advantage to anyone working on a large group of projects where there is a lot of similar code. Programmers have used libraries forever to keep various coding components available so they don’t have to repeat themselves over and over. I assume this is the key to object oriented programming also.

So I encourage students wishing to become competent with web design, to study the frameworks out there and learn what it means to design and create your own. In the long run I think it could provide a good learning tool, and give you ideas about how you would want to create your own and eventually, become much more efficient at building creative sites. Below are some resources to get you started learning about these tools and processes of designers.

I would enjoy hearing your responses to these articles and the potential of “frameworks”.

“Design with Web 2.0 frameworks”, .net/July 2007, p. 47-51.

Launching the Web 2.0 framework

A CSS Framework, by Mike Stenhouse

Blueprint Tutorial, Olave Bjorkoy

YUI Grids CSS, Yahoo UI library: Grids CSS


3 Comments (+add yours?)

  1. Darren
    Aug 08, 2007 @ 15:09:47

    You make some very good points. I recently used Blueprint and I can see the attraction. I find frameworks for other languages such as php (codeigniter or cake) or ruby (rails) a great help but when it comes to something simply for design I believe the best way is simply by hand.

    I like to know everything that goes into a design is my own work. I want to thank you for the great article!


  2. Javier Martinez
    Oct 01, 2007 @ 14:16:04

    Hello Mr. Batchelder,

    I don’ know if you remember me but I see that you are doing well. I wanted to comment about these Frameworks. I will test one of these frameworks, but you know! I don’t have a problem with laying out the pages, Don’t you think that people will get use to using the automation instead of hand code. it doesn’t take much to code once you know the basics of css. I hand code most of my work and if I want to speed up my work I just refer to my library of css styles and it is just a matter of copy and paste.

    I like the fact that you are opening more to these ideas of using automation!!! hehehe! good job!!!!


  3. webstuff2
    Oct 01, 2007 @ 14:35:14

    Hi Javier,

    Yes, I remember you and thanks for your comment. As you know I personally hand code all of my sites and I teach only hand coding skills as I feel strongly that the learning process requires a focus on learning all aspects of the domain (HTML/CSS) and using WYSIWYG type products simply confuses the issue. I am always open to new ways of being efficient in coding however, and I see Frameworks as a way that each designer can create a set of CSS rules for instance, that they can apply to more than one job in some situations. Using someone elses framework, such as the ones mentioned in this post, may help you learn some new ways of coding. Also, if you have a large site to build, this concept could be used to make the work more effective and a team to be able to stay consistent. We often need to create a website style concept for larger sites, and a framework could be a part of that overall design implementation.

    So I hope you will use frameworks to help you further your craft, and keep up the hand coding skills!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: