Your SlideShare is downloading. ×
Bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Bootstrap

1,709
views

Published on

short presentation for bootstrap

short presentation for bootstrap

Published in: Technology

1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,709
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
90
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.