Your SlideShare is downloading. ×
0
BootstrapSleek, intuitive, and powerful    Front-end Framework                           CJ E&M Games Ilhwan Seo
Table of contents                Responsive Web                    Framework                    Bootstrap                 ...
Responsive Web  Any devices and browsers                            Reading                 Optimal                  View ...
Framework            Framework    HTML5     CSS3   Javascript
Framework - Overview       Bootstrap       •Twitter       •APL v2.0 (It will be replaced to MIT in v3)       •CSS & Javasc...
Framework – Comparison          Bootstrap                  Foundation               SkeletonBrowser Chrome, Firefox, Safar...
Framework – Fluid & Fixed                  90%                  724px           50%            20%     20%          362px ...
Framework - Reset http://meyerweb.com/eric/tools/css/reset/
Framework – LESS, SASS            Dynamic stylesheet language               Variables        Nested Rules Common Features ...
Framework – LESS Example                                 Functions                     Variables                          ...
Bootstrap – Why Bootstrap?                    Easy to use                   Keep updating         Full browser & device co...
Bootstrap - Features
Bootstrap – Proposal      Global portal websites         Internal systems for admin                                    Mob...
Thank you.
Upcoming SlideShare
Loading in...5
×

Bootstrap

1,882

Published on

short presentation for bootstrap

Published in: Technology

Transcript of "Bootstrap"

  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 http://meyerweb.com/eric/tools/css/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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×