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

Ready? Bootstrap! Go! (@ MuraCon, Kansas City, USA)

Ready? Bootstrap! Go! (@ MuraCon, Kansas City, USA)

Bootstrap (www.getbootstrap.com) is a sleek, intuitive, and powerful open source front-end framework for faster and easier web development. After its initial release in August 2011, it quickly gained popularity in the web development community and is currently the most popular project on GitHub.
Mura CMS itself is built using Bootstrap in the administrator screens, and ships by default with a Bootstrap-based theme and output for the front-end. 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 01, 2013
Tweet

More Decks by Guust Nieuwenhuis

Other Decks in Technology

Transcript

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

     Bootstrap!  Go!   Guust  Nieuwenhuis   MuraCon  US  2013   Kansas  City,  MO  
  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  TwiTer   –  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  September  28th  2013  
  5. ©  2010-­‐2013  Prisma  IT  ®         Why?

      •  Documentaeon   •  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  opeons   •  Responsive  column  resets   •  Offselng  columns   •  Neseng  columns   •  Column  ordering   •  LESS  mixins  and  variables  
  9. ©  2010-­‐2013  Prisma  IT  ®         Base

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

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

     Plugins   •  Transieons   •  Modals   •  Dropdowns   •  ScrollSpy   •  Tab   •  Tooleps   •  Popovers   •  Alert   •  BuTon   •  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  ®         MURA

     &  BOOTSTRAP  
  15. ©  2010-­‐2013  Prisma  IT  ®         Mura

     &  Bootstrap   •  Administrator   •  HTML  rendering   •  Bootstrap  Theme  
  16. ©  2010-­‐2013  Prisma  IT  ®         THE

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

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

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

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

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

     Bootstrap!  Go!   Guust  Nieuwenhuis   MuraCon  US  2013   Kansas  City,  MO