Bootstrap

Transcript

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', '~> 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

34. None