Ready? Bootstrap! Go! (SOTR 2013) copy

396 views

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!

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ready? Bootstrap! Go! (SOTR 2013) copy

  1. 1. ©  2010-­‐2013  Prisma  IT  ®        Ready?  Bootstrap!  Go!  Guust  Nieuwenhuis  Scotch  on  the  Rocks  2013  Edinburgh,  Scotland  
  2. 2. ©  2010-­‐2013  Prisma  IT  ®        About  me  •  Guust  Nieuwenhuis  •  MD  at  Prisma  IT  Belgium  
  3. 3. ©  2010-­‐2013  Prisma  IT  ®        I  have  to  confess…  
  4. 4. ©  2010-­‐2013  Prisma  IT  ®        …  I  CAN’T  DESIGN!  I  have  to  confess…  
  5. 5. ©  2010-­‐2013  Prisma  IT  ®        BOOTSTRAP?  What?  Why?  
  6. 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. 7. ©  2010-­‐2013  Prisma  IT  ®        Why?  •  Documentadon  •  Cross  Browser  support  •  Components  •  Custom  jQuery  plugins  •  Responsive  •  LESS  •  Open  Source  
  8. 8. ©  2010-­‐2013  Prisma  IT  ®        FEATURES  Get  Started  Scaffolding  Base  CSS  Components  jQuery  Plugins  
  9. 9. ©  2010-­‐2013  Prisma  IT  ®        GeCng  Started  •  Download  – Compiled  – Source  – Customize  •  File  Structure  •  HTML  Template  •  Examples  
  10. 10. ©  2010-­‐2013  Prisma  IT  ®        Scaffolding  •  Grid  system  – Fixed  – Fluid  •  Layout  – Fixed  – Fluid  •  Responsive  design  
  11. 11. ©  2010-­‐2013  Prisma  IT  ®        Base  CSS  •  Typography  •  Code  •  Tables  •  Forms  •  BuRons  •  Images  •  Icons  
  12. 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. 13. ©  2010-­‐2013  Prisma  IT  ®        jQuery  Plugins  •  Transidons  •  Modals  •  Dropdowns  •  ScrollSpy  •  Togglable  tabs  •  Tooldps  •  Popovers  •  Alert  messages  •  BuRons  •  Collapse  •  Carousel  •  Typeahead  •  Affix  
  14. 14. ©  2010-­‐2013  Prisma  IT  ®        DEMO’S  Examples  Build  with  
  15. 15. ©  2010-­‐2013  Prisma  IT  ®        THE  FUTURE  OF  BOOTSTRAP  Bootstrap  v3  
  16. 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. 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. 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. 19. ©  2010-­‐2013  Prisma  IT  ®        THE  BOOTSTRAP  ECOSYSTEM  Themes  Theme  Builders  Components  Tools  Even  more...  
  20. 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. 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. 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. 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. 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. 25. ©  2010-­‐2013  Prisma  IT  ®        Tools  •  Snippets  –  Bootsnipp  bootsnipp.com  •  Prototyping  –  Jetstrap  jetstrap.com  –  Divshot  divshot.com  –  Pingendo  pingendo.com  –  Layoudt!  layoudt.com/  
  26. 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. 27. ©  2010-­‐2013  Prisma  IT  ®        CONTACT  ME  g.nieuwenhuis@prisma-­‐it.com  @lagaffe  www.prisma-­‐it.com  
  28. 28. ©  2010-­‐2013  Prisma  IT  ®        Ready?  Bootstrap!  Go!  Guust  Nieuwenhuis  Scotch  on  the  Rocks  2013  Edinburgh,  Scotland  

×