Your SlideShare is downloading. ×
0
Ready? Bootstrap! Go!ColdFusion UserGroup Belgium24/04/2013BootstrapSleek, intuitive, and powerful front-end frameworkfor ...
2• Guust Nieuwenhuis• Analyst Programmer at Orange Lark• Adobe Community Professional• CFUG Belgium co-manager• ColdFusion...
... 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!)•...
What?• Some GitHub stats...• Forked: 14.747 (#1)• Starred: 48.841 (#1)• Pull request: 7.642• Closed Issues: 7.449on April ...
Why?• Grid System• Fixed or Fluid• Configurable• Components• Custom jQuery plugins• Responsive• LESS
FeaturesGet StartedScaffoldingBase CSSComponentsjQuery 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• Paginati...
jQuery Plugins• Transitions• Modals• Dropdowns• ScrollSpy• Togglable tabs• Tooltips• Popovers• Alert messages• Buttons• Co...
Demo’sExamplesBuilt with
The future of BootstrapBootstrap v3
Bootstrap v3• Switch to the MIT license• Components• List groups (new)• Panels (new• Carousel (redesign)• Modals (redesign...
Bootstrap v3• Drop legacy code• Drop IE7/FF3x support entirely• Improve responsive CSS• Mobile first, all CSS in one file• U...
Bootstrap v3• Centralize community efforts• New GitHub organization• Strengthening the community• Growing the team• New URL...
The Bootstrap ecosystemThemesTheme BuildersComponentsToolsEven more...
Themes• Bootswatch (http://bootswatch.com)• {wrap}bootstrap (http://wrapbootstrap.com)• Flat UI (http://designmodo.github....
Themes Builders• Bootstrap Customize (http://twitter.github.io/bootstrap/customize.html)• StyleBootstrap.info (http://styl...
Components• jQuery UI Bootstrap (http://addyosmani.github.io/jquery-ui-bootstrap/)• Datepicker (https://github.com/eternic...
Tools• Design• Bootstrap PSD (http://gui.repixdesign.com/#bootstrap)• Bootstrap Fireworks toolkit (http://www.fireworkstool...
Tools• Snippets• Bootsnipp (http://bootsnipp.com)• Prototyping• Jetstrap (http://jetstrap.com)• Divshot (http://www.divsho...
Even more...• Bootsnipp resources list• http://bootsnipp.com/resources• Bootstrap Hero resources list• http://bootstrapher...
Contact me!info@lagaffe.bewww.lagaffe.be@lagaffeinfo@orangelark.bewww.orangelark.be@orangelark
Ready? Bootstrap! Go!ColdFusion UserGroup Belgium24/04/2013BootstrapSleek, intuitive, and powerful front-end frameworkfor ...
Upcoming SlideShare
Loading in...5
×

Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)

1,444

Published on

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!

Published in: Technology, Education
1 Comment
1 Like
Statistics
Notes
  • The new version of Bootstrap Magic has been released ! It uses the latest and greatest from Twitter Bootstrap 3. Get it while it's hot !
    http://pikock.github.io/bootstrap-magic/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,444
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
66
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)"

  1. 1. Ready? Bootstrap! Go!ColdFusion UserGroup Belgium24/04/2013BootstrapSleek, intuitive, and powerful front-end frameworkfor faster and easier web development.
  2. 2. 2• Guust Nieuwenhuis• Analyst Programmer at Orange Lark• Adobe Community Professional• CFUG Belgium co-manager• ColdFusion CAB member• Scotch on the Rocks CAB memberAbout me
  3. 3. ... I can’t design!I have to confess...
  4. 4. What?Why?Bootstrap?
  5. 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.1What?
  6. 6. What?• Some GitHub stats...• Forked: 14.747 (#1)• Starred: 48.841 (#1)• Pull request: 7.642• Closed Issues: 7.449on April 21th 2013
  7. 7. Why?• Grid System• Fixed or Fluid• Configurable• Components• Custom jQuery plugins• Responsive• LESS
  8. 8. FeaturesGet StartedScaffoldingBase CSSComponentsjQuery Plugins
  9. 9. Get started• Download• Compiled• Source• Customize• File Structure• HTML Template• Examples
  10. 10. Scaffolding• Grid system• Fixed• Fluid• Layout• Fixed• Fluid• Responsive design
  11. 11. Base CSS• Typography• Code• Tables• Forms• Buttons• Images• Icons
  12. 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. 13. jQuery Plugins• Transitions• Modals• Dropdowns• ScrollSpy• Togglable tabs• Tooltips• Popovers• Alert messages• Buttons• Collapse• Carousel• Typeahead• Affix
  14. 14. Demo’sExamplesBuilt with
  15. 15. The future of BootstrapBootstrap v3
  16. 16. Bootstrap v3• Switch to the MIT license• Components• List groups (new)• Panels (new• Carousel (redesign)• Modals (redesign for mobile first)
  17. 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. 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. 19. The Bootstrap ecosystemThemesTheme BuildersComponentsToolsEven more...
  20. 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. 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. 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. 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. 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. 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. 26. Contact me!info@lagaffe.bewww.lagaffe.be@lagaffeinfo@orangelark.bewww.orangelark.be@orangelark
  27. 27. Ready? Bootstrap! Go!ColdFusion UserGroup Belgium24/04/2013BootstrapSleek, intuitive, and powerful front-end frameworkfor faster and easier web development.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×