Blueprint - A CSS framework: Installation and Quick notes

BlueprintCSS is a CSS framework, designed to reduce your development time.
It gives the developer ,a solid foundation to build his own project on top of, with an easy to use grid structure , sensible & typical typography, very useful plugins, and even a style sheet for printing.

Advantages of BlueprintCSS are

* Tutorials available in multiple languages
* Plenty of articles from around the web
* Resources and Tools for Blueprint development
* Plugins for making the grid fluid or/and add sprites
* Frameworks and Themes to get a quick start with Drupal, Wordpress, Joomla etc.
* Availability of Forks,Mods and Alternatives if Blueprint is not quite your thing
* Browser Compatibility

The official website for Blueprint can be found at BlueprintCSS.org
Here’s a quick tutorial on how you start using BlueprintCSS.

Installation Steps

I BlueprintCSS should be put in your site’s CSS directory. After that, add these lines to the of your web pages.




BlueprintCSS is now ready for consumption.

Files in BlueprintCSS

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

Compressed files (which goes in the HTML):

* blueprint/screen.css
* blueprint/print.css
* blueprint/ie.css

Source files:

* blueprint/src/reset.css ->This file is used to reset CSS values that browsers tend to set for you.

* blueprint/src/grid.css->This file is used to set up the grid .

* blueprint/src/typography.css ->This file is used to set some default typography.

* blueprint/src/forms.css ->This file is used to include some minimal styling of forms.

* blueprint/src/print.css ->This file is used to set 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 ->This file is used for includeing every hack for IE6 and 7.

Scripts:

* lib/compress.rb ->This is a Ruby script for compressing and customizing your CSS. Setting a custom namespace, column count, widths, output paths, multiple projects, and semantic class names.

* lib/validate.rb -> This is used to Validate the Blueprint core files with the W3C CSS validator.

Other:

* blueprint/plugins/ -> Which contains additional functionality in the form of simple plug-ins for Blueprint.

* tests/ -> Which contains html files which tests most aspects of Blueprint.

How to use Blueprint

The best way to see how BluePrint is used, is to go through the commented CSS files, or the source code for the example page, which is bundled with the download.

Typography

Typography.css does not need any customization: just drop it in, and it’ll give you some nice default text styles.

The typography.css file also sets a baseline of 18px. This means that every element, from line-heights to images has to have a height that is a multiple of 18. This may seem a bit tedious, but the results tend to look great.

Print.css has some options where you can fill in your domain name, so that relative links are shown in parenthesis behind the text link on print. Without filling in your domain name, only remote URLs work properly.

The grid

By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns.

If you need fewer or more columns, use the compressor found in lib/compress.rb This file has many options, which are explained in the comments in that file

If you prefer to do this manually, use the following formula to find the new total width:

Total width = (columns * 40) - 10

The first thing you do, is surround your grid with a container:

Here’s my site!

You then use div’s with one of the .span-x classes to set how many columns the elements should span. Here is an example

Header

Left sidebar

Main content

Right sidebar

You can also nest columns any way you want. Check out this file and this file for some more advanced examples of using grid.css. Here’s one example of nesting columns:

Header

Left sidebar

Box1

Box2

Box3

Main content

Right sidebar

Footer

Again, this is pretty simple when you get the hang of it. Just remember:

* Use the “last” class in your last column
* Make sure the columns in a row add up to 24 and you should be fine.

Grid.css can do a lot more than this, however. You can prepend and append empty columns, pull or push images across columns, add borders between columns, and use multiple containers to create almost any layout. Check out the comments in grid.css and the example pages for more information.