Designing Bootstrap

Bc4ab438f7a4ce1c406aadc688427f2c?s=47 Mark Otto
October 12, 2012

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.

Bc4ab438f7a4ce1c406aadc688427f2c?s=128

Mark Otto

October 12, 2012
Tweet

Transcript

  1. B

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

  3. Bootstrap?

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

  6. Lots of great sites using it.

  7. None
  8. None
  9. None
  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.
  17. None
  18. A live, coded style guide.

  19. None
  20. None
  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

  31. None
  32. None
  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

  39. None
  40. CSS &

  41. None
  42. None
  43. None
  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?