Bootstrap

Design for Developers

Transcript

1. Bootstrap Design for Developers
2. vanstee Big Nerd Ranch !
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
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
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', '~> 2.3.2.1' APPLICATION.CSS @import "bootstrap"; APPLICATION.JS //= require bootstrap
25. •Should “just work” •Don’t use therubyracer •Docs are great Heroku https://devcenter.heroku.com/articles/rails-asset-pipeline
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