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



Design for Developers


Patrick Van Stee

August 28, 2013

More Decks by Patrick Van Stee

Other Decks in Programming


  1. Bootstrap Design for Developers

  2. vanstee Big Nerd Ranch !

  3. None
  4. None
  5. An improved, default style for your webapps

  6. •Framework •Getting Started •Protips

  7. mdo Mark Otto ! fat ! Jacob Thornton

  8. Developed as a framework to encourage consistency

  9. A way to document and share common design patterns

  10. JavaScript Fonts icons HTML examples CSS

  11. Browser Support

  12. None
  13. None
  14. <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div>

    <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li class="dropdown open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </li> </ul> </nav>
  15. Responsive Mobile First

  16. None
  17. •Icons •CSS helpers •JavaScript plugins •Community projects

  18. •Framework •Getting Started •Protips

  19. Bootstrap Rails &

  20. Use compiled CSS Use LESS with the asset pipeline or

  21. Asset Pipeline LESS CSS Minified

  22. Gems

  23. •Rewritten using SASS •Rails Engine •Not yet on Bootstrap 3

    bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass/pull/329
  24. GEMFILE gem 'sass-rails', '~> 3.2' gem 'bootstrap-sass', '~>' APPLICATION.CSS

    @import "bootstrap"; APPLICATION.JS //= require bootstrap
  25. •Should “just work” •Don’t use therubyracer •Docs are great Heroku

  26. •Also using SASS •Bootstrap 3 •Haven’t used this yet anjlab-bootstrap-rails

  27. •Framework •Getting Started •Protips

  28. Read the docs and play with the examples

  29. •Find variables in the docs •Override before importing •3rd party

    themes Customization
  30. APPLICATION.CSS $blue: #5b9cbc $linkColor: $blue $headingsFontFamily: 'Helvetica Neue', Helvetica, Arial,

    sans-serif @import "bootstrap";
  31. Checkout the Bootstrap Expo for inspiration expo.getbootstrap.com

  32. Alternatives •Foundation •Skeleton •Gumby

  33. twbs/ bootstrap getbootstrap.com

  34. None