Published on

short presentation for bootstrap

Published in: Technology


  1. 1. BootstrapSleek, intuitive, and powerful Front-end Framework CJ E&M Games Ilhwan Seo
  2. 2. Table of contents Responsive Web Framework Bootstrap Demo
  3. 3. Responsive Web Any devices and browsers Reading Optimal View Navigation
  4. 4. Framework Framework HTML5 CSS3 Javascript
  5. 5. Framework - Overview Bootstrap •Twitter •APL v2.0 (It will be replaced to MIT in v3) •CSS & Javascript •Last Updated 2012.12.08 (2012.12) Foundation •Zurb •MIT •CSS & Javascript •Last Updated 2012.12.12 (2012.12) Skeleton •Dave Gamache(Designer at Twitter; formerly Interaction Designer at ZURB) •MIT •CSS •Last updated 2011.05.15 (2012.12)
  6. 6. Framework – Comparison Bootstrap Foundation SkeletonBrowser Chrome, Firefox, Safari, Chrome, Firefox, Safari, Chrome, Firefox,Support Opera, IE7+ IE8+ Safari, IE7+Scale Large Medium MediumGrids Fluid, Fixed Fluid, Grid Tools Fixed (724px, 940px, 1170px, (max-width 100%) (960px) below 767px are single column and vertically stacked)CSS Reset(normalize.css) Reset(normaliza.css) Reset(own reset) LESS SASS/SCSSHistory Style guide for internal Boilerplate for client a style agnostic tools in Twitter projects framework by Dave
  7. 7. Framework – Fluid & Fixed 90% 724px 50% 20% 20% 362px 144px 144px
  8. 8. Framework - Reset
  9. 9. Framework – LESS, SASS Dynamic stylesheet language Variables Nested Rules Common Features Mixins LESS Operations Functions SASS Selector Inherit Compile CSS
  10. 10. Framework – LESS Example Functions Variables Operations Mixins Nested Rules
  11. 11. Bootstrap – Why Bootstrap? Easy to use Keep updating Full browser & device compatibility Lots of sites use it It works well with jQuery
  12. 12. Bootstrap - Features
  13. 13. Bootstrap – Proposal Global portal websites Internal systems for admin Mobile PC Tablet One Source
  14. 14. Thank you.