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.

CSS Frameworks

1,997 views

Published on

An introduction to CSS Frameworks presented by Mario Hernandez for Socal Code Camp 2012

Published in: Design
  • Login to see the comments

  • Be the first to like this

CSS Frameworks

  1. 1. CSS Frameworks An IntroductionMARIO HERNANDEZDesignsDrive.com 2012 SoCal CodeCampby Mario Hernandez@DesignsDrive San Diego .Net User Group - June 19, 2012
  2. 2. Mario Hernandez Web Designer & Front-end Developer Web: http://designsdrive.com Email: designsdrive@gmail.com Twitter: @designsdrive
  3. 3. Agenda • Choosing the right framework • Working with Grid Systems • Rapid PrototypingMARIO HERNANDEZDesignsDrive.com 2012 SoCal CodeCamp@DesignsDrive
  4. 4. Choosing the right CSS FrameworkMARIO HERNANDEZDesignsDrive.com 2012 SoCal CodeCamp@DesignsDrive
  5. 5. Choices, Choices, Choices BlueBird Golden Grid System 960 Grid System Elastic CSS Twitter Bootstrap YAML Framework BlueTrip Foundation Zurb BoilerPlate SEN CSS LESS Fluid 960 Grid SystemSource: DevSnippets.com
  6. 6. What to look for?• Project requirements determine the framework
  7. 7. What to look for?• Project requirements determine the framework• Fluid Grid System
  8. 8. What to look for?• Project requirements determine the framework• Fluid Grid System• Responsiveness a plus
  9. 9. What to look for?• Project requirements determine the framework• Fluid Grid System• Responsiveness a plus• Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-defined styles for typography, tables,
  10. 10. What to look for?• Project requirements determine the framework• Fluid Grid System• Responsiveness a plus• Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-defined styles for typography, tables,• Great documentation
  11. 11. What to look for?• Project requirements determine the framework• Fluid Grid System• Responsiveness a plus• Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-defined styles for typography, tables,• Great documentation• Maintained regularly by the community or creator
  12. 12. What to look for?• Project requirements determine the framework• Fluid Grid System• Responsiveness a plus• Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-defined styles for typography, tables,• Great documentation• Maintained regularly by the community or creator• Open Source (free)
  13. 13. Working with Grid Systems
  14. 14. How do grid systems work? • Grid systems are built using rows & columns • A fluid grid uses percentages instead of pixelsMARIO HERNANDEZDesignsDrive.com 2012 SoCal CodeCamp@DesignsDrive
  15. 15. How do grid systems work?Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
  16. 16. The concept of grids header sidebar • Page regions (header, sidebar, content, etc.,) are defined by column width • As in: “The header is twelve columns wide”Example based on 960.gs (12 columns)
  17. 17. Gutters (margins) • Margins are used to create gutters between columns • These margins provide gutters between page regionsExample based on 960.gs (12 columns)
  18. 18. The Basics<div class="row"></div>
  19. 19. The Basics<div class="row"> 12 columns</div>
  20. 20. The Basics<div class="row"> <div class="eight columns"> Eight columns </div> <div class="four columns"> Four columns! ! ! ! ! </div></div><!-- /end of row -->
  21. 21. OffsetsExample based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
  22. 22. Source OrderingExample based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
  23. 23. Rapid prototyping
  24. 24. Contact me• Web: http://designsdrive.com• Email: designsdrive@gmail.com• Twitter: @designsdrive

×