Reduce Your CSS Development Time with Blueprint
The flexibility of Blueprint is because it is based on the work of some of the heavyweights in CSS; Eric Meyer, Nathan Borror, Jeff Croft and Christian Metts. Launched in 2007, the Blueprint is now at version 0.7.1, offering even more ways to shave time off the development process.
How do you save time? By working on a stable CSS foundation, with a grid to connect each aspect of building your project with these features:
- Customize your layout with power scripts
- Relative font-sizes used throughout
- A typographic baseline with sensible typography: Example
- Extendable plug-ins
- Perfected CSS reset
- Printer friendly style sheet
First Step-Installation Files
Wherever your website CSS files are located is where you should install Blueprint. Following installation, you will need to verify the <href> path to the file and then add these two lines to the <head> of your page:
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Now you are ready to work with Blueprint. Start with reviewing the “src” working files in the directory for more information that help to clarify how Blueprint works. The actual .CSS files for your .HTML files are compressed:
- blueprint/screen.css
- blueprint/print.css
- blueprint/ie.css
The Source Files
The source files handle a variety of tasks from the hacks required for IE6 and IE7 to setting up the grid for your website:
- blueprint/src/grid.css: Used to create the grid to set up any sort of column based layout. It includes a lot of classes you apply to divs.
- blueprint/src/reset.css: Used for resetting the browser’s CSS values.
- blueprint/src/print.css: Include this file with its default print rules on each of your pages and the printed version of your website will look better for it.
- blueprint/src/typography.css: Used to set your default typefaces and includes some neat typography tricks too.
- blueprint/src/forms.css: Used for styling of forms.
- blueprint/src/ie.css: The hacks for IE6 and 7.
The Scripts
- lib/compress.rb: This Ruby script is used to customized and compress your CSS. To get more details there are comments in the file or you can simply run the “$ruby compress.rv-h” script. This script will set multiple projects, column count, widths, output paths and semantic class names and a custom namespace.
- lib/validate.rb: Check your Blueprint core files with the W3C CSS validator.
The Extras:
- blueprint/plugins/: Blueprint’s functionality can be extended by using the plug-ins that come with full instructions in the download.
- tests/: This directory has HTML files and instructions for testing different aspects Blueprint.
Creating Your Project with Blueprint
Reviewing the comments included with the CSS files along with the source code for the example page that is included with the download will give you an overview of how BP is used. The three basic components are each handled by one of Blueprint CSS files.
Your Project Typefaces
- The “typography.css” file is ready to use for a good set of default text styles.
Building a better website has a lot to do with how the typography is handled. One of the cool things in Blueprint’s “typography.css” file is that it sets the line-height or a baseline at 18px. To make your web pages look great, use multiples of 18 to create the height of your text and images. You can see the results of this technique here. - In the “print.css” there are a few options.
You can fill in your domain name, which will cause your relative links to be shown behind the text link in parenthesis when the page is printed. Or you can omit your domain name then only the remote URLs will be enabled.
The Heart of Your Project: Setting Up the Grid
The default setting in “grid.css” gives you a layout 950px wide; 24 columns spanning 30px, with 10px of margin space between columns. When you want to add or remove columns, simply use the compressor in “lib/compress.rb.” You can also accomplish this by using the formula to determine the new grid width:
Total width = (columns * 40) – 10
To get your project started envelope your grid with a <container>:
<div class="container">
<p>Blueprint was used to create my site!</p>
</div>
Next, you will use <div> with one of the <span> classes to set the number of columns the element should include, for instance:
<div class="container">
<div class="span-20">
Header
</div>
<div class="span-3">
Left sidebar
</div>
<div class="span-20">
Main content
</div>
<div class="span-3 last">
Right sidebar
</div>
</div>
Using the Blueprint grid, you must use the <last> class for every final element inside the container or column.
It is also easy to “nest” columns in whatever way you please, for instance:
<div class="container">
<div class="span-20">
Header
</div>
<div class="span-3">
Left sidebar
</div>
<div class="span-14">
<div class="span-6">
Box1
</div>
<div class="span-6">
Box2
</div>
<div class="span-6 last">
Box3
</div>
<div class="span-20 last">
Main content
</div>
</div>
<div class="span-3 last">
Right sidebar
</div>
<div class="span-20">
Footer
</div>
</div>
The most important part of making this work well is to remember the <last> class. As you can see working with a grid and a little bit of math can make your next project move along a lot faster. Once you get the hang of the basics, you will find that you are able to do a whole lot more using “grid.css” for instance you can:
- pull or push images across columns
- use multiple containers to create a unique layout
- pre-pend and append empty columns
- add borders between columns
The comments in the “grid.css” file and the example pages have more information. And you can also check out the Blueprint CSS Grid Generator here.