Your SlideShare is downloading. ×
Blueprint & Drafter JS
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Blueprint & Drafter JS


Published on

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

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

Published in: Technology, Education

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Blueprint CSS & Drafter JS
  • 2. Blueprint CSS Framework to cut down CSS development time
  • 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.
  • 15. 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
  • 16. CSS Classes .append-x Has padding right of (x*40)px Adds blank space to the right of the element
  • 17. CSS Classes .preprend-x Has padding left of (x*40)px Adds blank space to the left of the element
  • 18. 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
  • 19. CSS Classes .pull-x Has margin left of -(x*40)px Floated left with relative positioning Pulls the entire element towards the left
  • 20. CSS Classes .container A DIV inside which everything is put.
  • 21. <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>
  • 22. Demo
  • 23. Drafter A JavaScript tool to build CSS layouts quickly.
  • 24. 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.
  • 25. Why use it ? • Reduces development time. • Allows you to visualize the design quickly on the web. • Requires little or no knowledge of HTML/ CSS.
  • 26. Demo
  • 27. Get in touch
  • 28. Any questions?
  • 29. Thank You!