Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
-
Upload
guust-nieuwenhuis -
Category
Technology
-
view
115 -
download
3
description
Transcript of Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
![Page 1: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/4.jpg)
What?Why?
Bootstrap?
![Page 5: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/14.jpg)
Demo’s
ExamplesBuilt with
![Page 15: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader031/viewer/2022020217/54c7adb74a79592e4b8b4573/html5/thumbnails/26.jpg)
Contact me!
@lagaffe
@orangelark
![Page 27: Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)](https://reader031.fdocuments.us/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.