Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
2 likes2,056 views
The document presents an overview of Bootstrap, a powerful front-end framework launched in 2011, designed to accelerate web development processes. It details Bootstrap's features, including a responsive grid system, components, and jQuery plugins, as well as community resources and customizable themes. It also highlights the transition to Bootstrap v3, which emphasizes mobile-first design and a more centralized community effort.
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
- 1. Ready? Bootstrap! Go! ColdFusion UserGroup Belgium 24/04/2013 Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development.
- 2. 2 • Guust Nieuwenhuis • Analyst Programmer at Orange Lark • Adobe Community Professional • CFUG Belgium co-manager • ColdFusion CAB member • Scotch on the Rocks CAB member About me
- 3. ... I can’t design! I have to confess...
- 5. • Web UI Framework • CSS, images, icons, JavaScript • Started at Twitter • By nerds (@mdo and @fat) • For nerds (you and me!) • Open Source (Apache License v2.0) since August 2011 • Version 2.3.1 What?
- 6. What? • Some GitHub stats... • Forked: 14.747 (#1) • Starred: 48.841 (#1) • Pull request: 7.642 • Closed Issues: 7.449 on April 21th 2013
- 7. Why? • Grid System • Fixed or Fluid • Configurable • Components • Custom jQuery plugins • Responsive • LESS
- 9. Get started • Download • Compiled • Source • Customize • File Structure • HTML Template • Examples
- 10. Scaffolding • Grid system • Fixed • Fluid • Layout • Fixed • Fluid • Responsive design
- 11. Base CSS • Typography • Code • Tables • Forms • Buttons • Images • Icons
- 12. Components • Dropdowns • Button groups • Button dropdowns • Navigational tabs, pills, and lists • Navbar • Breadcrumbs • Pagination • Labels & Badges • Page headers and hero unit • Thumbnails • Alerts • Progress bars
- 13. jQuery Plugins • Transitions • Modals • Dropdowns • ScrollSpy • Togglable tabs • Tooltips • Popovers • Alert messages • Buttons • Collapse • Carousel • Typeahead • Affix
- 15. The future of Bootstrap Bootstrap v3
- 16. Bootstrap v3 • Switch to the MIT license • Components • List groups (new) • Panels (new • Carousel (redesign) • Modals (redesign for mobile first)
- 17. Bootstrap v3 • Drop legacy code • Drop IE7/FF3x support entirely • Improve responsive CSS • Mobile first, all CSS in one file • Use the @font-face version of Glyphicons
- 18. Bootstrap v3 • Centralize community efforts • New GitHub organization • Strengthening the community • Growing the team • New URLs • And more: https://github.com/twitter/bootstrap/pull/6342
- 19. The Bootstrap ecosystem Themes Theme Builders Components Tools Even more...
- 20. Themes • Bootswatch (http://bootswatch.com) • {wrap}bootstrap (http://wrapbootstrap.com) • Flat UI (http://designmodo.github.io/Flat-UI/) • Geo for Bootstrap (http://divshot.github.io/geo-bootstrap/)
- 21. Themes Builders • Bootstrap Customize (http://twitter.github.io/bootstrap/customize.html) • StyleBootstrap.info (http://stylebootstrap.info) • Boostrap Magic (http://pikock.github.io/bootstrap-magic/) • PaintStrap (http://paintstrap.com)
- 22. Components • jQuery UI Bootstrap (http://addyosmani.github.io/jquery-ui-bootstrap/) • Datepicker (https://github.com/eternicode/bootstrap-datepicker) • Select2 (http://ivaynberg.github.io/select2/) • X-editable (http://vitalets.github.io/x-editable/) • Bootstrap Switch (http://www.larentis.eu/switch/) • File Uploader (http://blueimp.github.io/jQuery-File-Upload/) • Bootstro.js (http://clu3.github.io/bootstro.js/)
- 23. Tools • Design • Bootstrap PSD (http://gui.repixdesign.com/#bootstrap) • Bootstrap Fireworks toolkit (http://www.fireworkstoolkits.com/toolkits/ bootstrap-2/) • Content Delivery Network • BootstrapCDN (http://www.bootstrapcdn.com)
- 24. Tools • Snippets • Bootsnipp (http://bootsnipp.com) • Prototyping • Jetstrap (http://jetstrap.com) • Divshot (http://www.divshot.com) • Pingendo (http://www.pingendo.com) • Layoutit! (http://www.layoutit.com/)
- 25. Even more... • Bootsnipp resources list • http://bootsnipp.com/resources • Bootstrap Hero resources list • http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap- resources • Twitter Bootstrap Web Development How-To • http://www.packtpub.com/twitter-bootstrap-web-development/book
- 26. Contact me! info@lagaffe.be www.lagaffe.be @lagaffe info@orangelark.be www.orangelark.be @orangelark
- 27. Ready? Bootstrap! Go! ColdFusion UserGroup Belgium 24/04/2013 Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development.