Blueprint & Drafter JS
31
Blueprint CSS & Drafter JS
-
Upload
prateek-saxena -
Category
Technology
-
view
124 -
download
0
description
A presentation on how to get started on Blueprint CSS, and Drafter JS
Transcript of Blueprint & Drafter JS
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 [email protected]@yahoo.comhttp://twitter.com/prtksxna/
Any questions?
Thank You!
