Ready? bootstrap. go! (cf objective 14 05-2014)

545 views

Published on

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
545
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ready? bootstrap. go! (cf objective 14 05-2014)

  1. 1. ©  2010-­‐2014  Prisma  IT  ®         Ready?  Bootstrap.  Go!   Guust  Nieuwenhuis   cf.Objec?ve()  2014   Minneapolis,  MN  
  2. 2. ©  2010-­‐2014  Prisma  IT  ®         About  me   •  Guust  Nieuwenhuis   •  MD  at  Prisma  IT   Belgium   •  CFML  &  Mura  CMS   Expert  
  3. 3. ©  2010-­‐2014  Prisma  IT  ®         BOOTSTRAP?   What?   Why?  
  4. 4. ©  2010-­‐2014  Prisma  IT  ®         What?   •  Web  UI  Framework   – CSS,  images,  icons,  JavaScript   •  Started  at  TwiZer   – By  nerds  (@mdo  and  @fat)   •  Open  Source   – MIT   – For  nerds  (you  and  me!)  
  5. 5. ©  2010-­‐2014  Prisma  IT  ®         Some  stats…  
  6. 6. ©  2010-­‐2014  Prisma  IT  ®         Why?   •  Cross  Browser  support   •  Responsive  &  Mobile  First   •  LESS/SASS   •  Components   •  Custom  jQuery  plugins   •  Open  Source   •  Documenta?on  
  7. 7. ©  2010-­‐2014  Prisma  IT  ®         FEATURES   Get  Started   Scaffolding   Base  CSS   Components   jQuery  Plugins  
  8. 8. ©  2010-­‐2014  Prisma  IT  ®         Ge=ng  Started   •  Download   – Compiled   – Source   – Customize   •  File  Structure   •  Basic  Template   •  Examples  
  9. 9. ©  2010-­‐2014  Prisma  IT  ®         Grid  System   •  Grid  op?ons   •  Responsive  column  resets   •  Offsebng  columns   •  Nes?ng  columns   •  Column  ordering   •  LESS/SASS  mixins  and  variables  
  10. 10. ©  2010-­‐2014  Prisma  IT  ®         Base  CSS   •  Typography   •  Code   •  Tables   •  Forms   •  BuZons   •  Images   •  Helper  classes   •  Responsive  u?li?es  
  11. 11. ©  2010-­‐2014  Prisma  IT  ®         Components   •  Glyphicons   •  Dropdowns   •  BuZon  groups   •  BuZon  dropdowns   •  Navs   •  Navbar   •  Breadcrumbs   •  Pagina?on   •  Labels   •  Badges   •  Jumbotron   •  Page  header   •  Thumbnails   •  Alerts   •  Progress  bars   •  Media  object   •  List  group   •  Panels   •  Wells  
  12. 12. ©  2010-­‐2014  Prisma  IT  ®         jQuery  Plugins   •  Transi?ons   •  Modals   •  Dropdowns   •  ScrollSpy   •  Tab   •  Tool?ps   •  Popovers   •  Alert   •  BuZon   •  Collapse   •  Carousel   •  Affix  
  13. 13. ©  2010-­‐2014  Prisma  IT  ®         DEMO’S   Examples   Build  with  
  14. 14. ©  2010-­‐2014  Prisma  IT  ®         THE  BOOTSTRAP  ECOSYSTEM   Themes   Theme  Builders   Components   Tools   Even  more...  
  15. 15. ©  2010-­‐2014  Prisma  IT  ®         Themes   •  Bootswatch     bootswatch.com   •  {wrap}bootstrap     wrapbootstrap.com   •  Flat  UI     designmodo.github.io/Flat-­‐UI/   •  Geo  for  Bootstrap     code.divshot.com/geo-­‐bootstrap/  
  16. 16. ©  2010-­‐2014  Prisma  IT  ®         Themes  Builders   •  Bootstrap  Customize     getbootstrap.com/customize/   •  StyleBootstrap.info     stylebootstrap.info   •  Boostrap  Magic     pikock.github.io/bootstrap-­‐magic/   •  PaintStrap     paintstrap.com  
  17. 17. ©  2010-­‐2014  Prisma  IT  ®         Components   •  jQuery  UI  Bootstrap   github.com/jquery-­‐ui-­‐bootstrap/jquery-­‐ui-­‐bootstrap/   •  Datepicker   github.com/eternicode/bootstrap-­‐datepicker/   •  Select2   ivaynberg.github.io/select2/   •  X-­‐editable   vitalets.github.io/x-­‐editable/  
  18. 18. ©  2010-­‐2014  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. 19. ©  2010-­‐2014  Prisma  IT  ®         Tools   •  Design   – Bootstrap  PSD   store.repixdesign.com/freebies/   •  Content  Delivery  Network   – BootstrapCDN   bootstrapcdn.com  
  20. 20. ©  2010-­‐2014  Prisma  IT  ®         Tools   •  Snippets   –  Bootsnipp   bootsnipp.com   •  Prototyping   –  Jetstrap   jetstrap.com   –  Divshot   divshot.com   –  Pingendo   pingendo.com   –  Layou?t!   layou?t.com  
  21. 21. ©  2010-­‐2014  Prisma  IT  ®         Even  more...   •  Bootsnipp  resources  list   bootsnipp.com/resources   •  Bootstrap  Hero  resources  list   bootstraphero.com/the-­‐big-­‐badass-­‐list-­‐of-­‐twiZer-­‐bootstrap-­‐resources  
  22. 22. ©  2010-­‐2014  Prisma  IT  ®         CONTACT  ME   g.nieuwenhuis@prisma-­‐it.com   @lagaffe   www.lagaffe.be   www.prisma-­‐it.com  
  23. 23. ©  2010-­‐2014  Prisma  IT  ®         Ready?  Bootstrap.  Go!   Guust  Nieuwenhuis   cf.Objec?ve()  2014   Minneapolis,  MN  

×