Blueprint & Drafter JS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    7 Favorites

    Blueprint & Drafter JS - Presentation 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=\"container\"> <div class=\"span-24\"> </div> <hr class=\"space\" /> <div class=\"span-16 colborder\"> <div class=\"span-5 append-1 prepend-1 last\"> </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!

    + Prateek SaxenaPrateek Saxena, 2 years ago

    custom

    1527 views, 7 favs, 0 embeds more stats

    A presentation on how to get started on Blueprint C more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1527
      • 1527 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 7
    • Downloads 51
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories