ready? bootstrap! go! (cfug belgium 24 04-2012)
DESCRIPTION
Bootstrap (www.getbootstrap.com) is a sleek, intuitive, and powerful open source front-end framework for faster and easier web development. After it's initial release in August 2011, it quick gained popularity in the web development community and currently it's the most popular project on GitHub. Numerous projects, components and tools are build around it and both small and big companies are using it. Get introduced to Bootstrap and the ecosystem around it. Your front-end development will never be the same again!TRANSCRIPT
![Page 1: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/1.jpg)
Ready? Bootstrap! Go! ColdFusion UserGroup Belgium24/04/2013
BootstrapSleek, intuitive, and powerful front-end framework
for faster and easier web development.
![Page 2: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/2.jpg)
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
![Page 3: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/3.jpg)
... I can’t design!
I have to confess...
![Page 4: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/4.jpg)
What?Why?
Bootstrap?
![Page 5: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/5.jpg)
• 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?
![Page 6: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/6.jpg)
What?
• Some GitHub stats...
• Forked: 14.747 (#1)
• Starred: 48.841 (#1)
• Pull request: 7.642
• Closed Issues: 7.449
on April 21th 2013
![Page 7: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/7.jpg)
Why?
• Grid System
• Fixed or Fluid
• Configurable
• Components
• Custom jQuery plugins
• Responsive
• LESS
![Page 8: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/8.jpg)
Features
Get StartedScaffoldingBase CSS
ComponentsjQuery Plugins
![Page 9: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/9.jpg)
Get started
• Download
• Compiled
• Source
• Customize
• File Structure
• HTML Template
• Examples
![Page 10: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/10.jpg)
Scaffolding
• Grid system
• Fixed
• Fluid
• Layout
• Fixed
• Fluid
• Responsive design
![Page 11: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/11.jpg)
Base CSS
• Typography
• Code
• Tables
• Forms
• Buttons
• Images
• Icons
![Page 12: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/12.jpg)
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
![Page 13: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/13.jpg)
jQuery Plugins
• Transitions
• Modals
• Dropdowns
• ScrollSpy
• Togglable tabs
• Tooltips
• Popovers
• Alert messages
• Buttons
• Collapse
• Carousel
• Typeahead
• Affix
![Page 14: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/14.jpg)
Demo’s
ExamplesBuilt with
![Page 15: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/15.jpg)
The future of Bootstrap
Bootstrap v3
![Page 16: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/16.jpg)
Bootstrap v3
• Switch to the MIT license
• Components
• List groups (new)
• Panels (new
• Carousel (redesign)
• Modals (redesign for mobile first)
![Page 17: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/17.jpg)
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
![Page 18: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/18.jpg)
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
![Page 19: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/19.jpg)
The Bootstrap ecosystem
ThemesTheme Builders
ComponentsTools
Even more...
![Page 20: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/20.jpg)
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/)
![Page 21: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/21.jpg)
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)
![Page 22: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/22.jpg)
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/)
![Page 23: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/23.jpg)
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)
![Page 24: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/24.jpg)
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/)
![Page 25: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/25.jpg)
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
![Page 26: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/26.jpg)
Contact me!
@lagaffe
@orangelark
![Page 27: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.vdocument.in/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/27.jpg)
Ready? Bootstrap! Go! ColdFusion UserGroup Belgium24/04/2013
BootstrapSleek, intuitive, and powerful front-end framework
for faster and easier web development.