Blueprint CSS &
Drafter JS

Blueprint
CSS Framework to cut down CSS development time
http://code.google.com/p/blueprintcss/

Blueprint is a...
• Foundation to build on.
• CSS framework that provides an easy way
to make grids, has good typography and
form styles

It provides you with...
• Easily Customizable Grid
• Sensible Typography
• CSS Reset
• Powerful scripts for customizing your
layout

It is not a set of CSS
templates. It is much more.

A Nice Looking Page

Why is it so nice ?

Why is it so nice ?

Typography
• Sets a baseline (line-height) of 18px.
• This means that every element, from line-
heights to images has to have a height that
is a multiple of 18

Forms
• Makes forms look good!
• Predefined CSS for notifications like error,
warning, flash.
• Bundled with a few FamFamFam icons to
complete your form

Forms

Notifications

FamFamFam Icons

The Grid
950px wide. 24 columns.
spanning 30px. margin of 10px.

CSS Classes
.span-x
Has a width of (x*30 + ((x-1)*10))px
Margin right of 10px
Floating left
Decides the width of the element

CSS Classes
.append-x
Has padding right of (x*40)px
Adds blank space to the right of the element

CSS Classes
.preprend-x
Has padding left of (x*40)px
Adds blank space to the left of the element

CSS Classes
.push-x
Has margin left and right of (x*40)px
Floated right with relative positioning
Pushes the entire element towards the right

CSS Classes
.pull-x
Has margin left of -(x*40)px
Floated left with relative positioning
Pulls the entire element towards the left

CSS Classes
.container
A DIV inside which everything is put.

<div class=\"container\">
<div class=\"span-24\">
</div>
<hr class=\"space\" />
<div class=\"span-16 colborder\"> <div class=\"span-5 append-1
prepend-1 last\">
</div> </div>
</div>

Demo

Drafter
A JavaScript tool to build CSS layouts quickly.

What is it ?
• An easy to use JS tool that can be used to
create layouts and add basic content and
styling to it.
• Can be used both by developers and
designers.
• Easy to learn, not too many buttons.
• Generates HTML in the end.

Why use it ?
• Reduces development time.
• Allows you to visualize the design quickly
on the web.
• Requires little or no knowledge of HTML/
CSS.

Demo

Get in touch
prtksxna@gmail.com
prateek.saxena@yahoo.com
http://twitter.com/prtksxna/

Any questions?

Thank You!