Blueprint css – A framework for web designers

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. It aims to cut down on your CSS development time.

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.

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.

Features:

• An easily customizable grid
• Sensible typography
• Relative font-sizes everywhere
• A typographic baseline
• An extendable plugin system
• Perfected CSS reset
• A stylesheet for printing
• Powerful scripts for customizing your layout
• No bloat of any kind

Blueprint CSS is available for free at http://code.google.com/p/blueprintcss/.