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.
B
View Slide
I’m @mdo.I designed Bootstrap with @fat.
Bootstrap?
5,000,000+monthly page views38,500+stars9,100+forks
Lots of great sites using it.
Designing Bootstrap
What’s design?
making decisions.about constraints.solving problems.communication.Design is how stuff works.
How’s that apply to Bootstrap?
Five principles.
Treat the docs like they’rethe product.1
Start with a small team and an idea.Then, grow from there.
A live, coded style guide.
Say no all the time.2
Add all the things!Umm, no.
Closed markdotto closed the issue 4 hours ago.
Remember, this is a product.
If I had asked peoplewhat they wanted,they would have saidfaster horses.Henry Ford
Don’t solve everything.
Educate by enforcingcoding styles.3
All code should look like asingle person typed it.Paraphrasing @necolas, Idiomatic CSS
Base classesPrefix modifiers// Tables.table { ... }.table-striped { ... }.table-bordered { ... }.table-condensed { ... }// Forms.form-inline { ... }.form-search { ... }.form-horizontal { ... }// Nav.nav { ... }.nav-tabs { ... }.nav-pills { ... }
FormattingProperty orderCompiling
Help folks avoid writingJavaScript.4
// Dismissing in BS1.x×
Let’s just write HTML.
// Dismissing in BS2.x×
// href = targetLaunch// data-target = targetLaunch
Reach every person onthe planet.5
CSS&
You, too.
Everything is a design system.
Help awesome peopledo awesome stuff.
Thanks!@mdo · @twbootstrap · http://getbootstrap.com
Questions?