Blueprint CSS - A CSS Framework

29/12/2008 10:05

Want to reduce your CSS development time?

There are different CSS Frameworks out there but Enonic consultants have used Blueprint with great success in different projects. It is easy to use and works like a charm in all major browsers.

What can Blueprint do for you?

When you start up a new project and are planning a functional new xhtml markup, use the blueprint css stylesheets that you find in the download package. The first one is a reset.css, that resets all html-tags to "zero" and then carefully rebuilds it. The beauty of it is that the new css works in all browsers.

They have also added classes for typography that uses scalable fonts. This is smart and makes it easy to make "increase/decrease" font-size buttons in the xhtml framework. You will also find classes for styling form-elements. Not always exactly what you want, but very easy to edit and a good start. It saves time and that's the important thing.

There is also a seperate print.css for media=print. Works very well to.

Are you used til work with grid-design?

You can find a grid-generator and add classes to your css framework. This is really smart and makes floated columns an easy task, or at least easier :)

If you, or your designer, is not into grid-based design, you should google the subject and dive into it. You should also take a look at some 960px grid based designs. I have toyed around with it for a while and it is really powerful and easy.

Measure your implementation

Go back to your last project, look at the hours spent on css/markup. Now, use these methods in your next two projects and look at the numbers again. When you estimate the implementation, remember to slice up your actions in a really detailed manner. Then you will see the work saved.

Feedback?

Any comment or experience you want to share with us? I would really like to know.