Practical eCommerce

 

Frameworks For Web Designers

Blueprint CSS helps coordinate design and development

Author: Brian Getting
Publish Date: March 26, 2008
Category: Design & Development
Tags: Blueprint CSS, cascading style sheets

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.

Sponsored links

Buy A Sponsored Link

Add a Bookmark: Add 'Frameworks For Web Designers' to Del.icio.us Digg 'Frameworks For Web Designers' on Digg.com Submit 'Frameworks For Web Designers' to reddit.com Blink 'Frameworks For Web Designers' Add 'Frameworks For Web Designers' to dzone Seed 'Frameworks For Web Designers' on Newsvine Add 'Frameworks For Web Designers' to Furl Add 'Frameworks For Web Designers' to Spurl Add 'Frameworks For Web Designers' on simpy.com Add 'Frameworks For Web Designers' to fark.com BlogMark 'Frameworks For Web Designers' Add 'Frameworks For Web Designers' to Yahoo! myweb2 Add 'Frameworks For Web Designers' to wists.com Stumble It!

1 Comment

Sign-up to receive EcommerceNotes, our acclaimed email newsletter.

View A Sample | Privacy

Inside Practical eCommerce