Bootstrap

Transcript

1. 1.

   Bootstrap Design for Developers

2. 2.

   vanstee Big Nerd Ranch !

3. 3.

   None
4. 4.

   None
5. 5.

   An improved, default style for your webapps

6. 6.

   •Framework •Getting Started •Protips

7. 7.

   mdo Mark Otto ! fat ! Jacob Thornton

8. 8.

   Developed as a framework to encourage consistency

9. 9.

   A way to document and share common design patterns

10. 10.

    JavaScript Fonts icons HTML examples CSS

11. 11.

    Browser Support

12. 12.

    None
13. 13.

    None
14. 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. 15.

    Responsive Mobile First

16. 16.

    None
17. 17.

    •Icons •CSS helpers •JavaScript plugins •Community projects

18. 18.

    •Framework •Getting Started •Protips

19. 19.

    Bootstrap Rails &

20. 20.

    Use compiled CSS Use LESS with the asset pipeline or

21. 21.

    Asset Pipeline LESS CSS Minified

22. 22.

    Gems

23. 23.

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

    bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass/pull/329
24. 24.

    GEMFILE gem 'sass-rails', '~> 3.2' gem 'bootstrap-sass', '~> 2.3.2.1' APPLICATION.CSS

    @import "bootstrap"; APPLICATION.JS //= require bootstrap
25. 25.

    •Should “just work” •Don’t use therubyracer •Docs are great Heroku

    https://devcenter.heroku.com/articles/rails-asset-pipeline
26. 26.

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

27. 27.

    •Framework •Getting Started •Protips

28. 28.

    Read the docs and play with the examples

29. 29.

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

    themes Customization
30. 30.

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

    sans-serif @import "bootstrap";
31. 31.

    Checkout the Bootstrap Expo for inspiration expo.getbootstrap.com

32. 32.

    Alternatives •Foundation •Skeleton •Gumby

33. 33.

    twbs/ bootstrap getbootstrap.com

34. 34.

    None