Uploaded on

short presentation for bootstrap

short presentation for bootstrap

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. BootstrapSleek, intuitive, and powerful Front-end Framework CJ E&M Games Ilhwan Seo
  • 2. Table of contents Responsive Web Framework Bootstrap Demo
  • 3. Responsive Web Any devices and browsers Reading Optimal View Navigation
  • 4. Framework Framework HTML5 CSS3 Javascript
  • 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. 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. Framework – Fluid & Fixed 90% 724px 50% 20% 20% 362px 144px 144px
  • 8. Framework - Reset http://meyerweb.com/eric/tools/css/reset/
  • 9. Framework – LESS, SASS Dynamic stylesheet language Variables Nested Rules Common Features Mixins LESS Operations Functions SASS Selector Inherit Compile CSS
  • 10. Framework – LESS Example Functions Variables Operations Mixins Nested Rules
  • 11. Bootstrap – Why Bootstrap? Easy to use Keep updating Full browser & device compatibility Lots of sites use it It works well with jQuery
  • 12. Bootstrap - Features
  • 13. Bootstrap – Proposal Global portal websites Internal systems for admin Mobile PC Tablet One Source
  • 14. Thank you.