Slide 1

Slide 1 text

B

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Bootstrap?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Lots of great sites using it.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Designing Bootstrap

Slide 11

Slide 11 text

What’s design?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

How’s that apply to Bootstrap?

Slide 14

Slide 14 text

Five principles.

Slide 15

Slide 15 text

Treat the docs like they’re the product. 1

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

A live, coded style guide.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Say no all the time. 2

Slide 22

Slide 22 text

Add all the things! Umm, no.

Slide 23

Slide 23 text

Closed markdotto closed the issue 4 hours ago.

Slide 24

Slide 24 text

Remember, this is a product.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Don’t solve everything.

Slide 27

Slide 27 text

Educate by enforcing coding styles. 3

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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 { ... }

Slide 30

Slide 30 text

Formatting Property order Compiling

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Help folks avoid writing JavaScript. 4

Slide 34

Slide 34 text

// Dismissing in BS1.x ×

Slide 35

Slide 35 text

Let’s just write HTML.

Slide 36

Slide 36 text

// Dismissing in BS2.x ×

Slide 37

Slide 37 text

// href = target Launch // data-target = target Launch

Slide 38

Slide 38 text

Reach every person on the planet. 5

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

CSS &

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

You, too.

Slide 45

Slide 45 text

Everything is a design system.

Slide 46

Slide 46 text

Help awesome people do awesome stuff.

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Questions?