Frameworks For Web Designers

I’ve written previously about frameworks and how they help developers build web applications. For the most part, my praise of frameworks has been directed at those of us who develop web applications, such as coding up the Ruby, Perl, PHP or .Net scripts that make applications work. However, frameworks can also be used to help teams work together, as in the case of a graphic designer and a web application developer. I can say from experience that it is often difficult to get creative people from different disciplines to work effectively together. Enter the Blueprint CSS framework.

What is Blueprint CSS?

Blueprint CSS is a framework for visually styling web pages with Cascading Style Sheets. Rather than writing your own CSS for every website that you work on, Blueprint provides a foundation of CSS styles to work with and build upon. As CSS gets more advanced, and the shortcomings of web design are overcome, a framework like this can prevent problems, as well as give developers the tools to bring the designer’s vision to reality. Let’s take a look at some of the features of the Blueprint CSS framework to get an idea of how it can help.

To start, all browsers have default styles set for particular HTML elements. Consider the margins that appear by default between paragraphs, and you have an idea of what are called “default CSS styles” By clearing these defaults, Blueprint provides a “clean slate” to start working with. From there, Blueprint sets some basic typography rules, which is something that most websites ignore completely. For example, Blueprint sets the line height at 1.5 times the font height, which is a basic print rule for readability.

Layout Grid Helps Developers and Designers

Second, Blueprint provides a layout grid for creating CSS layouts. While this seems basic, the customizable grid allows a developer (or designer) to generate a grid that is tailored to his vision. The designer can then use that grid as a layout guide, and by sharing the grid CSS both the designer and developer can be on the same page. Considering that small tweaks to get a layout right can eat away a lot of valuable time, it’s refreshing that Blueprint provides a resource that both designers and developers can benefit from. Blueprint CSS is available for free.