Blueprint CSS &Drafter JS

BlueprintCSS 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 Grid950px wide. 24 columns.

spanning 30px. margin of 10px.

CSS Classes

.span-xHas a width of (x*30 + ((x-1)*10))px

Margin right of 10px

Floating left

Decides the width of the element

CSS Classes

.append-xHas padding right of (x*40)px

Adds blank space to the right of the element

CSS Classes

.preprend-xHas padding left of (x*40)px

Adds blank space to the left of the element

CSS Classes

.push-xHas margin left and right of (x*40)px

Floated right with relative positioning

Pushes the entire element towards the right

CSS Classes

.pull-xHas margin left of -(x*40)px

Floated left with relative positioning

Pulls the entire element towards the left

CSS Classes

.containerA DIV inside which everything is put.

<div class="container">

</div>

<div class="span-24">

</div>

<div class="span-16 colborder"> <div class="span-5 append-1 prepend-1 last">

</div></div>

<hr class="space" />

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 touchprtksxna@gmail.comprateek.saxena@yahoo.comhttp://twitter.com/prtksxna/

Any questions?

Thank You!