Designing Bootstrap

Design is how stuff works, and no where is this more important than widely used front-end tools like Bootstrap. Get the skinny on how and why Bootstrap works the way it does straight from the horse's mouth, the designer of Bootstrap.

Transcript

1. B
   

   View Slide

2. I’m @mdo.
   I designed Bootstrap with @fat.
   

   View Slide

3. Bootstrap?
   

   View Slide

4. View Slide

5. 5,000,000+
   monthly page views
   38,500+
   stars
   9,100+
   forks
   

   View Slide

6. Lots of great sites using it.
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Designing Bootstrap
    

    View Slide

11. What’s design?
    

    View Slide

12. making decisions.
    about constraints.
    solving problems.
    communication.
    Design is how stuff works.
    

    View Slide

13. How’s that apply to Bootstrap?
    

    View Slide

14. Five principles.
    

    View Slide

15. Treat the docs like they’re
    the product.
    1
    

    View Slide

16. Start with a small team and an idea.
    Then, grow from there.
    

    View Slide

17. View Slide

18. A live, coded style guide.
    

    View Slide

19. View Slide

20. View Slide

21. Say no all the time.
    2
    

    View Slide

22. Add all the things!
    Umm, no.
    

    View Slide

23. Closed markdotto closed the issue 4 hours ago.
    

    View Slide

24. Remember, this is a product.
    

    View Slide

25. If I had asked people
    what they wanted,
    they would have said
    faster horses.
    Henry Ford
    

    View Slide

26. Don’t solve everything.
    

    View Slide

27. Educate by enforcing
    coding styles.
    3
    

    View Slide

28. All code should look like a
    single person typed it.
    Paraphrasing @necolas, Idiomatic CSS
    

    View Slide

29. Base classes
    Prefix modifiers
    // Tables
    .table { ... }
    .table-striped { ... }
    .table-bordered { ... }
    .table-condensed { ... }
    // Forms
    .form-inline { ... }
    .form-search { ... }
    .form-horizontal { ... }
    // Nav
    .nav { ... }
    .nav-tabs { ... }
    .nav-pills { ... }
    

    View Slide

30. Formatting
    Property order
    Compiling
    

    View Slide

31. View Slide

32. View Slide

33. Help folks avoid writing
    JavaScript.
    4
    

    View Slide

34. // Dismissing in BS1.x
    
    ×
    
    

    View Slide

35. Let’s just write HTML.
    

    View Slide

36. // Dismissing in BS2.x
    
    ×
    
    

    View Slide

37. // href = target
    
    Launch
    
    // data-target = target
    
    Launch
    
    

    View Slide

38. Reach every person on
    the planet.
    5
    

    View Slide

39. View Slide

40. CSS
    &
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. You, too.
    

    View Slide

45. Everything is a design system.
    

    View Slide

46. Help awesome people
    do awesome stuff.
    

    View Slide

47. Thanks!
    @mdo · @twbootstrap · http://getbootstrap.com
    

    View Slide

48. Questions?
    

    View Slide