Slide 1
Slide 1 text
<3
Slide 2
Slide 2 text
Oh hai.
I’m @mdo.
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
B
Slide 6
Slide 6 text
#BYOB
Slide 7
Slide 7 text
Build your own Bootstrap.
Slide 8
Slide 8 text
Bootstrap?
Slide 9
Slide 9 text
Bootstrap [is] the Times New
Roman of design.
— Guy on the internet
http://notes.unwieldy.net/post/43508972396/please-stop-using-
twitter-bootstrap
Slide 10
Slide 10 text
Sleek, intuitive, and powerful
mobile first front-end framework
for faster and easier web
development.
Slide 11
Slide 11 text
HTML, CSS, and JavaScript
components for building stuff
on the web.
Slide 12
Slide 12 text
Most popular front-end framework
and OS project on GitHub.
Slide 13
Slide 13 text
So #BYOB?
Slide 14
Slide 14 text
This isn’t really a talk about
building frameworks.
Slide 15
Slide 15 text
This is about building
design systems.
Slide 16
Slide 16 text
A design system is everything that
makes up your product.
Slide 17
Slide 17 text
Like any other product, Bootstrap
is a design system.
Slide 18
Slide 18 text
Treat design systems as open
source projects.
Slide 19
Slide 19 text
#byob: build your own Bootstrap.
Slide 20
Slide 20 text
Story time.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Why?
Slide 28
Slide 28 text
Because fuck Bootstrap.
Slide 29
Slide 29 text
Because building systems to solve
problems just works.
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Because investing in your team is
never a bad idea.
Slide 35
Slide 35 text
!
Slide 36
Slide 36 text
" "
!
Slide 37
Slide 37 text
# "
!
Slide 38
Slide 38 text
Because the open source
mentality yields amazing results.
Slide 39
Slide 39 text
432
Contributors
7k
Commits
60k
Stars
21k
Forks
@twbs/bootstrap
Slide 40
Slide 40 text
24
Contributors
300
Commits
3
Stars
0
Forks
@github/primer
$
Slide 41
Slide 41 text
Because great design systems are
usable by your entire team.
Slide 42
Slide 42 text
Your team is full of
designers.
Slide 43
Slide 43 text
Your team is full of
developers.
Slide 44
Slide 44 text
Your team is full of
people who want to learn.
Slide 45
Slide 45 text
Help awesome people do
awesome shit.
Slide 46
Slide 46 text
Breaking interfaces down into
patterns has been immensely
helpful in learning and re-
evaluating the best possible code
to implement them.
— Dan Cedarholm, on Pears
https://github.com/simplebits/Pears
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
How?
Slide 50
Slide 50 text
Build and document your design
system within the product.
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Or, build the components and
document them in a library.
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
// Body scaffolding
@body-bg: #fff;
@body-color: @gray-dark;
!
// Links
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
1
2
3
4
5
6
7
Slide 56
Slide 56 text
// Make a generic class as a mixin
.button {
...
}
!
// Use it everywhere you need
.call-to-action {
.button();
}
1
2
3
4
5
6
7
8
9
Slide 57
Slide 57 text
Design takes iteration, and design
systems make it easier.
Slide 58
Slide 58 text
.main-nav { … }
.profile-nav { … }
.hidden-nav { … }
#productNav { … }
#footerLinks { … }
1
2
3
4
5
.nav { … }
.nav-tabs { … }
.nav-list { … }
1
2
3
Slide 59
Slide 59 text
Enforce coding standards for
everyone on your team.
Slide 60
Slide 60 text
// Tables
.table { ... }
.table-striped { ... }
.table-bordered { ... }
.table-condensed { ... }
!
// Forms
.form-inline { ... }
.form-search { ... }
.form-horizontal { ... }
!
// Nav
.nav { ... }
.nav-tabs { ... }
.nav-pills { ... }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Stop writing new CSS.
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Stop writing new JavaScript.
Slide 67
Slide 67 text
Component-level design works
outside the browser, too.
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
In short…
Slide 70
Slide 70 text
Remember to design systems of
components, not just pages.
Slide 71
Slide 71 text
#dream: docs rule everything
around me.
Slide 72
Slide 72 text
Build your design systems like an
open source project.
Slide 73
Slide 73 text
Thanks, nerds!
Questions?