CSS Blueprint

CSS Blueprint is a good reference for any website designer. It has basic information which is easy to follow and have clear instruction on what-to-do. So the difficult part will be easier.

Here are the some of the codes and tricks, I used some

DOCUMENT COLUMNS
Blueprintcss defaults
document’s width to 24
cols, 950px. Use this table
to calculate other widths or
column numbers.
cols-23 910px
cols-22 870px
cols-21 830px
cols-20 790px
cols-19 750px
cols-18 710px
cols-17 670px
cols-16 630px
cols-15 590px
cols-14 550px

GRID CLASSES
container The container that groups all your columns.
column Usewith with span-x to create combinations of columns in the layout.
border Draws a border on the right hand side of a column.
colborder Border with more whitespace, spans one column.
clear Clearing floats without extra markup.
box Creates a padded box inside a column. Use it on column’s childs
last The last column in a row needs this class.
showgrid Displays the grid in the “container” or in any element
hr.space (only for


) Creates an invisible (white) horizontal ruler.

FORMS CLASSES
This classes are defined in
the form.css file. Other form
related tags such as input,
textarea, select etc. are
also redefined in this file
error red frame
notice yellow frame
success green frame
hide display none
highlight bg yellow
large 1.2em lines 2.5em
small .8em lines 1.87em
quiet color #666
removed color #900
p.last margin bottom 0
table.last padding right 0

more codes and trick here at BluePrintCSS.org
Join the forum at for discussion or for any question or leave comment down here, I will try to help too.
Credit to Mappdev

*for Shorthand on CSS, Syam has something that could make you greater in CSS

  1. 2 Responses to “CSS Blueprint”

  2. Tak berapa paham lah..
    Almaklumlah tak power programming nie..

    By zool on Sep 29, 2008

  3. xpe bro….
    aku pun tak paham.
    tapi mende nie bukan programming kut…CSS je…geng2 php… :D

    By mmuurrllyy on Sep 29, 2008

Post a Comment