Bootstrap

Design for Developers

Transcript

1. Bootstrap
   Design for Developers
   

   View Slide

2. vanstee
   Big Nerd Ranch
   !
   

   View Slide

3. View Slide

4. View Slide

5. An improved,
   default style for
   your webapps
   

   View Slide

6. •Framework
   •Getting Started
   •Protips
   

   View Slide

7. mdo
   Mark Otto
   !
   fat
   !
   Jacob Thornton
   

   View Slide

8. Developed as a
   framework to
   encourage
   consistency
   

   View Slide

9. A way to
   document and
   share common
   design patterns
   

   View Slide

10. JavaScript
    Fonts icons
    HTML examples
    CSS
    

    View Slide

11. Browser Support
    

    View Slide

12. View Slide

13. View Slide

14. 
    
    Brand
    
    
    Link
    
    
    Dropdown
    
    
    Action
    Another action
    
    
    
    
    

    View Slide

15. Responsive
    Mobile First
    

    View Slide

16. View Slide

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

    View Slide

18. •Framework
    •Getting Started
    •Protips
    

    View Slide

19. Bootstrap
    Rails
    &
    

    View Slide

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

    View Slide

21. Asset Pipeline
    LESS CSS Minified
    

    View Slide

22. Gems
    

    View Slide

23. •Rewritten using SASS
    •Rails Engine
    •Not yet on Bootstrap 3
    bootstrap-sass
    https://github.com/thomas-mcdonald/bootstrap-sass/pull/329
    

    View Slide

24. GEMFILE
    gem 'sass-rails', '~> 3.2'
    gem 'bootstrap-sass', '~> 2.3.2.1'
    APPLICATION.CSS
    @import "bootstrap";
    APPLICATION.JS
    //= require bootstrap
    

    View Slide

25. •Should “just work”
    •Don’t use therubyracer
    •Docs are great
    Heroku
    https://devcenter.heroku.com/articles/rails-asset-pipeline
    

    View Slide

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

    View Slide

27. •Framework
    •Getting Started
    •Protips
    

    View Slide

28. Read the docs
    and play with
    the examples
    

    View Slide

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

    View Slide

30. APPLICATION.CSS
    $blue: #5b9cbc
    $linkColor: $blue
    $headingsFontFamily:
    'Helvetica Neue', Helvetica,
    Arial, sans-serif
    @import "bootstrap";
    

    View Slide

31. Checkout the
    Bootstrap Expo
    for inspiration
    expo.getbootstrap.com
    

    View Slide

32. Alternatives
    •Foundation
    •Skeleton
    •Gumby
    

    View Slide

33. twbs/
    bootstrap
    getbootstrap.com
    

    View Slide

34. View Slide