This repository was archived by the owner on Jan 5, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathwhat-is-a-toolkit.html
158 lines (142 loc) · 24.6 KB
/
what-is-a-toolkit.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Fabricator is a tool for building modular website design systems.">
<meta property="og:url" content="http://fbrctr.github.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Fabricator - Build your UI toolkit" />
<meta property="og:description" content="Fabricator is a tool for building modular website design systems." />
<meta property="og:image" content="http://fbrctr.github.io/assets/toolkit/images/social.png" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@lukeaskew">
<meta name="twitter:title" content="Fabricator - Build your UI toolkit">
<meta name="twitter:description" content="Fabricator is a tool for building modular website design systems.">
<meta name="twitter:image:src" content="http://fbrctr.github.io/assets/toolkit/images/social.png">
<title>What's a "toolkit"? - Fabricator</title>
<!-- toolkit styles -->
<link rel="stylesheet" href="../assets/toolkit/styles/toolkit.css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- /toolkit styles -->
</head>
<body>
<svg style="display: none">
<symbol id="symbol-bolt" viewBox="0 0 24 39">
<path d="M15.55 24.013L23.224 0 11.767 17.797l-3.31-3.853L0 38.454l11.932-18.378 3.62 3.937z"/>
</symbol>
<symbol id="symbol-word-mark-outline" viewbox="0 0 512 230.4">
<g>
<path d="M421.4 196.5c-.2-1.5-1.6-2.7-3.1-2.5l-149.9 8.4 5.7-14.2c.2-1-.1-2-.8-2.7-.7-.7-1.7-1-2.6-.9L93.1 217.5c-1.5.3-2.6 1.7-2.4 3.3.2 1.6 1.6 2.7 3.1 2.6l155.9-9.6-4.9 13.4c-.1.9.2 1.9.9 2.5.6.5 1.3.8 2 .8.2 0 .4 0 .6-.1L419 199.8c1.5-.3 2.6-1.7 2.4-3.3zm-170.1 27.3l4.8-12.9c.1-.9-.2-1.8-.8-2.4-.6-.6-1.3-.9-2.1-.9h-.2l-103.5 5.5 117.8-21.9-5.6 13.7c-.2.9 0 1.9.7 2.6.6.7 1.5 1.1 2.5 1l102.4-4.6-116 19.9zM325 69.3c4-.2 9-.5 13-.8V53.8c-4 .3-9 .7-13 .9v14.6zM78 57.3c4 .8 9 1.6 13 2.3V42.7c-4-.9-9-1.9-13-3v17.6zM179 68.9c4 .2 8.5.4 12.6.6.5 0 .4-.1 1.4-.1V55.1c-5-.2-10-.5-14-.8v14.6zM140 50.5c-4-.5-9-1.1-13-1.7v15.6c4 .5 9 1 13 1.4V50.5zM127 145.8c5-.7 10-1.4 16-2v-68c-6-.5-11-1-16-1.6v71.6z"/><path d="M511.1 179.3c-.8-1.4-3.4-9.1-5.8-47.5-1.3-20.4-2.2-46.8-2.6-71.5 5.5-2 7.3-7.3 7.3-11.9V18.8c0-5.4-2.4-8.3-4.4-9.8-2.4-1.8-5-2.1-6.4-2.1-3.1 0-5.8 1.2-7.6 2.3-5.6 3-12.7 5.9-20.9 8.6-.2.1-.3.1-.5.2-3.8 1.5-5.9 4.5-6.7 7.5l-1.8.6c-.2.1-.4.1-.5.2-1 .4-2 .9-2.8 1.6-.2-.2-.3-.4-.5-.6-2-2.2-4.8-3.5-7.8-3.5-1.2 0-2.3.2-3 .4-7.4 1.8-15.4 3.5-23.8 5.1-.4.1-.8.2-1.3.3-2.5.8-4.9 2.7-6.4 5.4-.5-1-1.2-1.8-2.1-2.5-1.4-1.1-3.2-1.8-5-1.8-.5 0-1 .1-1.6.2-.3.1-2 .4-2.6.5-13.9 2.2-28.9 4.2-44.5 5.7-1.3.1-2.6.6-3.7 1.3-.1.1-.3.2-.4.3-1.2.9-2.1 2.2-2.6 3.6-1.9-2.6-5.1-4.1-8.9-4.1-.2 0-.3.2-.5.2h-.1c-.2 0-.4-.1-.7-.1-6.9.6-14 1-21.2 1.4h-.8c-5.7.2-8.8 2.4-10.3 4.3-1.3 1.6-1.9 3.2-2.1 4.4-.2 0-.3.1-.5.1-1.3-4.6-5.5-7.9-10.8-7.9-.1 0-.3-.1-.3-.1v.1c-7.5.3-15.2.5-22.8.6h-.3c-3.1 0-7.3.7-10 4.1-.4.6-.8 1.2-1.1 1.8-1-3.3-4-5.8-7.7-5.8h-1.7c-10.4 0-20.9-.2-31.1-.5h-1c-2.1 0-4.1.8-5.6 2.2-1.5 1.5-2.5 3.6-2.5 5.7v.3h-.7c-1.1 0-2.1.2-3.1.6-.2-5.1-4.3-9.1-10-9.6h-.5c-8.2-.4-16.3-.9-24.2-1.5h-.2c-1.4-.1-2.7-.2-3.1-.3H170.5c-2 0-4.1.7-5.6 2.1-1.6 1.5-2.8 3.6-2.8 5.9v.1h.3v.1h-.8c-1.6 0-3.5.5-4.5 1.3V46c0-4.7-3.3-8.6-8.3-9.9-.5-.1-1-.3-1.5-.3-8.3-.9-16.4-2-24.2-3.1-1-.2-2.3-.4-2.8-.5-.6-.1-1.2-.2-1.9-.2-1.8 0-3.7.6-5.1 1.7-1.9 1.5-3.2 3.8-3.2 6.3v.3h-.6c-.5 0-1.4.1-1.4.2v-3.7c0-4-2.9-7.3-6.8-7.9-.6-.1-2.8-.4-5.2-.9-6.2-1.2-12.2-2.6-17.8-4-3-.9-6-2-6.1-2-.9-.4-1.9-.5-2.9-.5-1.6 0-3.2.5-4.5 1.4-.8.5-1.4 1.2-1.9 1.9-.6-2.9-2.9-5.3-5.9-6.1-.4-.1-1.2-.3-1.6-.5-.1 0-.2 0-.2-.1-11.5-3.8-20.5-7.8-26.8-12-2.5-1.8-5.3-3.9-5.9-4.3C20.8.6 19.1 0 17.4 0c-1.2 0-2.6.3-3.7.8C10.9 2.1 9 5 9 8v.3h-.6c-1.3 0-2.5.3-3.7.9C1.8 10.6 0 13.6 0 16.8v8.5l1.7 169.4c0 3.3 2 6.2 4.9 7.6 1.1.5 2.4.8 3.6.8 2 0 3.9-.7 5.4-1.9 1.5-1.2 3.3-2.5 5.4-3.8 2.2-1.3 3.6-3.6 4-6.1 1.3-1 2.9-2.1 4.6-3.1 2.4-1.5 3.8-4.1 3.8-6.9L32 74.9c.3.1.5.1.8.2.2.1.5.1.7.2l.5.1.4.1c.2.1.5.1.7.1 1.5.3 3.3.7 3.3.7.6.1 1.2.2 1.8.2 1.9 0 4-.7 5.5-1.9 2-1.6 3.4-4 3.4-6.6v-.8h.2c1 0 1.8-.2 2.8-.6v106.8c0 2.6 1.2 5.1 3.2 6.7 1.5 1.1 3.3 1.8 5.1 1.8.7 0 1.5-.1 2.2-.3 1.9-.5 3.8-1 6.1-1.6 3.8-.9 6.4-4.3 6.4-8.2v-.5c1-.1 1.2-.3 1.8-.4.5 1.3 1.4 2.5 2.5 3.5 1.5 1.2 3.4 1.9 5.4 1.9.6 0 1.1-.1 1.7-.2 1.9-.4 4.1-.8 6.4-1.2 4-.7 7.1-4.3 7.1-8.3v-.6c0-.1.9-.2 1.4-.3.4 1.8 1.3 3.5 2.8 4.7 1.5 1.2 3.4 1.9 5.4 1.9.6 0 1.1-.1 1.6-.2 1.3-.2 5.7-1.1 9.9-1.8 5.6-.8 11.3-1.5 17-2.1 5.6-.4 11.6-3.8 12.5-10.1.8-.3 1.3-.6 2.3-1v.2c0 2.4 1 4.6 2.8 6.2 1.6 1.5 3.6 2.3 5.8 2.3h.7c2.2-.2 4.6-.3 6.6-.5 4.4-.3 8.2-4 8.2-8.5v-.8s.3 0 .6-.1c2.6-.2 4.7-1.7 6-3.7 1.3 3 2.6 5.6 4.1 7.8 1.6 2.3 4.2 3.7 7 3.7h.3c2.5-.1 4.7-.2 6.9-.3 1.9-.1 3.6-.7 5-1.8 1.5 1.1 3.2 1.7 5 1.7h.5c.1 0 .4.2.7.2 10.3-.3 20.8-.2 31.2-.2h1.7c3.5 0 6.5-2.3 7.8-5.3 1.8 3 5.2 5.1 9.7 5.1.1 0 .3-.1.4-.1 8 .1 16.1.3 24 .6h.7c3.3-.1 6.2-1.4 8.3-3.5.9-1 1.6-2 2-3 .5 4 3.8 7.1 8 7.3 2.2.1 4.3.2 6.3.3h.5c2.2 0 4.1-.8 5.6-2.3 1.7-1.6 2.5-3.8 2.5-6.2v-.8h.7c.3 0 .3 0 1.3-.1v2.1c0 4.4 3.2 8.1 7.6 8.5 2 .2 4 .3 6.2.5h.7c2.1 0 4.2-.8 5.8-2.2 1.8-1.6 2.8-3.9 2.8-6.3v-.9h.2c2 0 3.8-.7 5.3-2.1 1.6-1.5 2.5-3.7 2.5-5.9V67c3-.3 7-.7 10-1.1v95c0 4.3 3.3 7.9 7.6 8.4 2 .3 4.1.5 6.3.8.4.1.8.1 1.2.1 2.1 0 4.3-.7 5.8-2.1 1.8-1.6 3.1-3.9 3.1-6.4v-.8h.1c1.9 0 3.8-.7 5.2-2 1.7-1.5 2.7-3.7 2.7-6V61.7c0-.1.8-.1 1.2-.2 1.1-.1 2.8-.4 3.1-.5 1.4-.2 2.7-.8 3.7-1.6V162c0 1.1-.1 2.7.4 4.4 1.2 4.4 4.6 7.5 9.2 8.3.2 0 .4.1.6.1 8.1 1.5 15.8 3.1 22.9 4.9.1 0 .3.1.4.1.5.1 1.4.3 2.7.3 2.6 0 5.1-.8 7.1-2.3 2.3-1.8 3.9-4.3 4.4-7.3.4-.1 1.4-.2 1.4-.4v7.1c0 3.7 2.3 7 5.8 8.1 2.1.7 4.1 1.3 6.1 2 .9.3 1.8.5 2.8.5 1.8 0 3.4-.5 4.8-1.6 2.2-1.6 3.5-4.2 3.5-6.9v-.8h.5c.6 4.3 1.3 7.9 2 10.8.6 2.4 2.1 4.5 4.3 5.6 2.5 1.3 4.8 2.6 6.7 3.9 1.4 1 3.1 1.5 4.8 1.5 2.1 0 4.1-.8 5.7-2.2 2.1-1.9 3-4.5 2.8-7.1h.3c2 0 3.9-.7 5.3-2 2.7-2.5 3.4-6.5 1.7-9.7zM57 31.9c0 .8-.3 1.5-.9 1.9-.4.3-.8.4-1.3.4-.2 0-.5 0-.7-.1 0 0-3.3-1.1-5.8-2-.5-.2-1.1-.4-1.6-.6-.3-.1-.6-.2-.7-.3h-.1C38.3 28.6 32 25.8 26 22.8v22.3c6 2.1 13.6 4.2 21.4 6.1h.1c.6.2 1.2.3 1.8.5C50.4 52 51 53 51 54v5.2c0 .7-.2 1.4-.8 1.8-.4.3-.9.5-1.4.5-.2 0-.3 0-.5-.1 0 0-2-.4-3.5-.8-.1 0-.2 0-.3-.1l-.5-.1-.6-.1c-.1 0-.2-.1-.3-.1-6.1-1.5-11.9-3.2-17.2-4.8l1.6 125.9c0 .8-.4 1.6-1.1 2-2.3 1.4-4.3 2.9-6.1 4.3-.4.4-1 .5-1.5.5-.3 0-.7-.1-1-.2-.8-.4-1.4-1.2-1.4-2.1L15 16.4V8c0-.9.5-1.7 1.3-2.1.3-.2.7-.2 1-.2.5 0 1 .2 1.4.5 0 0 3.3 2.5 6.2 4.5 6.8 4.5 16.3 8.8 28.3 12.7h.1s1.1.4 1.9.6c1 .3 1.7 1.2 1.7 2.3v5.6zm45 125.9c0 1.1-.7 2.1-1.8 2.3-2.3.4-4.3.8-6.2 1.2h-.4c-.5 0-1.2-.2-1.6-.5-.5-.4-1-1.1-1-1.8V69.5c-4-.7-9-1.5-13-2.3v95.9c0 1.1-.8 2-1.9 2.3-2.3.6-4.4 1.1-6.3 1.6-.2.1-.4.1-.6.1-.5 0-.9-.2-1.3-.5-.6-.4-.8-1.1-.8-1.8V29.3c0-.8.3-1.5.9-1.9.4-.3.8-.4 1.3-.4.3 0 .5.1.8.2 0 0 3.3 1.3 6.7 2.2 5.8 1.4 11.9 2.8 18.2 4 2.9.5 5.3.9 5.3.9 1.1.2 1.8 1.2 1.8 2.3v121.2zM153 74v73.4c0 4.1-4.2 5.6-6.8 5.8 0 0 .1 0 0 0-5.8.6-11.6 1.4-17.3 2.2-4.9.8-10.2 1.9-10.2 1.9h-.4c-.5 0-1-.2-1.5-.5-.5-.4-.8-1.1-.8-1.8V39.9c0-.7.3-1.4.9-1.8.4-.3.9-.5 1.4-.5.2 0 .4 0 .5.1.8.2 2.6.5 3.3.6h.1c7.8 1.1 16 2.2 24.4 3.1.2 0 .7.1.8.1 2.2.5 4.6 2 4.6 4.4v22.4c0 .2-.3.7-.4 1.1 1 .7 1.7 1.6 2 3.1h-.1c0 .3-.2.5-.2.8 0 .4-.3.6-.3.7zm59.6 73c-.3.9-1.2 1.5-2.1 1.5-2.3.1-4.6.2-7 .3h-.1c-.8 0-1.5-.4-1.9-1-4.9-7.2-8.8-20-11.6-38-2-12.6-2.9-24.5-3.3-30.6-2.5-.1-5.6-.3-7.6-.4V148c0 1.2-.9 2.2-2.1 2.3-2.1.2-4.2.3-6.3.5h-.2c-.6 0-1.2-.2-1.6-.6-.5-.4-.8-1.1-.8-1.7V46.1c0-.7.3-1.3.8-1.7.4-.4 1-.6 1.6-.6h.2s1.6.1 3.3.3l.1.3c8 .6 16.2.8 24.5 1.8h.1c.1 0-.2-.3-.1-.3 2.3.2 4.6 1.3 4.6 3.9v22.6c0 4-2.6 6.2-6 6.9 1.3 20 6 56.5 15 65.1.5.8.9 1.7.5 2.6zm4.4-13.3c-1 .7-2.6 2-3.4 3.5-1.8-3.4-4-9.9-6.3-22-1.8-9.3-3.3-21-4.2-32 3.8-2.2 6-6.1 6-10.6v-2.1c1 .3 1.6.9 2.4.9 0 0 0-.1.1-.1.4.1.7 0 1.1 0H214.3c.1 0-.1 0 0 0 1 0 1.9.1 2.9.1v62.3zm26-77.2v81.6c4 0 7.2.1 10.2.1h1.7c.6 0 1.2.2 1.7.6.4.4.7 1 .7 1.6v5.3c0 1.3-1 2.5-2.3 2.5h-1.7c-10.5 0-21.1-.1-31.5.3-.5 0-.8-.1-.9-.1h-.1c-.6 0-.9-.3-1.3-.7-.5-.4-.5-1.1-.5-1.7v-5.1c0-1.2.7-2.4 1.9-2.5 0 0 .6-.2 1.6-.2 0 0-.1.1 0 .1 3.1-.1 6.5 0 9.5-.1V56.4c-3-.1-6.1-.1-9.1-.2H221.5c-.1 0-.3 0-.4-.1h-.2c-1.2-.1-1.9-1.1-1.9-2.3v-5c0-.6.2-1.2.6-1.7.4-.4 1-.7 1.6-.7h.8c10.3.3 20.8.5 31.3.5h1.7c1.3 0 2.3 1 2.3 2.3v5.1c0 .6-.2 1.2-.7 1.7-.4.4-1 .7-1.6.7h-1.9c-3.1-.1-6.1-.2-10.1-.2zm10 12.4v63.5h-4V71c1-.4 2.6-1.1 3.5-2 .1 0 .5-.1.5-.1zm48.5 77.9c-.7.7-2 1.6-4.2 1.6h-.2-.1c-8-.3-16.2-.5-24.3-.6h-.5c-3.8 0-5.3-2.7-5.3-4.5V51.5c0-.8.3-1.8 1-2.8 1.1-1.3 3-2 5.7-2h.2c7.7-.1 15.5-.3 23.1-.6h.3c2.7 0 5.6 1.6 5.6 5.1v19.3c0 1.3-1.3 2.8-2.5 2.8H294c-1.3 0-2.1-1.5-2.1-2.8V56.1c-5 .1-9 .2-13 .3v81.8c4 .1 8 .2 13 .3v-14.4c0-1.3.8-1.9 2.1-1.9h6.3c1.3 0 2.5.6 2.5 1.9v19.2c.2.5 0 2.2-1.3 3.5zM299 83.4v32.8h-4.9c-4.4 0-8.1 3.5-8.1 7.9v.1h-.7c-.5 0-1.3.2-1.3.3V87.6c0 .1.9.6 1.3.6h6.3c3.2 0 6.4-2.2 7.4-4.8zm51 65.6c0 .7-.5 1.3-1 1.7-.4.4-1.1.6-1.7.6h-.3c-2.1-.2-4.5-.4-6.6-.5-1.2-.1-2.4-1.1-2.4-2.3V78.3c-4 .3-9 .5-13 .8v68.2c0 .6-.3 1.3-.7 1.7-.4.4-1 .6-1.6.6h-.1c-2.1-.1-4.2-.2-6.3-.4-1.2-.1-2.2-1.1-2.2-2.3v-97c0-.5.2-4.5 7.2-4.8h.8c7.3-.4 14.6-.9 21.6-1.5h1c3.1 0 5.4 2 5.4 4.9V149zm59-102.8c-.1 0-2.1.3-3.1.5-4.8.8-9.9 1.5-14.9 2.2V153c0 .7-.2 1.3-.7 1.8-.4.4-.9.6-1.5.6h-.3c-2.1-.3-4.3-.6-6.4-.8-1.2-.1-2.1-1.1-2.1-2.3v-102c-6 .7-12.3 1.4-18.5 2h-.1l-.5.1h-.2c-.6 0-1.3-.2-1.7-.6-.5-.4-.9-1.1-.9-1.7V45c0-.7.5-1.4 1.1-1.8l.2-.1c.3-.2.7-.4 1.1-.4 15.8-1.5 30.9-3.4 44.9-5.7.8-.1 2.4-.4 2.7-.5h.5c.5 0 1.1.2 1.5.5.5.4.9 1.1.9 1.8l.1 5.2c-.1 1-1 2-2.1 2.2zm47 113.2c0 2.6-1.5 4-2.4 4.7-.9.7-2.4 1.1-3.7 1.1-.7 0-1.2-.2-1.4-.2-.1 0-.1-.1-.2-.1-7.3-1.8-15.3-3.5-23.6-5-.1 0-.2 0-.4-.1-2.2-.4-3.7-1.8-4.2-3.9-.3-1.1-.1-2.1-.1-2.5V40.6c0-3.5 2.4-5.2 4-5.6.1-.1.2-.1.4-.1 8.5-1.6 16.7-3.3 24.2-5.1.3-.1.9-.2 1.6-.2 1.4 0 3.1.6 4 1.6 1.1 1.2 1.9 3 1.9 5.3v122.9zm49.6 25.3c-.4.4-1 .6-1.6.6-.5 0-.9-.1-1.3-.4-2.1-1.4-4.5-2.9-7.3-4.3-.6-.3-1-.9-1.2-1.5-2.6-11.3-4.7-33-6.2-64.5-1.1-22.7-1.4-44.6-1.6-55.4-2.1.6-4.5 1.1-6.5 1.7v109.6c0 .8-.5 1.5-1.1 1.9-.4.3-.9.4-1.4.4-.3 0-.5 0-.8-.1-2-.7-4-1.4-6.2-2.1-1-.3-1.5-1.2-1.5-2.2V28.9c0-1.5.3-4.4 3.4-5.6.1 0 .1 0 .1-.1 8.6-2.9 15.9-5.9 21.9-9.1 1-.6 2.8-1.5 4.7-1.5 1.2 0 4.9.5 4.9 6.2v29.8c1 1.8-.3 5.3-3.6 6.5-.1 0-.1.1-.2.1-1.1.3-2.2.7-3.4 1.1.6 45.4 3.6 115.2 9.2 125.7.7.8.5 2-.3 2.7z"/><path d="M480 50.8c4-1.2 9-2.5 13-3.8V25.7c-4 1.9-9 3.7-13 5.4v19.7zM431 151.1c4 .9 9 1.8 13 2.8V40.7c-4 1-9 1.9-13 2.8v107.6z"/>
</g>
</symbol>
<symbol id="symbol-head-outline" viewbox="0 0 512 512">
<path d="M445.5 268.1c0-20.1-9.2-38.1-23.6-50.1 2-1.4 5.6-1.4 7.4-1.3 1.6.3 4.9 1.1 8.6 3.3 0 0-2.2-9.2-4-13.3-.1-.2-.1-.3-.2-.4-1-2.4-2.3-4.5-3.6-6.4H443v-31.4h-12c-1.1-44.5-19-86.2-50.6-117.8C347.7 18 304.3 0 258.1 0s-89.6 18-122.3 50.7C104.2 82.3 86.3 124 85.2 168.5h-12v31.4H88c-3.5 3.9-7.3 8.7-10 14.1l-.1.1s-6 14.4-11.4 18.1c0 0 11.9 1.3 27.1-4.3h.2c-4.9 11.2-9.7 24.7-11.5 36.8-.9 5.1-3.2 16.8-5.8 19.6 0 0 9.4-4.2 16-8.1 3.1-1.7 7.2-4.7 13.3-9.8-.2.4-.3.9-.5 1.4-2.8 7.5-4.4 12.9-5.1 16.9 0 0 0 .3-.1.7-.2 1-.3 1.9-.3 2.7-.4 4-.5 10.7 1.6 16.1 0 0 5.5-8.2 10-8.6 1.7 0 3.4.2 4.4.9.1 0 .1.1.2.2-1.4 1-2.8 2.1-4.2 3.5-7.6 7.4-11.4 18.2-11.3 32 .1 14.7 5.1 27.6 13.5 36.4-1.5 3.3-6.4 16.5 1.5 35.4.6 1.4 1.9 2.4 3.4 2.7 1.5.3 3-.3 4.1-1.4 2.6-2.9 6.9-6.6 10.3-8.4 2.1 7.5 7.9 21.6 22.8 30.9 5.2 15.4 16.6 26.7 27.8 32 2.7 3.1 13.1 14.5 30.7 25.8 18.7 12.1 49.5 26.4 89.9 26.4 34.7 0 62.3-6 82.1-17.9 14.8-8.9 25.2-21 30.9-35.9 3.2-8.3 2.7-16.6-1.2-22.8-1.2-1.9-2.7-3.6-4.5-4.9l-.4-.4c-1.9-1.5-2-3.1-1.9-4.2.9-2.4 1.1-4.9.6-7.2-.5-2.3-2.3-6.5-8.5-8.2-7.6-2-15.9 3.8-21.4 8.9v-19.7h7.4c4.5 0 8.7-2.6 10.6-6.6 1.9-4 1.1-8.7-2-12.5-1.5-1.8-2.2-3.3-2.7-4.5 7-2.5 13.8-6.8 14.9-14 .4-2.7-.1-5.3-1.4-7.5 7.5-5.9 16-17.7 12.7-34.9 15.7-11.8 25.8-30.6 25.8-51.6zM423.4 208c-3.9.7-7 2.3-9 4.6-2.8-1.7-5.8-3.2-8.8-4.5-.8-3.3-2.4-6-4.3-8.3h17.3c1.7 1.8 4.1 4.5 5.9 8-.3.1-.7.2-1.1.2zm-24.6-17.1v-13.5h16.8v13.5h-16.8zm35.2-13.5v13.5h-14v-13.5h14zm-12-8.9h-29.2v-12c0-2.6 2.1-4.7 4.7-4.7h23.2c.7 5.5 1.2 11 1.3 16.7zM316.4 299c-1.2-1.7-2.2-3.5-3.2-5.3h7.7c.8 1.8 1.6 3.6 2.6 5.3h-7.1zm9.7 4.5c1.5 2.2 3 4.4 4.8 6.4.1.3.3.6.7 1.1 4.3 5.6 0 3.2-1.7 2.1-2-1.4-3.9-3-5.7-4.7-1.6-1.5-3.1-3.2-4.5-4.9h6.4zM307 266.9c1 .2 5.3 1.2 8.5 7.9h-8.2c-.2-1.6-.3-3.2-.4-4.9v-1.8c.1-.4.1-.8.1-1.2zm-30.6-11.6c-.8-3.8-1.8-7.5-3.2-11h36c3 0 5.5 2.5 5.5 5.5s-2.4 5.4-5.3 5.5h-33zm40.2 23.9c.6 3.4 1.5 6.7 2.6 9.9h-8c-1.3-3.2-2.3-6.5-3-9.9h8.4zm.1-41.6c-.2-.1-.3-.2-.5-.3 1.3-1.9 2.6-3.7 4.1-5.4h6c-4.5 5-8.5 5.6-9.6 5.7zm7.9-10.2c2.4-2.2 5-4.3 7.7-6.1h3.1c-1.9 1.8-3.7 3.8-5.3 5.8-.1.1-.1.2-.2.2h-5.3zm-17.7 8h-38.1c-11.1-19.1-31.7-32-55.3-32.3h-17.8c-6.7 0-13.2 1-19.4 2.9 3.7-2.7 8.7-4.9 14.7-6.1h22.1c14.7 1.6 39.4 5.3 61.1 13.6 3 1.4 11.3 6.1 13.7 15.4 0 0 6.1-13.9 7.1-23.3.2-1 .3-2.1.3-3.1l21.3 8.6c1.1.4 2.2.4 3.3 0l23.5-9.2c1.7-.5 4.9-1.4 10.3-2.1h32c2.2.9 5.1 2.4 7.4 4.5-3.8-.7-7.7-1.2-11.7-1.2h-17.8c-23.4 0-45 12.4-56.7 32.3zm-148.2-3.5c-1.8 2.7-3.4 5.5-4.8 8.4h-7.5c1.7-3 3.7-5.8 6-8.4h6.3zm-2-4.5c2.2-2.1 4.6-4 7.1-5.6h3.3c-1.8 1.8-3.5 3.7-5.1 5.6h-5.3zm-4.7 17.4c-.7 1.8-1.3 3.5-1.8 5.4H142c.6-1.8 1.3-3.6 2.1-5.4h7.9zm-2.9 9.8c-.7 3.2-1.1 6.6-1.3 10h-8.6c.2-3.4.7-6.7 1.5-10h8.4zm-1.4 14.5c0 1.9.1 3.8.3 5.6h-8.6c-.2-1.6-.3-3.2-.4-4.9v-.8h8.7zm1 10.1c.6 3.4 1.5 6.7 2.6 9.9h-8c-1.3-3.2-2.3-6.5-3-9.9h8.4zm4.3 14.4c.8 1.8 1.7 3.6 2.6 5.4h-7.1c-1.2-1.7-2.2-3.5-3.2-5.4h7.7zm5.2 9.9c1.5 2.3 3.1 4.4 4.8 6.5.1.2.2.3.4.6 4.6 6-3.7.9-3.7.8-1.2-1-2.4-2-3.5-3.1-1.6-1.5-3.1-3.2-4.5-4.9h6.5zm-1.5-35.4c0-8.6 1.9-16.7 5.4-23.9.3-.3.5-.7.6-1.2 9.2-18.3 28.2-30.9 50-30.9 30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.2-56-56zm-16.9-99.6v-12c0-2.6 2.1-4.6 4.6-4.6h82.2c2.6 0 4.6 2.1 4.6 4.6v12h-91.4zm20.7 8.9v13.5h-16.8v-13.5h16.8zm79.7 0h5.3v13.5h-16.8v-13.5h11.5zm-16 0v13.5h-16.8v-13.5h16.8zm-21.2 0v13.5h-16.8v-13.5H203zm-38.1 0h16.8v13.5h-16.8v-13.5zm121 22.5c1.1 2.5.2 5.9-.9 8.4-7.5-3.4-15.5-6.1-23.4-8.4h24.3zm-14.7-9v-13.5H288v13.5h-16.8zm-4.4 0H250v-13.5h16.8v13.5zm25.7 0v-13.5h16.8v13.5h-16.8zm31.7 9l-5.9 2.3-5.6-2.3h11.5zm-10.5-9v-13.5h16.8v13.5h-16.8zm42.6 0v-13.5h16.8v13.5h-16.8zm-4.5 0H335v-13.5h16.8v13.5zm25.7 0v-13.5h16.8v13.5h-16.8zM306.2 16.1c25.3 7.7 48.6 21.6 67.8 40.9 23.8 23.8 39.3 53.5 45.3 85.9h-21.8c-7.5 0-13.7 6.1-13.7 13.7v12h-23.1c-.7-31.8-9.1-63.8-24.5-92.9-11.5-21.9-26.5-41.1-43.9-56.7-5.8-7.5 12.4-3.3 13.9-2.9zm-48.1-7.2c2.4 0 4.7.1 7.1.2.2.1.3.3.5.4 25.6 16.7 47.3 40.9 62.7 70.2 14.7 27.8 22.7 58.4 23.4 88.8h-69.9c-1.5-61.2-33.6-116.7-85.1-147.7C216 13 236.7 8.9 258.1 8.9zM131.5 68.7h49.7l-.2.3-7.3 5.7 11.2 9.5-1.8 2.2-7.3 8.3 9.2 9.4-2.1 2.5-6.7 7.7 4.1 4.1.9 1.1H103c6.3-18.3 15.9-35.5 28.5-50.8zm-31.3 59.8h90.5c1.7 0 3.3-1 4-2.6.7-1.6.5-3.4-.6-4.8l-5.9-7.1 5.9-7.1c1.4-1.7 1.4-4.1 0-5.7l-5.9-7.1 5.9-7.1c1.4-1.7 1.4-4.1 0-5.7l-5.9-7.1 5.9-7.1c1.1-1.3 1.3-3.2.6-4.8-.7-1.6-2.3-2.6-4-2.6h-51.3c.9-.9 1.8-1.9 2.7-2.8 10.1-10.1 21.3-18.7 33.3-25.7 9.6-4.7 15.8-3.2 18.9-1.6.6.3 1.1.7 1.7 1.1.5.4.7.6.7.6h.2c46.1 29.8 74.6 80.9 76.1 137.1h-32.7v-12c0-7.5-6.1-13.6-13.6-13.6h-82.2c-7.5 0-13.6 6.1-13.6 13.6v12H94.2c.3-13.6 2.4-27 6-39.9zm39 48.9v13.5h-16.8v-13.5h16.8zm-21.3 0v13.5h-16.8v-13.5h16.8zm-35.8 13.5v-13.5h14.5v13.5H82.1zm26.7 95.8c1.1-6.1 5.6-18.9 11.3-32 .4-.7.7-1.4 1.1-2.3 5.5-13.4 5.5-20.2 5.5-20.2-3.4 5-8.4 10.5-11.8 14-.2.1-.4.3-.6.5-8 7.6-17.6 16-23.3 19.9 1.5-11.6 6.5-25.1 11.4-36.2 2.7-5.8 8.8-16.3 8.8-16.3-5.5 3.2-11.6 4.1-13.8 4.4l-12.2 1.2c3.8-8.6 11.6-16.3 15.5-19.8h68.9c-4.7 3.7-7.8 8.2-8.8 13.2-3.8 2.4-7.4 5.1-10.7 8.3-12.4 11.8-19.5 27.7-20 44.6v4.2c.2 6.9 1.5 13.7 3.8 20-2.5.2-6.1.9-10.1 2.3-.9-1.5-2.1-2.6-3.1-3.4-3.5-2.5-8.3-2.7-11.9-2.4zm51.9 87.8c-2.4 4-8.8 16.8-7.5 38.9 0 .3 0 .5.1.8-7.3-7.4-10.4-16-11.6-20.5-1.1-4.7-1.6-9.6-1.6-9.6-5.1.4-12.6 5.7-12.6 5.7-2.2 1.3-4.2 2.9-6 4.3-2.6-9.3-1.4-16.2-.3-19.6 2.2 1.4 4.4 2.5 6.8 3.4 3.7 1.4 7.4 2 11.1 2 7.5 0 14.9-2.7 21.5-7.8v2.4zm0-14.8l-.2.2c-8.5 9.8-19.2 13.3-29.4 9.6-12.9-4.8-21.7-19.8-21.8-37.5-.1-11.2 2.8-19.8 8.5-25.4 8-7.8 19.1-7.7 19.2-7.6.3 0 .6 0 .9-.1 3.2 5.8 7.3 11.2 12.2 15.9 3.3 3.1 6.8 5.9 10.6 8.2v36.7zm238.9 1c-.4 2.7-5.2 7.7-20.6 9.6-15.4 1.9-32.5-3.4-46.2-7.6-.4-.1-.9-.3-1.3-.4-9.5-3.2-25-10.4-25-10.4.2 4.5-3.3 8.6-5.8 11-.3.3-.7.6-1.1.9-4.3 3.6-9.3 7.6-14 7.1-4.5-.6-5.8-2.7-6.3-4.3-.8-2.4-.5-5.5.3-8.2.5-1.3 1.5-3.6 3.2-6 1.9-2.7 7.3-7.4 8.6-7.4 0 0-7.5-6-14.4.7-.2.1-.4.3-.6.5-4.9 4.9-8.3 15.5-5.5 23.4 2 5.8 6.9 9.5 13.7 10.3.7.1 1.4.1 2 .1 7.6 0 14-5.2 18.7-9.2 1.8-1.5 4-3.3 5-3.7 2.9-.9 11.8 1.8 19.8 4.3 14.5 4.5 32.6 10.1 50 8 1.3-.2 3-.4 4.8-.8.7 2.2 2 4.9 4.4 7.8.6.8 1.3 1.9.8 3-.4.9-1.4 1.5-2.5 1.5H213.5c-11.6 0-21.1 9.5-21.1 21.1 0 11.6 9.5 21.1 21.1 21.1h166.4l1.3-1.6c4.6-5.6 13.6-13.3 18.1-12.1 1.8.5 2 1.2 2 1.5.3 1.5-.9 4.4-3.5 6.7-1.2.9-7.5 5.9-7.2 11 0 0 7.6-3.3 12.4-2.3 2.4.7 4.3 2.1 5.6 4.2 2.4 3.7 2.5 9.3.4 14.8-12 31.5-48.2 48.1-104.7 48.1-38.1 0-67.1-13.5-84.7-24.8-19.2-12.3-29.5-24.9-29.6-25l-.7-.8-1-.4c-11.8-5.3-25-19.8-26.2-39.1-1.1-18.4 3.9-30.5 6.7-34.3l.8-1.1c.9-1.2 5.3-6.5 9.6-10.2 0 0-4.4-.5-9.5 1.3v-40.9c8.1 3.5 16.9 5.3 26 5.3h19.6c.3 0 .7 0 1-.1 34.2-1.9 61.4-30.2 61.4-64.9 0-1.3 0-2.5-.1-3.8h20.7c0 .6-.1 1.1-.1 1.7v4.2c.5 17 7.6 32.8 20 44.6 12.3 11.8 28.5 18.2 45.5 18.2h18.5v14.9c-10.4-.4-25.9-2.3-49.3-11.1-24.5-9.2-34.3-30.2-38.2-46.8-.3-1.9-2.9-18.5-2.2-22.5 0 0-9.7 6.5-7 22.3 0 .2 0 .4.1.6.1.3.1.5.2.8v.2c4.2 18.8 15.3 43.1 43.9 53.8 31.1 11.7 49 11.7 59.6 11.7 4 0 7.1 0 8.6.7.9.3 2 1.3 1.7 2.8zm-28.3 39v20.9c-.5 1.7-2 2.9-3.8 2.9h-15.4c-2 0-3.7-1.5-3.9-3.5v-20.3h23.1zm-32.1 0v21.1c-.5 1.6-2 2.7-3.8 2.7H320c-2.2 0-4-1.8-4-4v-19.8h23.2zm-32 0v20.9c-.5 1.6-2 2.9-3.8 2.9H288c-2.1 0-3.7-1.6-3.9-3.6v-20.2h23.1zm-32.1 0v20.7c-.4 1.8-2 3.1-3.9 3.1h-15.4c-1.9 0-3.5-1.3-3.9-3.1v-20.7h23.2zm-32.1 0v20.8c-.4 1.7-2 3-3.9 3h-15.4c-1.9 0-3.5-1.3-3.9-3.1v-20.7H243zm-32 .3v14.3c-8.4-.9-8.9-6.5-8.9-6.5 1.4-4 4.8-7 8.9-7.8zm188.7-51.1c-2.5-.7-5.2-.8-8.7-.9v-15.9c7.3-1.2 14.2-3.6 20.5-7 1.1 14-8.3 21.5-11.8 23.8zm-19.1-24.8c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.2 56-56 56z"/>
</symbol>
</svg>
<div class="page-header">
<a href="/">
<img src="../assets/toolkit/images/head.svg" alt="Fabricator">
</a>
<div class="section-title">Documentation</div>
</div>
<div class="row pt pb-xxl">
<div class="col-s-12 col-m-4 col-l- pt-xl side-menu">
<ul class="link-list">
<li class="list-heading">Getting Started</li>
<li>
<a href="../docs/index.html">Quick Start</a>
</li>
<li>
<a href="../getting-started/what-is-a-toolkit.html">What is a Toolkit?</a>
</li>
<li>
<a href="../getting-started/working-with-fabricator.html">Working with Fabricator</a>
</li>
</ul>
<ul class="link-list mt-xl">
<li class="list-heading">Building a Toolkit</li>
<li>
<a href="../building-a-toolkit/materials.html">Materials</a>
</li>
<li>
<a href="../building-a-toolkit/rapid-prototyping.html">Rapid Prototyping</a>
</li>
<li>
<a href="../building-a-toolkit/data.html">Data</a>
</li>
<li>
<a href="../building-a-toolkit/assets.html">Stylesheets and JavaScript</a>
</li>
</ul>
<ul class="link-list mt-xl">
<li class="list-heading">Advanced</li>
<li>
<a href="../advanced/third-party.html">Third-party dependencies</a>
</li>
<li>
<a href="../advanced/error-handling.html">Error Handling</a>
</li>
<li>
<a href="../advanced/helpers.html">Helpers</a>
</li>
<li>
<a href="../advanced/preprocessors.html">Ruby Sass and other preprocessors</a>
</li>
<li>
<a href="../advanced/customization.html">Themes and customization</a>
</li>
</ul>
</div>
<div class="col-s-12 col-m-8 col-l-">
<h1 id="what-is-a-toolkit"><a name="what-is-a-toolkit" class="" href="#what-is-a-toolkit">What is a "toolkit"?</a></h1>
<blockquote>
<p>An introduction to toolkit-driven development</p>
</blockquote>
<h2 id="fabricating-websites"><a name="fabricating-websites" class="" href="#fabricating-websites">Fabricating Websites</a></h2>
<p>Modern day web interfaces are large, complex systems of interoperable parts. If not planned thoughtfully, UI code can become overly complex and difficult to scale. It can be helpful <a href="http://us5.campaign-archive1.com/?u=7e093c5cf4&id=ead8a72012&e=ecb25a3f93">take some queues from other industries</a> that have solved this problem of scale already.</p>
<p>A UI "toolkit" addresses the issue of complexity by breaking down an interface into smaller chunks. It is the digital equivalent of the auto industry's sub-assemblies and modules. It is a collection of independent pieces that are assembled to form larger pieces. A toolkit is not a website, rather it is the pieces that make up a website. These pieces can be used in any type of end-application, whether it is .NET, Ruby on Rails, Node.js, or just plain HTML.</p>
<p>Fabricator is a tool for building toolkits. It provides an efficient, optimized working environment to help you build your toolkit.</p>
<h2 id="toolkit-driven-development"><a name="toolkit-driven-development" class="" href="#toolkit-driven-development">Toolkit-driven Development</a></h2>
<p>Thinking of a website as a system of materials can be a powerful shift in thinking. Each piece must work both independently and in concert with an unknown combination of other pieces. The UI must be backend-agnostic so it can work in as many places as possible.</p>
<p>To achieve this, developers must design their code to be modular and scalable. Further, toolkits should be a single <code>.js</code> and <code>.css</code> file that contains a site's entire design system. A developer should be able to drop these two files on any page an have access to the entire design system.</p>
<p>When done well, a mature toolkit can be used to build a large number of unique pages and layouts. Once a baseline of materials has been built, designers can compose new pages by selecting existing materials, then design to fill the gaps. The need to produce a layout artifact for each new page is eliminated. The time it takes to layout new pages dramatically decreases as the toolkit matures.</p>
<h2 id="style-guide-vs-toolkit"><a name="style-guide-vs-toolkit" class="" href="#style-guide-vs-toolkit">Style guide vs toolkit</a></h2>
<p>Website style guides have evolved over the years, first starting as an outreach of the tradition (print) branding style guides, and eventually maturing into interactive examples of how a brand should be look and feel on the web. See <a href="http://www.starbucks.com/static/reference/styleguide/">Starbucks</a>, <a href="http://www.yelp.com/styleguide">Yelp</a>, <a href="http://sfdc-styleguide.herokuapp.com/">Salesforce</a>, <a href="http://style.codeforamerica.org">Code For America</a>, and <a href="http://www.google.com/design/spec/material-design/">Google's Material Design</a>.</p>
<p>A toolkit is more focused on code - specifically the modularity of website interfaces. Toolkits break down websites into small, repeatable chunks, then use those chunks to build an infinite number of layouts. <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://topcoat.io/topcoat/">Topcoat</a>, and <a href="http://foundation.zurb.com/">Zurb's Foundation</a> are popular toolkits.</p>
<p>Both are great and can be extremely useful. Fabricator gives you a way to combine both concepts into one deliverable.</p>
<p>When you work with Fabricator, you develop a brand's look and feel on the web while also producing a code toolkit.</p>
<p>Next, <a href="/getting-started/working-with-fabricator.html">learn how to use Fabricator</a>.</p>
<h2 id="helpful-resources"><a name="helpful-resources" class="" href="#helpful-resources">Helpful Resources</a></h2>
<ul>
<li><a href="http://us5.campaign-archive1.com/?u=7e093c5cf4&id=ead8a72012&e=ecb25a3f93">Architecting a Pattern Library</a></li>
<li><a href="http://daverupert.com/2013/04/responsive-deliverables/">Responsive Deliverables</a></li>
<li><a href="https://css-tricks.com/design-systems-building-future/">Design Systems: Building for the Future</a></li>
<li><a href="http://styleguides.io/">styleguides.io</a></li>
</ul>
</div>
</div>
<div class="footer">
<p class="mb-xl">
<a href="https://github.com/fbrctr/fabricator">
<svg class="stamp">
<use xlink:href="#symbol-word-mark-outline" />
</svg>
</a>
</p>
<p>Fabricator is developed by <a href="https://twitter.com/LukeAskew/">@LukeAskew</a></p>
<p>This site was <a href="../components.html">built with Fabricator</a> | <a href="https://github.com/fbrctr/fbrctr.github.io">site source</a></p>
</div>
<!-- toolkit scripts -->
<script src="../assets/toolkit/scripts/toolkit.js"></script>
<!-- /toolkit scripts -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54936251-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>