Ready? Bootstrap! Go! ColdFusion UserGroup Belgium24/04/2013
BootstrapSleek, intuitive, and powerful front-end framework
for faster and easier web development.
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
... I can’t design!
I have to confess...
What?Why?
Bootstrap?
• 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?
What?
• Some GitHub stats...
• Forked: 14.747 (#1)
• Starred: 48.841 (#1)
• Pull request: 7.642
• Closed Issues: 7.449
on April 21th 2013
Why?
• Grid System
• Fixed or Fluid
• Configurable
• Components
• Custom jQuery plugins
• Responsive
• LESS
Features
Get StartedScaffoldingBase CSS
ComponentsjQuery Plugins
Get started
• Download
• Compiled
• Source
• Customize
• File Structure
• HTML Template
• Examples
Scaffolding
• Grid system
• Fixed
• Fluid
• Layout
• Fixed
• Fluid
• Responsive design
Base CSS
• Typography
• Code
• Tables
• Forms
• Buttons
• Images
• Icons
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
jQuery Plugins
• Transitions
• Modals
• Dropdowns
• ScrollSpy
• Togglable tabs
• Tooltips
• Popovers
• Alert messages
• Buttons
• Collapse
• Carousel
• Typeahead
• Affix
Demo’s
ExamplesBuilt with
The future of Bootstrap
Bootstrap v3
Bootstrap v3
• Switch to the MIT license
• Components
• List groups (new)
• Panels (new
• Carousel (redesign)
• Modals (redesign for mobile first)
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
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
The Bootstrap ecosystem
ThemesTheme Builders
ComponentsTools
Even more...
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/)
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)
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/)
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)
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/)
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
Contact me!
@lagaffe
@orangelark
Ready? Bootstrap! Go! ColdFusion UserGroup Belgium24/04/2013
BootstrapSleek, intuitive, and powerful front-end framework
for faster and easier web development.
