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
2. I’m @mdo. I designed Bootstrap with @fat.
3. Bootstrap?
5. 5,000,000+ monthly page views 38,500+ stars 9,100+ forks
6. Lots of great sites using it.
10. Designing Bootstrap
11. What’s design?
12. making decisions. about constraints. solving problems. communication. Design is how stuff works.
13. How’s that apply to Bootstrap?
14. Five principles.
15. Treat the docs like they’re the product. 1
16. Start with a small team and an idea. Then, grow from there.
18. A live, coded style guide.
21. Say no all the time. 2
22. Add all the things! Umm, no.
23. Closed markdotto closed the issue 4 hours ago.
24. Remember, this is a product.
25. If I had asked people what they wanted, they would have said faster horses. Henry Ford
26. Don’t solve everything.
27. Educate by enforcing coding styles. 3
28. All code should look like a single person typed it. Paraphrasing @necolas, Idiomatic CSS
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 { ... }
30. Formatting Property order Compiling
33. Help folks avoid writing JavaScript. 4
34. // Dismissing in BS1.x <a class=”close” href=”#”> &times; </a>
35. Let’s just write HTML.
36. // Dismissing in BS2.x <button class=”close” data-dismiss=”modal”> &times; </button>
37. // href = target <a href=”#myModal” data-toggle=”modal”> Launch </a> // data-target = target <a data-target=”.fat” data-toggle=”modal”> Launch </a>
38. Reach every person on the planet. 5
40. CSS &
44. You, too.
45. Everything is a design system.
46. Help awesome people do awesome stuff.
47. Thanks! @mdo · @twbootstrap · http://getbootstrap.com
48. Questions?