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

1,956
views

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

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,956
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.
  • 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 prtksxna@gmail.com prateek.saxena@yahoo.com http://twitter.com/prtksxna/
  • 28. Any questions?
  • 29. Thank You!