Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ready? Bootstrap! Go! (@ CFCamp, Germering, Germany)

Ready? Bootstrap! Go! (@ CFCamp, Germering, Germany)

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!

7587064f2cbfab406eaabbcbfc9a1d25?s=128

Guust Nieuwenhuis

October 14, 2013
Tweet

More Decks by Guust Nieuwenhuis

Other Decks in Technology

Transcript

  1. ©  2010-­‐2013  Prisma  IT  ®         Ready?

     Bootstrap!  Go!   Guust  Nieuwenhuis   CFCamp  2013   Germering,  Germany  
  2. ©  2010-­‐2013  Prisma  IT  ®         About

     me   •  Guust  Nieuwenhuis   •  MD  at  Prisma  IT  Belgium   •  CFML  &  Mura  CMS  Expert  
  3. ©  2010-­‐2013  Prisma  IT  ®         BOOTSTRAP?

      What?   Why?  
  4. ©  2010-­‐2013  Prisma  IT  ®         What?

      •  Web  UI  Framework   –  CSS,  images,  icons,   JavaScript   •  Started  at  TwiRer   –  By  nerds     (@mod  and  @fat)   •  Open  Source   (Apache  License  v2.0)   –  For  nerds     (you  and  me!)   •  Some  GitHub  stats...   –  Forked:  20412  (#1)   –  Starred:  58959  (#1)   –  Pull  request:  10902   –  Closed  Issues:  10652   on  October  1th  2013  
  5. ©  2010-­‐2013  Prisma  IT  ®         Why?

      •  Documentadon   •  Cross  Browser  support   •  Responsive  &  Mobile  First   •  Components   •  Custom  jQuery  plugins   •  LESS   •  Open  Source  
  6. ©  2010-­‐2013  Prisma  IT  ®         FEATURES

      Get  Started   Scaffolding   Base  CSS   Components   jQuery  Plugins   New  in  V3  
  7. ©  2010-­‐2013  Prisma  IT  ®         Ge=ng

     Started   •  Download   – Compiled   – Source   – Customize   •  File  Structure   •  Basic  Template   •  Examples  
  8. ©  2010-­‐2013  Prisma  IT  ®         Grid

     System   •  Grid  opdons   •  Responsive  column  resets   •  Offsekng  columns   •  Nesdng  columns   •  Column  ordering   •  LESS  mixins  and  variables  
  9. ©  2010-­‐2013  Prisma  IT  ®         Base

     CSS   •  Typography   •  Code   •  Tables   •  Forms   •  BuRons   •  Images   •  Helper  classes   •  Responsive  udlides  
  10. ©  2010-­‐2013  Prisma  IT  ®         Components

      •  Glyphicons   •  Dropdowns   •  BuRon  groups   •  BuRon  dropdowns   •  Navs   •  Navbar   •  Breadcrumbs   •  Paginadon   •  Labels   •  Badges   •  Jumbotron   •  Page  header   •  Thumbnails   •  Alerts   •  Progress  bars   •  Media  object   •  List  group   •  Panels   •  Wells  
  11. ©  2010-­‐2013  Prisma  IT  ®         jQuery

     Plugins   •  Transidons   •  Modals   •  Dropdowns   •  ScrollSpy   •  Tab   •  Tooldps   •  Popovers   •  Alert   •  BuRon   •  Collapse   •  Carousel   •  Affix  
  12. ©  2010-­‐2013  Prisma  IT  ®         New

     in  V3   •  Mobile  first  and  always  responsive   •  Super-­‐powered  grid  system   •  New  Glyphicons  icon  font   •  Added/Removed  some  components   •  Dropped  IE  7  and  FF  3.6  support   •  And  more:     blog.getbootstrap.com/2013/08/19/bootstrap-­‐3-­‐released/  
  13. ©  2010-­‐2013  Prisma  IT  ®         DEMO’S

      Examples   Build  with  
  14. ©  2010-­‐2013  Prisma  IT  ®         THE

     BOOTSTRAP  ECOSYSTEM   Themes   Theme  Builders   Components   Tools   Even  more...  
  15. ©  2010-­‐2013  Prisma  IT  ®         Themes

      •  Bootswatch     bootswatch.com   •  {wrap}bootstrap     wrapbootstrap.com   •  Flat  UI     designmodo.github.io/Flat-­‐UI/   •  BootMetro   aozora.github.io/bootmetro/   •  Geo  for  Bootstrap     divshot.github.io/geo-­‐bootstrap/  
  16. ©  2010-­‐2013  Prisma  IT  ®         Themes

     Builders   •  Bootstrap  Customize     getbootstrap.com/customize/   •  StyleBootstrap.info     stylebootstrap.info   •  Boostrap  Magic     pikock.github.io/bootstrap-­‐magic/   •  PaintStrap     paintstrap.com  
  17. ©  2010-­‐2013  Prisma  IT  ®         Components

      •  jQuery  UI  Bootstrap   addyosmani.github.io/jquery-­‐ui-­‐bootstrap/   •  Datepicker   github.com/eternicode/bootstrap-­‐datepicker/   •  Select2   ivaynberg.github.io/select2/   •  X-­‐editable   vitalets.github.io/x-­‐editable/  
  18. ©  2010-­‐2013  Prisma  IT  ®         Components

      •  Bootstrap  Data  Table   github.com/jeffdupont/bootstrap-­‐data-­‐table   •  Bootstrap  Switch   bootstrap-­‐switch.org   •  File  Uploader   blueimp.github.io/jQuery-­‐File-­‐Upload/   •  Bootstro.js   clu3.github.io/bootstro.js/  
  19. ©  2010-­‐2013  Prisma  IT  ®         Tools

      •  Design   – Bootstrap  PSD   gui.repixdesign.com/#bootstrap   •  Content  Delivery  Network   – BootstrapCDN   bootstrapcdn.com  
  20. ©  2010-­‐2013  Prisma  IT  ®         Tools

      •  Snippets   –  Bootsnipp   bootsnipp.com   •  Prototyping   –  Jetstrap   jetstrap.com   –  Divshot   divshot.com   –  Pingendo   pingendo.com   –  Layoudt!   layoudt.com  
  21. ©  2010-­‐2013  Prisma  IT  ®         Even

     more...   •  Bootsnipp  resources  list   bootsnipp.com/resources   •  Bootstrap  Hero  resources  list   bootstraphero.com/the-­‐big-­‐badass-­‐list-­‐of-­‐twiRer-­‐bootstrap-­‐resources   •  TwiRer  Bootstrap  Web  Development  How-­‐To   packtpub.com/twiRer-­‐bootstrap-­‐web-­‐development/book  
  22. ©  2010-­‐2013  Prisma  IT  ®         CONTACT

     ME   g.nieuwenhuis@prisma-­‐it.com   @lagaffe   www.lagaffe.be   www.prisma-­‐it.com  
  23. ©  2010-­‐2013  Prisma  IT  ®         Ready?

     Bootstrap!  Go!   Guust  Nieuwenhuis   CFCamp  2013   Germering,  Germany