Blueprint CSS is a CSS framework that provides an easy grid system, typography styles, and form styles to reduce CSS development time. It includes a 950px grid with 24 columns, CSS classes for spanning and positioning grid elements, and reset styles. Drafter JS is a tool that can be used to visually create page layouts and add basic styling without HTML/CSS knowledge, reducing development time. It generates the HTML and CSS. The document provides information on these tools and invites the reader to contact the author with any questions.

1. Blueprint CSS &
Drafter JS

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

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

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

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

6. A Nice Looking Page

7. Why is it so nice ?

8. Why is it so nice ?

9. 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

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

11. Forms

12. Notifications

13. FamFamFam Icons

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

16. 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

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

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

19. 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

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

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

23. <div class=quot;containerquot;>
<div class=quot;span-24quot;>
</div>
<hr class=quot;spacequot; />
<div class=quot;span-16 colborderquot;> <div class=quot;span-5 append-1
prepend-1 lastquot;>
</div> </div>
</div>

24. Demo

25. Drafter
A JavaScript tool to build CSS layouts quickly.

26. 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.

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

28. Demo

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

30. Any questions?

31. Thank You!