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

Ready? Bootstrap! Go! (@ SOTR, Edinburgh, Scotland)

Ready? Bootstrap! Go! (@ SOTR, Edinburgh, Scotland)

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

June 07, 2013
Tweet

More Decks by Guust Nieuwenhuis

Other Decks in Technology

Transcript

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

     Bootstrap!  Go!   Guust  Nieuwenhuis   Scotch  on  the  Rocks  2013   Edinburgh,  Scotland  
  2. ©  2010-­‐2013  Prisma  IT  ®         About

     me   •  Guust  Nieuwenhuis   •  MD  at  Prisma  IT  Belgium  
  3. ©  2010-­‐2013  Prisma  IT  ®         I

     have  to  confess…  
  4. ©  2010-­‐2013  Prisma  IT  ®         …

     I  CAN’T  DESIGN!   I  have  to  confess…  
  5. ©  2010-­‐2013  Prisma  IT  ®         BOOTSTRAP?

      What?   Why?  
  6. ©  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:  15.985  (#1)   –  Starred:  50.819  (#1)   –  Pull  request:  8067   –  Closed  Issues:  7.829   on  May  29th  2013  
  7. ©  2010-­‐2013  Prisma  IT  ®         Why?

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

      Get  Started   Scaffolding   Base  CSS   Components   jQuery  Plugins  
  9. ©  2010-­‐2013  Prisma  IT  ®         GeCng

     Started   •  Download   – Compiled   – Source   – Customize   •  File  Structure   •  HTML  Template   •  Examples  
  10. ©  2010-­‐2013  Prisma  IT  ®         Scaffolding

      •  Grid  system   – Fixed   – Fluid   •  Layout   – Fixed   – Fluid   •  Responsive  design  
  11. ©  2010-­‐2013  Prisma  IT  ®         Base

     CSS   •  Typography   •  Code   •  Tables   •  Forms   •  BuRons   •  Images   •  Icons  
  12. ©  2010-­‐2013  Prisma  IT  ®         Components

      •  Dropdowns   •  BuRon  groups   •  BuRon  dropdowns   •  Navigadonal  tabs,  pills,   and  lists   •  Navbar   •  Breadcrumbs   •  Paginadon   •  Labels  &  Badges   •  Page  headers  and  hero   unit   •  Thumbnails   •  Alerts   •  Progress  bars  
  13. ©  2010-­‐2013  Prisma  IT  ®         jQuery

     Plugins   •  Transidons   •  Modals   •  Dropdowns   •  ScrollSpy   •  Togglable  tabs   •  Tooldps   •  Popovers   •  Alert  messages   •  BuRons   •  Collapse   •  Carousel   •  Typeahead   •  Affix  
  14. ©  2010-­‐2013  Prisma  IT  ®         DEMO’S

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

     FUTURE  OF  BOOTSTRAP   Bootstrap  v3  
  16. ©  2010-­‐2013  Prisma  IT  ®         Bootstrap

     v3   •  Almost  there!   •  Switch  to  the  MIT  license   •  Components   – List  groups  (new)   – Panels  (new   – Carousel  (redesign)   – Modals  (redesign  for  mobile  first)  
  17. ©  2010-­‐2013  Prisma  IT  ®         Bootstrap

     v3   •  Drop  legacy  code   – Drop  IE7/FF3x  support  endrely   •  Improve  responsive  CSS   – Mobile  first,  all  CSS  in  one  file   – Use  the  @font-­‐face  version  of  Glyphicons  
  18. ©  2010-­‐2013  Prisma  IT  ®         Bootstrap

     v3   •  Centralize  community  efforts   – New  GitHub  organizadon   – Strengthening  the  community   – Growing  the  team   •  New  URLs   •  And  more!     github.com/twiRer/bootstrap/pull/6342  
  19. ©  2010-­‐2013  Prisma  IT  ®         THE

     BOOTSTRAP  ECOSYSTEM   Themes   Theme  Builders   Components   Tools   Even  more...  
  20. ©  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/  
  21. ©  2010-­‐2013  Prisma  IT  ®         Themes

     Builders   •  Bootstrap  Customize     twiRer.github.io/bootstrap/customize.html   •  StyleBootstrap.info     stylebootstrap.info   •  Boostrap  Magic     pikock.github.io/bootstrap-­‐magic/   •  PaintStrap     paintstrap.com  
  22. ©  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/  
  23. ©  2010-­‐2013  Prisma  IT  ®         Components

      •  Bootstrap  Switch   larends.eu/switch/   •  File  Uploader   blueimp.github.io/jQuery-­‐File-­‐Upload/   •  Bootstro.js   clu3.github.io/bootstro.js/  
  24. ©  2010-­‐2013  Prisma  IT  ®         Tools

      •  Design   – Bootstrap  PSD   gui.repixdesign.com/#bootstrap   – Bootstrap  Fireworks  toolkit     fireworkstoolkits.com/toolkits/bootstrap-­‐2/   •  Content  Delivery  Network   – BootstrapCDN   bootstrapcdn.com  
  25. ©  2010-­‐2013  Prisma  IT  ®         Tools

      •  Snippets   –  Bootsnipp   bootsnipp.com   •  Prototyping   –  Jetstrap   jetstrap.com   –  Divshot   divshot.com   –  Pingendo   pingendo.com   –  Layoudt!   layoudt.com/  
  26. ©  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  
  27. ©  2010-­‐2013  Prisma  IT  ®         CONTACT

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

     Bootstrap!  Go!   Guust  Nieuwenhuis   Scotch  on  the  Rocks  2013   Edinburgh,  Scotland