Blueprint & Drafter JS


Published on

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

Published in: Technology, Education

Blueprint & Drafter JS

  1. 1. Blueprint CSS & Drafter JS
  2. 2. Blueprint CSS Framework to cut down CSS development time
  3. 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. 4. It provides you with... • Easily Customizable Grid • Sensible Typography • CSS Reset • Powerful scripts for customizing your layout
  5. 5. It is not a set of CSS templates. It is much more.
  6. 6. A Nice Looking Page
  7. 7. Why is it so nice ?
  8. 8. Why is it so nice ?
  9. 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. 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. 11. Forms
  12. 12. Notifications
  13. 13. FamFamFam Icons
  14. 14. The Grid 950px wide. 24 columns. spanning 30px. margin of 10px.
  15. 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. 16. CSS Classes .append-x Has padding right of (x*40)px Adds blank space to the right of the element
  17. 17. CSS Classes .preprend-x Has padding left of (x*40)px Adds blank space to the left of the element
  18. 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. 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. 20. CSS Classes .container A DIV inside which everything is put.
  21. 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. 22. Demo
  23. 23. Drafter A JavaScript tool to build CSS layouts quickly.
  24. 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. 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. 26. Demo
  27. 27. Get in touch
  28. 28. Any questions?
  29. 29. Thank You!