Blueprint is one of the css grid system .It is similar to twiter bootstrap which is known for its popularity.Blueprint gives a good start for our project by makeing padding,margin to 0.Main advantage of using these kinds of frameworks is we dont need to bother about the cross browser issues.Even for IE it works fine.This tutorial is for the persons who think that they are strong in php , rails , j2ee but struggling in front end alignments.Since every thing is predefined in the framework you need to just add the class to your project.For using blueprint framework we need to add 3 css files.
<link rel="stylesheet " href=" blueprint/screen.css " type=" text/css " media=" screen, projection " /> <link rel="stylesheet " href=" blueprint/print.css" type=" text/css " media=" print " /> <!--[if lt IE 8]> <link rel="stylesheet " href=" blueprint/ie.css" type=" text/css " media=" screen, projection " /> <![endif]-->
Once you have added you are ready to use this framework.
GRID SYSTEM:
Blueprint uses a grid system where there are 24 colomns .Each colomn is 30px width and 10px is for right margin.We could divide this 24 colomns in a row as we wish for our layout.
.span-x - where x is from 1 to 24. eg span-4 [160px(4*40)]. Using the last class will make sure it wont have a extra margin space to the right as that is the last element in that row.
Append and Prepend Class:
.append-x, will add a empty column to right.
.prepend-x, will add a empty column to left.
.prepend-top ,will add a vertical space at top.
append-bottom,will add a vertical space at bottom.
.push-x, It push the element to the next right column
.pull-x, It pulls the element to the previous left column
FORMS:
.alert- red frame box
.error-red frame box
.info -blue frame box
.notice -yellow frame box
.success -green frame box
form.inline-line-height 3
input.text -width 300px and padding 5px
input.title-font-size 1.5em
label- bold
select-border 1px
textarea- width 390px height 250px
For more information about blueprint css refer LINK.I have designed a basic layout for a webpage in 10 minutes using the blueprint css framework. Check out the demo.
Always have the list of classes available before you start with your project.Because only when you know the classes you could use it when you need it.This cheetsheet should be useful – LINK.
