Ready? Bootstrap! Go! (SOTR 2013) copy
1 like505 views
The document provides an overview of Bootstrap, a web UI framework including its features, components, and jQuery plugins. It highlights the responsive design, cross-browser support, and open-source nature of Bootstrap. Additionally, it discusses upcoming changes in Bootstrap version 3 and resources available for themes and components.
Ready? Bootstrap! Go! (SOTR 2013) copy
- 1. © 2010-‐2013 Prisma IT ® Ready? Bootstrap! Go! Guust Nieuwenhuis Scotch on the Rocks 2013 Edinburgh, Scotland
- 2. © 2010-‐2013 Prisma IT ® About me • Guust Nieuwenhuis • MD at Prisma IT Belgium
- 3. © 2010-‐2013 Prisma IT ® I have to confess…
- 4. © 2010-‐2013 Prisma IT ® … I CAN’T DESIGN! I have to confess…
- 5. © 2010-‐2013 Prisma IT ® BOOTSTRAP? What? Why?
- 6. © 2010-‐2013 Prisma IT ® What? • Web UI Framework – CSS, images, icons, JavaScript • Started at TwiRer – By nerds (@mod and @fat) • Open Source (Apache License v2.0) – For nerds (you and me!) • Some GitHub stats... – Forked: 15.985 (#1) – Starred: 50.819 (#1) – Pull request: 8067 – Closed Issues: 7.829 on May 29th 2013
- 7. © 2010-‐2013 Prisma IT ® Why? • Documentadon • Cross Browser support • Components • Custom jQuery plugins • Responsive • LESS • Open Source
- 8. © 2010-‐2013 Prisma IT ® FEATURES Get Started Scaffolding Base CSS Components jQuery Plugins
- 9. © 2010-‐2013 Prisma IT ® GeCng Started • Download – Compiled – Source – Customize • File Structure • HTML Template • Examples
- 10. © 2010-‐2013 Prisma IT ® Scaffolding • Grid system – Fixed – Fluid • Layout – Fixed – Fluid • Responsive design
- 11. © 2010-‐2013 Prisma IT ® Base CSS • Typography • Code • Tables • Forms • BuRons • Images • Icons
- 12. © 2010-‐2013 Prisma IT ® Components • Dropdowns • BuRon groups • BuRon dropdowns • Navigadonal tabs, pills, and lists • Navbar • Breadcrumbs • Paginadon • Labels & Badges • Page headers and hero unit • Thumbnails • Alerts • Progress bars
- 13. © 2010-‐2013 Prisma IT ® jQuery Plugins • Transidons • Modals • Dropdowns • ScrollSpy • Togglable tabs • Tooldps • Popovers • Alert messages • BuRons • Collapse • Carousel • Typeahead • Affix
- 14. © 2010-‐2013 Prisma IT ® DEMO’S Examples Build with
- 15. © 2010-‐2013 Prisma IT ® THE FUTURE OF BOOTSTRAP Bootstrap v3
- 16. © 2010-‐2013 Prisma IT ® Bootstrap v3 • Almost there! • Switch to the MIT license • Components – List groups (new) – Panels (new – Carousel (redesign) – Modals (redesign for mobile first)
- 17. © 2010-‐2013 Prisma IT ® Bootstrap v3 • Drop legacy code – Drop IE7/FF3x support endrely • Improve responsive CSS – Mobile first, all CSS in one file – Use the @font-‐face version of Glyphicons
- 18. © 2010-‐2013 Prisma IT ® Bootstrap v3 • Centralize community efforts – New GitHub organizadon – Strengthening the community – Growing the team • New URLs • And more! github.com/twiRer/bootstrap/pull/6342
- 19. © 2010-‐2013 Prisma IT ® THE BOOTSTRAP ECOSYSTEM Themes Theme Builders Components Tools Even more...
- 20. © 2010-‐2013 Prisma IT ® Themes • Bootswatch bootswatch.com • {wrap}bootstrap wrapbootstrap.com • Flat UI designmodo.github.io/Flat-‐UI/ • BootMetro aozora.github.io/bootmetro/ • Geo for Bootstrap divshot.github.io/geo-‐bootstrap/
- 21. © 2010-‐2013 Prisma IT ® Themes Builders • Bootstrap Customize twiRer.github.io/bootstrap/customize.html • StyleBootstrap.info stylebootstrap.info • Boostrap Magic pikock.github.io/bootstrap-‐magic/ • PaintStrap paintstrap.com
- 22. © 2010-‐2013 Prisma IT ® Components • jQuery UI Bootstrap addyosmani.github.io/jquery-‐ui-‐bootstrap/ • Datepicker github.com/eternicode/bootstrap-‐datepicker • Select2 ivaynberg.github.io/select2/ • X-‐editable vitalets.github.io/x-‐editable/
- 23. © 2010-‐2013 Prisma IT ® Components • Bootstrap Switch larends.eu/switch/ • File Uploader blueimp.github.io/jQuery-‐File-‐Upload/ • Bootstro.js clu3.github.io/bootstro.js/
- 24. © 2010-‐2013 Prisma IT ® Tools • Design – Bootstrap PSD gui.repixdesign.com/#bootstrap – Bootstrap Fireworks toolkit fireworkstoolkits.com/toolkits/bootstrap-‐2/ • Content Delivery Network – BootstrapCDN bootstrapcdn.com
- 25. © 2010-‐2013 Prisma IT ® Tools • Snippets – Bootsnipp bootsnipp.com • Prototyping – Jetstrap jetstrap.com – Divshot divshot.com – Pingendo pingendo.com – Layoudt! layoudt.com/
- 26. © 2010-‐2013 Prisma IT ® Even more... • Bootsnipp resources list bootsnipp.com/resources • Bootstrap Hero resources list bootstraphero.com/the-‐big-‐badass-‐list-‐of-‐twiRer-‐bootstrap-‐resources • TwiRer Bootstrap Web Development How-‐To packtpub.com/twiRer-‐bootstrap-‐web-‐development/book
- 27. © 2010-‐2013 Prisma IT ® CONTACT ME g.nieuwenhuis@prisma-‐it.com @lagaffe www.prisma-‐it.com
- 28. © 2010-‐2013 Prisma IT ® Ready? Bootstrap! Go! Guust Nieuwenhuis Scotch on the Rocks 2013 Edinburgh, Scotland