7 Dec 2010<br />Blueprint CSS Framework<br />by Ashley Hau<br />Engaging Your Customers Online <br />
What are <br />CSS Frameworks?<br />
Tool to Aid Web Development<br />CSS frameworks are meant to <br />speed up and simplify the development of complex websit...
Reusable Code<br />These frameworks contain predefined libraries of code that contain a ton of options for you to use in y...
Example of Convenience<br />For instance, grid-based frameworks usually contain several classes that are a set number of p...
Popular CSS Frameworks<br /><ul><li>  Blueprint CSS (http://www.blueprintcss.org)
Elements (http://elements.projectdesigns.org)
  YUI 2: Grids CSS (http://developer.yahoo.com/yui/grids)
  Logic CSS (http://code.google.com/p/logicss)
  Elastic CSS (http://elasticss.com)</li></li></ul><li>Introducing Our Favorite Framework<br />Blueprint cuts down develop...
sensible typography
useful plugins (including stylesheet for printing)</li></li></ul><li>What we like about the Blueprint CSS Framework<br /><...
  Speedy development
  Consistency
Normalize code/class base
Upcoming SlideShare
Loading in …5
×

Blueprint css framework

2,306 views
2,216 views

Published on

Find out how to reduce your web design and development time by using the Blueprint CSS Framework

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,306
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Hi, I’m Ashley from Techsailor Group. Today, we’ll be talking about the Blueprint CSS Framework as a design time-saver.
  • Why should you bother with Slideshare
  • Thank you. We hope you find this helpful. If you have any more questions, do not hesitate to contact us!
  • Blueprint css framework

    1. 1. 7 Dec 2010<br />Blueprint CSS Framework<br />by Ashley Hau<br />Engaging Your Customers Online <br />
    2. 2. What are <br />CSS Frameworks?<br />
    3. 3. Tool to Aid Web Development<br />CSS frameworks are meant to <br />speed up and simplify the development of complex websites. <br />
    4. 4. Reusable Code<br />These frameworks contain predefined libraries of code that contain a ton of options for you to use in your HTML. <br />
    5. 5. Example of Convenience<br />For instance, grid-based frameworks usually contain several classes that are a set number of pixels wide to make it easy to create multi-columned layouts.<br />
    6. 6. Popular CSS Frameworks<br /><ul><li> Blueprint CSS (http://www.blueprintcss.org)
    7. 7. Elements (http://elements.projectdesigns.org)
    8. 8. YUI 2: Grids CSS (http://developer.yahoo.com/yui/grids)
    9. 9. Logic CSS (http://code.google.com/p/logicss)
    10. 10. Elastic CSS (http://elasticss.com)</li></li></ul><li>Introducing Our Favorite Framework<br />Blueprint cuts down development time with:<br /><ul><li>an easy-to-use grid system
    11. 11. sensible typography
    12. 12. useful plugins (including stylesheet for printing)</li></li></ul><li>What we like about the Blueprint CSS Framework<br /><ul><li> Optimal browser-compatibility
    13. 13. Speedy development
    14. 14. Consistency
    15. 15. Normalize code/class base
    16. 16. Clean, well-structured and complete code</li></li></ul><li>What we dislike about the Blueprint CSS Framework<br />• Bloated source code<br />• Lack of freedom<br />• Can not be framed semantically<br />• Ignoring the uniqueness of the projects<br />
    17. 17. Sites Using Blueprint <br />www.mint.com<br />www.stay.com<br />
    18. 18. Sites Using Blueprint <br />http://www.cca.qc.ca/en<br />http://www.webvanta.com/<br />
    19. 19. Blueprint Generator<br />The generator tool helps in generating more flexible versions of Blueprint. You can generate 8,10, 16 or 24 columns based on your design.<br />Generator: http://bgg.kematzy.com<br />
    20. 20. Blueprint Cheatsheet<br />Blueprint cheat sheet gives you the reference with all the important class names that you can print out and keep on your desk.<br />Download: http://blueprintcss.org/media/BlueprintV0.8byGJMS.pdf<br />
    21. 21. Video Tutorials: CSS Layout with Blueprint<br />http://www.youtube.com/watch?v=KHLrEF9tHjw<br />http://www.youtube.com/watch?v=54II5G4rxAo<br />
    22. 22. Thank you<br />Email : info@techsailor.com <br />Website : http://www.techsailor.com<br />China<br />中国广东省广州市天河区黄埔大道中207号海景花园C栋1801邮编:510665 电话 : +86 020 8567 0704传真 : +86 020 8567 0704<br />Malaysia<br />Lot 2-1A, Support Services, Technology Park Malaysia, LebuhrayaPuchong-Sg. Besi, Bukit Jalil, 57000 Kuala Lumpur, Malaysia. <br />Tel: +60 38994 1750 / 1751<br />Fax: +60 32297 5390<br />Singapore<br />156 Macpherson Road, <br />#08-01, Singapore 348528<br />Tel: +65 6748 8522<br />Fax: +65 6836 4963<br />

    ×