A presentation on how to get started on Blueprint CSS, and Drafter JS

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!