Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blueprint css framework

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

  • Login to see the comments

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 />

×