The Blueprint Framework – Tutorials, How-to Guides and Tools

CSS frameworks are a Gods send. They speed up development, ensure usability, meet all W3C standards, compatabile across most browsers and a hell of a lot more. Sounds marvelous doesn’t it. Why doesn’t everybody use them? Well, for the novice developer, frameworks, may be a little bit tricky to get there head around? That is were this article comes in, to hopefully give everybody a better understanding of what a framework is and how to use it effectively.
We are going to focus on how to use the Blueprint Framework, a framework that is a little bit more mainstream and mature than the rest (I am not saying better). We have getting started guides, advanced tutorials, plugins, tools and apps and some insightful further reading articles.
Hopefully this article will give everyone a better insight into CSS frameworks and eventually love them.

The Blueprint CSS Framework Toolbox

Blueprint CSS Framework Toolbox
“Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.”

What does Blueprint offer?

  • A CSS reset that eliminates the discrepancies across browsers.
  • A solid grid that can support the most complex of layouts.
  • Typography based on expert principles that predate the web.
  • Form styles for great looking user interfaces.
  • Print styles for making any webpage ready for paper.
  • Plugins for buttons, tabs and sprites.
  • Tools, editors, and templates for every step in your workflow.

Getting Started Resources
Blueprint: A CSS Framework Homepage »
Download the latest version of the Blueprint Framework »
blueprintcss – Project Hosting on Google Code »
Browser Compatibility List »
Blueprint Wiki »
Blueprint Live Demos »

The Blueprint CSS Framework Files

The framework has a few files you should check out. Every file in the ‘src’ directory contains lots of clarifying comments.
[Source]

Compressed files (these go in the HTML):

  • blueprint/screen.css
  • blueprint/print.css
  • blueprint/ie.css

Source files:

  • blueprint/src/reset.css: This file resets CSS values that browsers tend to set for you.
  • blueprint/src/grid.css: This file sets up the grid (it’s true). It has a lot of classes you apply to divs to set up any sort of column-based grid.
  • blueprint/src/typography.css: This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.
  • blueprint/src/forms.css: Includes some minimal styling of forms.
  • blueprint/src/print.css: This file sets some default print rules, so that printed versions of your site looks better than they usually would. It should be included on every page.
  • blueprint/src/ie.css: Includes every hack for our beloved IE6 and 7.

Scripts:

  • lib/compress.rb: A Ruby script for compressing and customizing your CSS. Set a custom namespace, column count, widths, output paths, multiple projects, and semantic class names. See commenting in compress.rb or run $ruby compress.rb -h for more information.
  • lib/validate.rb: Validates the Blueprint core files with the W3C CSS validator.

Other:

  • blueprint/plugins/: Contains additional functionality in the form of simple plugins for Blueprint. See individual readme files in the directory of each plugin for further instructions.
  • tests/: Contains html files which tests most aspects of Blueprint. Open tests/index.html for further instructions.
Quick-Start Tutorial

This a quick tutorial on how you start using Blueprint from Joshua Clayton.
Blueprint should be put in your site’s CSS directory. After you’ve done that, add these three lines to the <head> of your web pages. Remember to make sure the href path is correct:


	

Now, you are good to go. You are ready to tackle Blueprint.

Further Getting Started Guides

Learn The Basics of the Blueprint Framework » from Divito Design
The Quick Guide To Blueprint »
BlueprintCSS 101 » from Blue Flavour

A Closer Look At the Blueprint CSS Framework

Blueprint CSS Framework ToolboxBlueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and you'll take a look at a live demo application that uses Blueprint to give you a better insight into how the framework actually works.

Advanced Blueprint Tutorials
Customizing Typography Baselines with Blueprint CSS

BluePrint’s typography.css file sets up some very nice typography styles that create a beautiful baseline grid. By default, it sets the font-size to 12px and sets up the line-height and baseline of 18px based on that. While this is fine, I often prefer to have a larger font-size than 12px. So how is that calculated?
This small, but useful, tutorial, explains the equation for customizing Blueprints typography baselines.

Blueprint CSS + jQuery

Blueprint CSS Framework ToolboxOne of the neat features of blueprint is a compressor script that not only renders all the various CSS bits that you want according to the given column numbers and sizes for each project into one neat (and compact) CSS file, but it also lets you define semantic classes and ids. And on top of that, the compressor script will also generate a PNG image that conforms to the column size and padding you've selected.
What if you wanted a less obtrusive way of switching the grid on and off? In this tutorial, with little help from jQuery, you will learn how to generate a toggle switch for each page.

Prototype a Magazine-Style Home Page Template with the Blueprint CSS

Blueprint CSS Framework ToolboxThis tutorial focuses on the process of applying a CSS grid (Bliueprint)and designing a prototype of a home page template. The layout design, in this tut, is based on the popular layout seen on many WordPress Magazine themes.
A typical design process for web pages is to start with a sketch on paper, followed by a graphic mockup in Photoshop or Fireworks, etc. Drop in all the design elements, positioned approximately where you want them. Later, in the CSS grid-based design phase, you'll determine exact measurements.)
View the Demo

Web Development with The Gimp and Blueprint CSS

Blueprint CSS Framework ToolboxThe GIMP is a popular freeand open source image editing program and Blueprint CSS is a CSS framework, whichmakes web layouts easy and chooses sensible style details on your web page. It is compatible with almsost all moder browsers and makes designing a website easy and simple.
In this three part tutorial you will learn the process of setting up the files and folders and creating the image in the Gimp, the second part will contain how to slice up the image and save it, and the third part shows you how to write the code and finish up.

Using The WordPress Sandbox and The Blueprint CSS Framework

Blueprint CSS Framework ToolboxStraight out of the box, the WordPress Sandbox theme is an exercise in styling simplicity, lacking any graphics , boring white on black text, the theme is just waiting for a CSS wizard to craft a masterpiece. Introduce the Blueprint framework into the mix and you have a base with endless possibilties.
This tutorial shows you how to successfully merge the WP Sandbox with the Blueprint framework and simplify your work process.

Blueprint Plugins
Montoya's Blueprint- Plugin – Tabs

This plugin adds a simple and flexible set of horizontal tabs to Blueprint, by simply uploading the screen.css file to a new directory on your server, including the plugin file in the <head/> of your webpage and then add the class "tabs" to your list. Simple.

Liquid Blueprint

By now, you will know that Blueprint has a fixed layout, with this plugin, you can change that into a fluid layout that will nicely fit with any browser window size.
View fixed layout »
View stretched fluid layout »
View the CSS »

Silkset Plugin

Silk Set is a set of icons perfectly integrated with the CSS framework BluePrint. This plugin includes various stylesheets, and it is thought to increase performances and reduce development time.

Blueprint Tools and Apps
Blueprint CSS Background Grid Bookmarklet

Blueprint CSS Framework ToolboxWhen viewing your web site that has been designed with a grid stystem, an easy way to toggle the positioning grid on and off is to use this bookmarklet, it takes away the unnecssary step of having to change the site's HTML templates.
Get the bookmarklet here: Blueprint CSS Background Grid Bookmarklet »

Blueprint Grid CSS Generator

Blueprint CSS Framework Toolbox
This tool will help you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator gives you a lot more flexibility when you are working with the Blueprint framework.

BlueCalc – A Grid Calculator for Blueprint.css

Blueprint CSS Framework Toolbox
This tool helps you to calculate an individual grid layout for your Blueprint-based web site or web application. Being a static grid framework you usually start with defining the total width of your grid and then seperate your workspace into columns. By default Blueprint comes with a 950px grid, which is devided into 24 columns. However, often this configuration is not sufficient to create the kind of layout you have in mind.

Construct Your CSS – Based on Blueprint & jQuery

Blueprint CSS Framework Toolbox
Construct is a visual layout editor based on Blueprint & jQuery, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

Blueprint's Compress.rb: A Walkthrough

Blueprint CSS Framework ToolboxThe purpose of refactoring Blueprint’s compress.rb and other scripts was to make it much more extensible and useful for developers working on multiple projects. Developers using Blueprint on one or two single sites don’t care that the full Blueprint distribution is packaged with the site. However, developers working on multiple sites from a single computer are often left with the hassle of keeping all these copies up-to-date, with extra custom files floating around and very much a large mess.
The goal of rewriting the compression script was to allow for extreme customization of the output Blueprint CSS as well as ease of keeping projects up-to-date with the newest Blueprint source without much hassle.

Plumb – Web Layout Composition Tool

Blueprint CSS Framework Toolbox
Plumb is a clever a web layout composition tool for Blueprint framework. All you have to do is draw some 'stuff' on the pages stage and it will generate the HTML for you. Brilliant!

Blueprint CSS Grid Tool for Adobe Air

Blueprint CSS Framework ToolboxBlueprint comes with a background grid image, but it only works as a background, and it is not that useful when you are working with colors and final tweaks. This Adobe AIR app gets around this by showing a floating grid, sized at 18px and with Blueprint-sized columns.
It is semi-transparent, draggable and resizable. So you just start it up and align things as you please. It floats to the front, so you can even edit behind it while it is running.

Boks – A Visual Grid Editor for Adobe Air

Blueprint CSS Framework ToolboxBoks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS's framework. It's been designed for those who think the Grid System is good but never really took the time to give it love.
It handles grid configuration, baseline rhythm pimpin', CSS (with or without compression) and grid.png export, HTML layout and much more.

Photoshop Template for Blueprint CSS Comps

Blueprint CSS Framework Toolbox
The purpose of this template is to allow you to create visual design comps that are designed to be implemented using a CSS layout framework. The Photoshop document features a 24 column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint's grid of 24 columns of 30px, 10px wide gutters, and a horizontal width of 950px. Horizontal guides are provided at 18px or 1.5 em line-height for 12 px base font.

Blueprint Cheat Sheet

Blueprint CSS Framework Toolbox
Of course, every framework or tool needs a good and indepth cheat sheet. Download it here in PDF format: Blueprint Cheat Sheet V.0.8

Further Reading

I Can Design Websites Faster Than You Can: Rapid Stylesheets with Blueprint CSS by Cherrysave
The myth of content and presentation separation by Jeff Croft
The Framework Formally Known as Prints by Khoi Vinh
On Blueprint by George Lesica
Which CSS Grid Framework Should You Use for Web Design? by Raj Dash
Popular CSS Frameworks – Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery by Webdevelopertut
Blueprint. A CSS Framework by Mark Boulton

Author: (582 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments