├── .DS_Store ├── .gitignore ├── CNAME ├── about.html ├── components ├── alerts.html ├── badges.html ├── buttons.html ├── cards.html ├── lists.html ├── pagination.html └── pills.html ├── demo.html ├── favicon.ico ├── images ├── .DS_Store └── logo.png ├── index.html ├── license ├── readme.md ├── ui-components-v0.2.css ├── ui-components-v0.2.min.css └── ui-components-v0.2.min.css.zip /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/philipardeljan/ui-components/d7840ad31199062dd4ebc6bcf9e066ef10457bcd/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | ui-components.com -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 |

What is UI Components?

30 |

UI components is a UI component library. It is powered by a 2kb functional CSS file.

31 |

How does it work?

32 |

Download and include the CSS file then copy any of the HTML component code.

33 |

Why use it?

34 |

To rapidly design/prototype in the browser.

35 |

This component doesn't align properly!

36 |

Feel free to use any of the existing functional CSS classes to get a component to line up, otherwise write some of your own CSS. UI Components is exactly that, a component library. It contains small parts of a greater whole.

37 |

As such there aren't any inbuilt grid/layout components on purpose, however there are plenty of inbuilt classes to help align your UI.

38 |

Inspiration

39 |

45 |

46 |

47 |

48 | 49 | 50 | -------------------------------------------------------------------------------- /components/alerts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alerts - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

Alerts

23 |

24 | 25 | 26 |

27 |

28 |

Example

29 |

30 | 31 | 34 | 35 |

36 |

37 |

Code

38 |

39 |             <ul class="list-none system-font ma0 pa0 ba border-grey br2">
40 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">Christian Ericssen</li>
41 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">Angie E. Swift</li>
42 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">Ronald Koeman</li>
43 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">June Simmons</li>
44 |   <li class="pv2 pr4 pl2 pointer hover-bg-grey">Calvin Johnson</li>
45 | </ul>

46 |

47 |

48 |

49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /components/badges.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Badges - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

Badges

23 |

24 | 25 | 26 |

27 |

28 |

Example

29 |

30 | 31 | 32 |

33 | 34 | 35 |

36 |

37 |

Code

38 |

39 |             <span class="system-font w2 h2 flex justify-center pointer button-press fw700 br4 bg-red white">
40 |   <div class="self-center">8</div>
41 | </span>
42 |

43 |

44 |

45 |

46 | 47 | 48 | 49 |

50 |

51 |

Example

52 |

53 | 54 |

55 |

Unread

56 | 57 |

58 | 59 |

60 | 61 |

62 |

63 |

Code

64 |

65 |             <div class="system-font flex pointer button-press mh3">
66 |   <p class="ma0 self-center pr2">Unread</p>
67 |   <span class="system-font w2 h2 flex justify-center pointer fw700 br4 bg-red white">
68 |     <div class="self-center">8</div>
69 |   </span>
70 | </div>
71 |

72 |

73 |

74 |

75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /components/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

Buttons

23 |

24 | 25 | 26 |

27 |

28 |

Basic button

29 |

30 | 31 | 34 | 35 |

36 |

37 |

Code

38 |

 39 |             <button class="fs2 system-font font-antialiased bg-blue br2 bw0 pointer button-press ph3">
 40 |   <p class="white mv2 pv1">Register</p>
 41 | </button>

42 |

43 |

44 |

45 | 46 | 47 | 48 | 49 |

50 |

51 |

Basic button row

52 |

53 | 54 |

55 | 58 | 61 | 64 | 67 |

68 | 69 |

70 |

71 |

Code

72 |

 73 |             <div class="system-font font-antialiased">
 74 |   <button class="fs2 bg-blue br2 bw0 white pointer button-press ph3 ma2">
 75 |     <p class="mv2 pv1">Register</p>
 76 |   </button>
 77 |   <button class="fs2 bg-green br2 bw0 white pointer button-press ph3 ma2">
 78 |     <p class="mv2 pv1">Register</p>
 79 |   </button>
 80 |   <button class="fs2 bg-red br2 bw0 white pointer button-press ph3 ma2">
 81 |     <p class="mv2 pv1">Register</p>
 82 |   </button>
 83 |   <button class="fs2 bg-orange br2 bw0 white pointer button-press ph3 ma2">
 84 |     <p class="mv2 pv1">Register</p>
 85 |   </button>
 86 | </div>

87 |

88 |

89 |

90 | 91 | 92 | 93 |

94 |

95 |

Not allowed

96 |

97 | 98 | 101 | 102 |

103 |

104 |

Code

105 |

106 |             <button class="fs2 flex system-font bg-silver white ba border-grey br3 not-allowed shake-red-border ph3">
107 |   <p class="self-center dark-grey mv2 pv1">Register</p>
108 | </button>

109 |

110 |

111 |

112 | 113 | 114 | 115 |

116 |

117 |

Button with sub-text

118 |

119 | 120 | 124 | 125 |

126 |

127 |

Code

128 |

129 |             <button class="flex system-font font-antialiased bg-blue border-blue br2 bw0 shadow white pointer button-press ph3">
130 |   <p class="fs2 self-center pr1">Subscribe</p>
131 |   <span class="fstiny self-center">(1,543)</span>
132 | </button>

133 |

134 |

135 |

136 | 137 | 138 | 139 |

140 |

141 |

Button with SVG icon

142 |

143 | 144 | 152 | 153 |

154 |

155 |

Code

156 |

157 |             <button class="fs2 flex system-font font-antialiased bg-blue border-blue br2 bw0 shadow ph3 mh1 white button-press pointer">
158 |   <svg class="self-center w2" viewBox="-8 -18 80 80">
159 |     <g>
160 |       <path d="M21.57,2.049c0.303-0.612,0.927-1,1.609-1c0.682,0,1.307,0.388,1.609,1l5.771,11.695c0.261,0.529,0.767,0.896,1.352,0.981 L44.817,16.6c0.677,0.098,1.237,0.572,1.448,1.221c0.211,0.649,0.035,1.363-0.454,1.839l-9.338,9.104 c-0.423,0.412-0.616,1.006-0.517,1.588l2.204,12.855c0.114,0.674-0.161,1.354-0.715,1.756c-0.553,0.4-1.284,0.453-1.89,0.137 l-11.544-6.07c-0.522-0.275-1.147-0.275-1.67,0l-11.544,6.069c-0.604,0.317-1.337,0.265-1.89-0.136 c-0.553-0.401-0.829-1.082-0.714-1.756l2.204-12.855c0.1-0.582-0.094-1.176-0.517-1.588L0.542,19.66 c-0.489-0.477-0.665-1.19-0.454-1.839c0.211-0.649,0.772-1.123,1.449-1.221l12.908-1.875c0.584-0.085,1.09-0.452,1.351-0.982 L21.57,2.049z" fill="#3d77bb"/>
161 |     </g>
162 |   </svg>
163 |   <p class="self-center">Favourite</p>
164 | </button>

165 |

166 |

167 |

168 | 169 | 170 | 171 |

172 |

173 |

Variable font sizes

174 |

175 | 176 | 179 | 182 | 185 | 188 | 191 | 192 |

193 |

194 |

Code

195 |

196 |             <button class="fs1 flex system-font bg-blue br2 border-blue bw0 shadow white pointer button-press mb3 ph3">
197 |   <p class="self-center mv2 pv1">Register</p>
198 | </button>
199 | <button class="fs2 flex system-font bg-green br2 border-green bw0 shadow white pointer button-press mb3 ph3">
200 |   <p class="self-center mv2 pv1">Register</p>
201 | </button>
202 | <button class="fs3 flex system-font bg-red br2 border-red bw0 shadow white pointer button-press mb3 ph3">
203 |   <p class="self-center mv2 pv1">Register</p>
204 | </button>
205 | <button class="fs4 flex system-font bg-orange br2 border-orange bw0 shadow white pointer button-press mb3 ph3">
206 |   <p class="self-center mv2 pv1">Register</p>
207 | </button>
208 | <button class="fs5 flex system-font bg-grey br2 border-grey bw0 shadow white pointer button-press mb3 ph3">
209 |   <p class="self-center mv2 pv1">Register</p>
210 | </button>

211 |

212 |

213 |

214 | 215 | 216 | 217 |

218 |

219 |

Variable horizontal padding

220 |

221 | 222 | 225 | 228 | 231 | 234 | 235 |

236 |

237 |

Code

238 |

239 |             <button class="fs1 flex system-font bg-blue br2 border-blue bw0 shadow white pointer button-press mb3 ph2">
240 |   <p class="self-center mv2 pv1">Register</p>
241 | </button>
242 | <button class="fs1 flex system-font bg-green br2 border-green bw0 shadow white pointer button-press mb3 ph3">
243 |   <p class="self-center mv2 pv1">Register</p>
244 | </button>
245 | <button class="fs1 flex system-font bg-red br2 border-red bw0 shadow white pointer button-press mb3 ph4">
246 |   <p class="self-center mv2 pv1">Register</p>
247 | </button>
248 | <button class="fs1 flex system-font bg-orange br2 border-orange bw0 shadow white pointer button-press mb3 ph5">
249 |   <p class="self-center mv2 pv1">Register</p>
250 | </button>

251 |

252 |

253 |

254 | 255 | 256 | 257 |

258 |

259 |

Button and link group

260 |

261 | 262 | 265 | or sign up 266 | 267 |

268 |

269 |

Code

270 |

271 |             <button class="fs2 system-font bg-blue br2 border-blue bw0 shadow white pointer button-press ph3">
272 |   <p class="mv2 pv1">Register</p>
273 | </button>
274 | <a href="#" class="di system-font self-center tdn blue button-press ml2">or sign up</a>

275 |

276 |

277 |

278 | 279 | 280 | 281 | -------------------------------------------------------------------------------- /components/cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cards - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

Cards

23 |

24 | 25 | 26 |

27 |

28 |

Example

29 |

30 | 31 |

32 |

33 |

Sea ice disaster

34 |

Rising sea levels are causing much anguish in the scientific community.

35 | Read more 36 |

37 |

38 | 39 |

40 |

41 |

Code

42 |

 43 |         <div class="system-font font-antialiased mw11 pb1 ba br2 border-grey">
 44 |   <div class="pa3">
 45 |      <p class="fs5 mv1">Sea ice disaster</p>
 46 |      <p class="fs2 lh-body mt2 mb3">Rising sea levels are causing much anguish in the scientific community.</p>
 47 |      <a href="#" class="tdn blue button-press">Read more</a>
 48 |    </div>
 49 | </div>

50 |

51 |

52 |

53 | 54 | 55 | 56 |

57 |

58 |

Example

59 |

60 | 61 |

62 |

63 |

64 |

Sea ice disaster

65 |

Rising sea levels are causing much anguish in the scientific community.

66 | Read more 67 |

68 |

69 | 70 |

71 |

72 |

Code

73 |

 74 |             <div class="system-font font-antialiased db pb2 mw11 ba br1 border-grey">
 75 |   <div class="h8 bb border-grey bg-blue" src="#"></div>
 76 |     <div class="pa3">
 77 |       <p class="fs5 pb2 mt0 mb0">Sea ice disaster</p>
 78 |       <p class="fs2 lh-body pb1 mt0 mh0 mb2">Rising sea levels are causing much anguish in the scientific community.</p>
 79 |       <a href="#" class="tdn blue">Read more</a>
 80 |     </div>
 81 |   </div>
 82 | </div>

83 |

84 |

85 |

86 | 87 | 88 | 89 |

90 |

91 |

Example

92 |

93 | 94 |

95 |

96 |

97 |

98 |

La Luna Bistro

99 |

Carlton 3054 VIC

100 |

101 |

102 |

103 |

4.5/5

104 |

based on 1,958 votes

105 |

106 |

107 |

Upmarket Modern European menu served in a rustic-chic space with warm wood accents and black walls.

108 | Read more 109 |

110 |

111 | 112 |

113 |

114 |

Code

115 |

116 |             <div class="system-font font-antialiased pb2 mw11 ba br1 border-grey">
117 |   <div class="pv3 flex">
118 |     <div class="self-center w2 h2 ml3 bg-blue br100pc"></div>
119 |       <div>
120 |         <p class="fs3 mt1 mb1 ml3">La Luna Bistro</p>
121 |         <p class="fs1 dark-grey mv0 ml3 pb1">Carlton 3054 VIC</p>
122 |       </div>
123 |     </div>
124 |     <div class="flex flex-wrap content-end h10 bg-blue white">
125 |       <p class="w100pc fs5 mv0 ml3">4.5/5</p>
126 |       <p class="w100pc fs2 mt0 mb3 ml3">based on 1,958 votes</p>
127 |     </div>
128 |     <div class="pa3">
129 |       <p class="fs2 lh-body pb1 mt0 mh0 mb2">Upmarket Modern European menu served in a rustic-chic space with warm wood accents and black walls.</p>
130 |       <a href="#" class="tdn blue button-press">Read more</a>
131 |     </div>
132 |   </div>
133 | </div>

134 |

135 |

136 |

137 | 138 | 139 | 140 |

141 |

142 |

Example

143 |

144 | 145 |

146 |

147 |

Xiuying Li

148 |

Nanjing, China

149 |

150 |

Software engineer at Alibaba

151 |

C/C++, Java and MYSQL

152 |

153 | 154 |

155 |

156 |

Code

157 |

158 |             <div class="system-font font-antialiased pv4 ph5 tc ba border-grey br2">
159 |   <div class="w4 h4 bg-blue br100pc db center mb3"></div>
160 |   <p class="fs6 ma0">Xiuying Li</p>
161 |   <p class="fs1 dark-grey ma0">Nanjing, China</p>
162 |   <div class="bt border-silver mt3"></div>
163 |   <p class="mt3 mb0">Software engineer at Alibaba</p>
164 |   <p class="fs1 dark-grey mt1">C/C++, Java and MYSQL</p>
165 | </div>

166 |

167 |

168 |

169 | 170 | 171 | 172 |

173 |

174 |

Example

175 |

176 | 177 |

178 |

179 | Software 180 | > 181 | C/C++, Java and MYSQL 182 |

183 |

184 |

Xiuying Li

185 |

Nanjing, China

186 |

Freelance software engineer

187 | 188 | View previous work 189 |

190 | 191 |

192 |

193 |

Code

194 |

195 |             <div class="system-font font-antialiased mw12 tc ba border-grey ph4">
196 |   <p class="fs1 mt2 ml2">
197 |   <a href="#" class="blue tdn">Software</a>
198 |   >
199 |   <a href="#" class="blue tdn pointer">C/C++, Java and MYSQL</a>
200 |   </p>
201 |   <div class="w5 h5 bg-blue br100pc db center mt4 mb3"></div>
202 |   <p class="fs4 mt2 mb0">Xiuying Li</p>
203 |   <p class="fs1 dark-grey mt1 mb4 fs1 dark-grey mv0">Nanjing, China</p>
204 |   <p class="mt3 mb3">Freelance software engineer</p>
205 |   <button class="fs2 bg-blue br2 bw0 pv2 ph3 mh1 mb3 button-press white pointer">Hire Xiuying</button>
206 |   <a href="#" class="fs1 db blue tdn mb3 pb1">View previous work</a>
207 | </div>

208 |

209 |

210 |

211 | 212 | 213 | 214 |

215 |

216 |

Example

217 |

218 | 219 |

220 |

221 |

222 |

223 |

224 |

225 |

Jamie Oliver

226 |

James "Jamie" Oliver is a British celebrity chef and restaurateur.

227 | Learn more 228 |

229 |

230 | 231 |

232 |

233 |

Code

234 |

235 |             <div class="system-font font-antialiased pb2 mw11 shadow">
236 |   <div class="bt bw6 border-silver"></div>
237 |   <div class="pa3 tc">
238 |     <div class="relative right2">
239 |       <div class="w4 h4 dib absolute bottom-2 ba br100pc bw1 border-white bg-blue br100pc mt4 mb3"></div>
240 |     </div>
241 |     <p class="fs5 mt4 mb2">Jamie Oliver</p>
242 |     <p class="fs2 lh-body pb1 mt0 mh3 mb2">James "Jamie" Oliver is a British celebrity chef and restaurateur.</p>
243 |     <a href="#" class="tdn blue button-press">Learn more</a>
244 |   </div>
245 | </div>

246 |

247 |

248 |

249 | 250 | 251 | 252 |

253 |

254 |

Example

255 |

256 | 257 |

258 |

259 |

260 |

24°

261 |

Melbourne, Australia

262 |

A warm day with northerly winds. Chance of any rain: 20%.

263 | View extended forecast 264 |

265 |

266 | 267 |

268 |

269 |

Code

270 |

271 |   <div class="system-font font-antialiased pb2 mw11 shadow">
272 |   <div class="bg-blue h8"></div>
273 |     <div class="mh3 ph3 pb3">
274 |       <p class="fs5 pt2 mt3 mb0">24&deg;</p>
275 |       <p class="mt1 grey">Melbourne, Australia</p>
276 |       <p class="lh-body pb3 mv2">A warm day with northerly winds. Chance of any rain: 20%.</p>
277 |       <a href="#" class="tdn blue button-press">View extended forecast</a>
278 |     </div>
279 |   </div>
280 | </div>

281 |

282 |

283 |

284 | 285 | 286 | 287 |

288 |

289 |

Example

290 |

291 | 292 |

293 |

294 |

3 Attachments

295 |

296 |

297 |

298 |

299 |

300 |

301 | 302 |

303 |

304 |

Code

305 |

306 |   <div class="system-font font-antialiased db pt4 ph4 pb3 shadow br2">
307 |   <div class="w11 h11 ph5 pv2 bg-grey br1"></div>
308 |   <p class="mt3 mb2">3 Attachments</p>
309 |   <div class="mb2 pb1">
310 |     <div class="dib w4 h4 bg-grey"></div>
311 |     <div class="dib w4 h4 bg-grey"></div>
312 |     <div class="dib w4 h4 bg-grey"></div>
313 |   </div>
314 | </div>

315 |

316 |

317 |

318 | 319 | 320 | 321 |

322 |

323 |

Example

324 |

325 | 326 |

327 |

328 |

329 |

330 |

331 |

Redesign price page

332 |

Design streamlined experience for users based on latest research.

333 |

334 |

335 |

336 |

337 |

338 |

339 |

340 |

341 |

342 |

343 |

344 | 345 |

346 |

347 |

Code

348 |

349 |             <div class="system-font font-antialiased db pb2 mw11 shadow">
350 |   <div class="pt3 ph3 mh1">
351 |     <div class="h7 bg-blue"></div>
352 |   </div>
353 |   <div class="pa3 mh1">
354 |     <p class="fs4 mt0 mb2">Redesign price page</p>
355 |     <p class="fs2 dark-grey lh-body pb1 mt0 mb3">Design streamlined experience for users based on latest research.</p>
356 |     <div class="flex">
357 |       <div class="flex w2 h2 br100pc ba border-grey pointer button-press mr2">
358 |         <p class="self-center dark-grey fs3 w100pc tc mt3">+</p>
359 |       </div>
360 |       <div class="w2 h2 bg-blue ba border-blue br100pc mr2"></div>
361 |       <div class="w2 h2 bg-orange ba border-orange br100pc mr2"></div>
362 |       <div class="w2 h2 bg-green ba border-green br100pc mr2"></div>
363 |       <div class="w2 h2 bg-purple ba border-purple br100pc mr2"></div>
364 |     </div>
365 |   </div>
366 | </div>

367 |

368 |

369 |

370 | 371 | 372 | 373 |

374 |

375 |

Example

376 |

377 | 378 |

379 |

380 |

New projects

381 |

382 |

383 |

384 |

385 | 1% increase 386 |

387 |

388 |

389 | 390 |

391 |

392 |

Code

393 |

394 |   <div class="system-font font-antialiased bg-green white w11 ba br2 border-green pb2">
395 |   <div class="pa3">
396 |     <p class="fs1 ttu mt1 mh0 mb0">New projects</p>
397 |     <p class="fs6 pb2 mt2 mb1">92</p>
398 |   </div>
399 |   <div class="mv2">
400 |     <div class="bt border-white pt3 mh3">
401 |       <a href="#" class="tdn white button-press mv4 mh0">1% increase</a>
402 |     </div>
403 |   </div>
404 | </div>

405 |

406 |

407 |

408 | 409 | 410 | 411 | -------------------------------------------------------------------------------- /components/lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lists - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

Lists

23 |

24 | 25 | 26 |

27 |

28 |

Example

29 |

30 | 31 |

Christian Ericssen
Angie E. Swift
Ronald Koeman
June Simmons
Calvin Johnson

38 | 39 |

40 |

41 |

Code

42 |

 43 |             <ul class="list-none system-font ma0 pa0 ba border-grey br2">
 44 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">Christian Ericssen</li>
 45 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">Angie E. Swift</li>
 46 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">Ronald Koeman</li>
 47 |   <li class="pv2 pr4 pl2 bb border-grey pointer hover-bg-grey">June Simmons</li>
 48 |   <li class="pv2 pr4 pl2 pointer hover-bg-grey">Calvin Johnson</li>
 49 | </ul>

50 |

51 |

52 |

53 | 54 | 55 | 56 |

57 |

58 |

Example

59 |

60 | 61 |

63 |
64 |
65 |
Christian Ericssen
66 |
CEO
67 |
68 |
70 |
71 |
72 |
Angie. E Swift
73 |
VP of Sales
74 |
75 |
77 |
78 |
79 |
Ronald Koeman
80 |
Advisory Board
81 |
82 |
84 |
85 |
86 |
June Simmons
87 |
Social Content Manager
88 |
89 |
91 |
92 |
93 |
Calvin Johnson
94 |
VP of Sales
95 |
96 |

98 | 99 |

100 |

101 |

Code

102 |

103 |             <ul class="list-none system-font ma0 pa0 ba border-grey br2">
104 |   <li class="flex pv3 pr4 pl2 bb border-grey pointer hover-bg-grey">
105 |     <div class="w2 h2 bg-purple ba border-purple br100pc mt1 mh3"></div>
106 |     <div>
107 |       <p class="self-center ma0 mb1">Christian Ericssen</p>
108 |       <p class="self-center dark-grey ma0">CEO</p>
109 |     </div>
110 |   </li>
111 |   <li class="flex pv3 pr4 pl2 bb border-grey pointer hover-bg-grey">
112 |     <div class="w2 h2 bg-blue ba border-blue br100pc mt1 mh3"></div>
113 |     <div>
114 |       <p class="self-center ma0 mb1">Angie. E Swift</p>
115 |       <p class="self-center dark-grey ma0">VP of Sales</p>
116 |     </div>
117 |   </li>
118 |   <li class="flex pv3 pr4 pl2 bb border-grey pointer hover-bg-grey">
119 |     <div class="w2 h2 bg-red ba border-red br100pc mt1 mh3"></div>
120 |     <div>
121 |       <p class="self-center ma0 mb1">Ronald Koeman</p>
122 |       <p class="self-center dark-grey ma0">Advisory Board</p>
123 |     </div>
124 |   </li>
125 |   <li class="flex pv3 pr4 pl2 bb border-grey pointer hover-bg-grey">
126 |     <div class="w2 h2 bg-orange ba border-orange br100pc mt1 mh3"></div>
127 |     <div>
128 |       <p class="self-center ma0 mb1">June Simmons</p>
129 |       <p class="self-center dark-grey ma0">Social Content Manager</p>
130 |     </div>
131 |   </li>
132 |   <li class="flex pv3 pr4 pl2 pointer hover-bg-grey">
133 |     <div class="w2 h2 bg-green ba border-green br100pc mt1 mh3"></div>
134 |     <div>
135 |       <p class="self-center ma0 mb1">Calvin Johnson</p>
136 |       <p class="self-center dark-grey ma0">VP of Sales</p>
137 |     </div>
138 |   </li>
139 | </ul>

140 |

141 |

142 |

143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /components/pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pagination - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

Pagination

23 |

24 | 25 | 26 |

27 |

28 |

Simple

29 |

30 | 31 | 44 | 45 |

46 |

47 |

Code

48 |

 49 |             <nav class="dt system-font border-collapse">
 50 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">
 51 |     <span>&laquo;</span>
 52 |   </a>
 53 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pv2 ph3">1</a>
 54 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">2</a>
 55 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">3</a>
 56 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">4</a>
 57 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">5</a>
 58 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">
 59 |     <span>&raquo;</span>
 60 |   </a>
 61 | </nav>

62 |

63 |

64 |

65 | 66 | 67 | 68 |

69 |

70 |

Active page

71 |

72 | 73 | 86 | 87 |

88 |

89 |

Code

90 |

 91 |             <nav class="dt system-font border-collapse">
 92 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">
 93 |     <span>&laquo;</span>
 94 |   </a>
 95 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pv2 ph3">1</a>
 96 |   <a href="#" class="dtcell ba border-blue tdn bg-blue white pa2 ph3">2</a>
 97 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">3</a>
 98 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">4</a>
 99 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">5</a>
100 |   <a href="#" class="dtcell ba border-grey tdn blue hover-bg-grey-grow pa2 ph3">
101 |     <span>&raquo;</span>
102 |   </a>
103 | </nav>

104 |

105 |

106 |

107 | 108 | 109 | 110 |

111 |

112 |

Pill pager

113 |

114 | 115 | 119 | 120 |

121 |

122 |

Code

123 |

124 |             <nav class="system-font pt2">
125 |   <a href="#" class="ba border-grey br-pill tdn blue hover-bg-grey button-press pa2 ph3">Previous</a>
126 |   <a href="#" class="ba border-grey br-pill tdn blue hover-bg-grey button-press pa2 ph3">Next</a>
127 | </nav>

128 |

129 |

130 |

131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /components/pills.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pills - UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

22 |

Pills

23 |

24 | 25 | 26 |

27 |

28 |

Block style row

29 |

30 | 31 |

32 |

33 | Open 34 | 7 35 |

36 |

37 | Static 38 | 3 39 |

40 |

41 | Expired 42 | 12 43 |

44 |

45 | Active 46 | 6 47 |

48 |

49 | 50 |

51 |

52 |

Code

53 |

 54 |             <div class="system-font fs2 tc white">
 55 |   <p class="dib center bg-purple br-pill pv2 ph3 ma1 pointer">
 56 |     Open
 57 |     <span class="fs1">7</span>
 58 |   </p>
 59 |   <p class="dib center bg-blue br-pill pv2 ph3 ma1 pointer">
 60 |     Static
 61 |     <span class="fs1">3</span>
 62 |   </p>
 63 |   <p class="dib center bg-red br-pill pv2 ph3 ma1 pointer">
 64 |     Expired
 65 |     <span class="fs1">12</span>
 66 |   </p>
 67 |   <p class="dib center bg-green br-pill pv2 ph3 ma1 pointer">
 68 |     Active
 69 |     <span class="fs1">6</span>
 70 |   </p>
 71 | </div>

72 |

73 |

74 |

75 | 76 | 77 | 78 |

79 |

80 |

Line style row

81 |

82 | 83 |

84 |

85 | Open 86 | 7 87 |

88 |

89 | Static 90 | 3 91 |

92 |

93 | Expired 94 | 12 95 |

96 |

97 | Active 98 | 6 99 |

100 |

101 | 102 |

103 |

104 |

Code

105 |

106 |             <div class="fs2 tc system-font">
107 |   <p class="dib center br-pill pv2 ph3 mh1 purple ba border-purple pointer">
108 |     Open
109 |     <span class="fs1">7</span>
110 |   </p>
111 |   <p class="dib center br-pill pv2 ph3 mh1 blue ba border-blue pointer">
112 |     Static
113 |     <span class="fs1">3</span>
114 |   </p>
115 |   <p class="dib center br-pill pv2 ph3 mh1 red ba border-red pointer">
116 |     Expired
117 |     <span class="fs1">12</span>
118 |   </p>
119 |   <p class="dib center br-pill pv2 ph3 mh1 green ba border-green pointer">
120 |     Active
121 |     <span class="fs1">6</span>
122 |   </p>
123 | </div>

124 |

125 |

126 |

127 | 128 | 129 | 130 |

131 |

132 |

Half radius

133 |

134 | 135 |

136 |

137 | Open 138 | 7 139 |

140 |

141 | Closed 142 | 3 143 |

144 |

145 | 146 |

147 |

148 |

Code

149 |

150 |             <div class="system-font fs2 tc">
151 |   <p class="fs2 dib tc center system-font br-pill pv2 ph3 mh1 blue br-left ba border-blue pointer">
152 |     Open
153 |     <span class="fs1">7</span>
154 |   </p>
155 |   <p class="fs2 dib tc center system-font br-pill pv2 ph3 mh1 red br-right ba border-red pointer">
156 |     Closed
157 |     <span class="fs1">3</span>
158 |   </p>
159 | </div>

160 |

161 |

162 |

163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | UI Components 7 | 8 | 9 | 10 | 11 | 12 |

13 |

14 |

15 |

16 |

17 |

La Luna Bistro

18 |

Carlton 3054 VIC

19 |

20 |

21 |

22 |

4.5/5

23 |

based on 1,958 votes

24 |

25 |

26 |

Upmarket Modern European menu served in a rustic-chic space with warm wood accents and black walls.

27 | Read more 28 |

29 |

30 |

31 | 32 | 33 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/philipardeljan/ui-components/d7840ad31199062dd4ebc6bcf9e066ef10457bcd/favicon.ico -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/philipardeljan/ui-components/d7840ad31199062dd4ebc6bcf9e066ef10457bcd/images/.DS_Store -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/philipardeljan/ui-components/d7840ad31199062dd4ebc6bcf9e066ef10457bcd/images/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | UI Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

23 |

24 |

25 |

26 |

27 |

28 |

ui-components

v0.2 29 |

30 |

A UI component library, powered by 2kb of functional CSS

31 |

Download the CSS and use the UI components below

32 |

Focused on designing in the browser

33 |

34 |

35 | 36 |

37 |

38 | 39 |

Cards

40 | 41 | 42 |

Badges

43 | 44 | 45 |

Buttons

46 | 47 | 48 |

Lists

49 | 50 |

51 |

52 |

53 |

54 | 55 |

Pills

56 | 57 | 58 |

Pagination

59 | 60 |

61 |

62 |

63 |

64 | 65 | 66 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # UI Components 🏇 2 | * A functional CSS component library 3 | * Focused on prototyping/designing in the browser 4 | * 2kb of CSS 5 | 6 | ## How does it work? 7 | * Download the CSS 8 | * Include it in your project/app 9 | * Use any of the HTML components 10 | 11 | ## License 12 | MIT 13 | -------------------------------------------------------------------------------- /ui-components-v0.2.css: -------------------------------------------------------------------------------- 1 | /* font-rendering */ 2 | .font-antialiased { -webkit-font-smoothing: antialiased; } 3 | 4 | /* background */ 5 | .bg-black { background-color: #000000; } 6 | .bg-grey { background-color: #999999; } 7 | .bg-purple { background-color: #9012FE; } 8 | .bg-silver { background-color: #EEEEEE; } 9 | .bg-blue { background-color: #4990E2; } 10 | .bg-red { background-color: #D0011B; } 11 | .bg-orange { background-color: #F6A623; } 12 | .bg-green { background-color: #6FC214; } 13 | .bg-white { background-color: #FFFFFF; } 14 | 15 | /* border-radius */ 16 | .br0 { border-radius: 0; } 17 | .br1 { border-radius: .125rem; } 18 | .br2 { border-radius: .25rem; } 19 | .br3 { border-radius: .5rem; } 20 | .br4 { border-radius: 1rem; } 21 | .br100pc { border-radius: 100%; } 22 | .br-pill { border-radius: 9999px; } 23 | .br-right { border-top-left-radius: 0; border-bottom-left-radius: 0; } 24 | .br-left { border-top-right-radius: 0; border-bottom-right-radius: 0; } 25 | 26 | /* border-collapse */ 27 | .border-collapse { border-collapse: collapse; border-spacing: 0; } 28 | 29 | /* border-color */ 30 | .border-black { border-color: #000000; } 31 | .border-grey { border-color: #999999; } 32 | .border-purple { border-color: #9012FE; } 33 | .border-silver { border-color: #CCCCCC; } 34 | .border-blue { border-color: #4990E2; } 35 | .border-red { border-color: #D0011B; } 36 | .border-orange { border-color: #F6A623; } 37 | .border-green { border-color: #6FC214; } 38 | .border-white { border-color: #FFFFFF; } 39 | 40 | /* border-style */ 41 | .ba { border-style: solid; border-width: 1px; } 42 | .bt { border-top-style: solid; border-top-width: 1px; } 43 | .br { border-right-style: solid; border-right-width: 1px; } 44 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 45 | .bl { border-left-style: solid; border-left-width: 1px; } 46 | .bn { border-style: none; border-width: 0; } 47 | 48 | /* border-width */ 49 | .bw0 { border-width: 0; } 50 | .bw1 { border-width: .125rem; } 51 | .bw4 { border-width: 1rem; } 52 | .bw6 { border-width: 6rem; } 53 | 54 | /* box-shadow */ 55 | .shadow { box-shadow: 0 1px 2px 2px rgba( 0, 0, 0, .1 ); } 56 | .shadow1 { box-shadow: 4px 4px 18px 4px rgba( 0, 0, 0, .1 ); } 57 | 58 | /* right */ 59 | .right2 { right: 2rem; } 60 | 61 | /* bottom */ 62 | .bottom-1 { bottom: -1rem; } 63 | .bottom-2 { bottom: -2rem; } 64 | 65 | /* left */ 66 | .left1 { left: 1rem; } 67 | 68 | /* clearfix */ 69 | .cf:before, .cf:after { content: " "; display: table; } 70 | .cf:after { clear: both; } 71 | .cf { *zoom: 1; } 72 | 73 | /* text-color */ 74 | .white { color: #FFFFFF; } 75 | .silver { color: #EEEEEE; } 76 | .black { color: #000000; } 77 | .dark-grey { color: #555555; } 78 | .grey { color: #999999; } 79 | .blue { color: #1B76DF; } 80 | .red { color: #D0011B; } 81 | .green { color: #417505; } 82 | .purple { color: #9012FE; } 83 | .yellow { color: #FFEF00; } 84 | 85 | /* cursor */ 86 | .pointer { cursor: pointer; } 87 | .not-allowed { cursor: not-allowed; } 88 | 89 | /* display */ 90 | .dn { display: none; } 91 | .di { display: inline; } 92 | .db { display: block; } 93 | .dib { display: inline-block; } 94 | .dt { display: table; } 95 | .dtrow { display: table-row; } 96 | .dtcell { display: table-cell; } 97 | .flex { display: flex; } 98 | .flex-wrap { flex-wrap: wrap; } 99 | .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 100 | .items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 101 | .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 102 | .self-center { align-self: center; } 103 | .content-end { align-content: flex-end; } 104 | 105 | /* float */ 106 | .fl { float: left; } 107 | .fr { float: right; } 108 | .fn { float: none; } 109 | 110 | /* font-family */ 111 | .system-font { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif; } 112 | .monospace { font-family: "Inconsolata", "Consolas", "Monaco", monospace; } 113 | 114 | /* font-size */ 115 | .fstiny {font-size: .7rem; } 116 | .fs1 { font-size: .875rem; } 117 | .fs2 { font-size: 1rem; } 118 | .fs3 { font-size: 1.25rem; } 119 | .fs4 { font-size: 1.5rem; } 120 | .fs5 { font-size: 1.75rem; } 121 | .fs6 { font-size: 2rem; } 122 | .fs10 { font-size: 3rem; } 123 | .fs11 { font-size: 5rem; } 124 | 125 | /* font-weight */ 126 | .fw400 { font-weight: 400; } 127 | .fw500 { font-weight: 500; } 128 | .fw700 { font-weight: 700; } 129 | 130 | /* height */ 131 | .h1 { height: 1rem; } 132 | .h2 { height: 2rem; } 133 | .h3 { height: 3rem; } 134 | .h4 { height: 4rem; } 135 | .h5 { height: 5rem; } 136 | .h6 { height: 6rem; } 137 | .h7 { height: 8rem; } 138 | .h8 { height: 9rem; } 139 | .h9 { height: 10rem; } 140 | .h10 { height: 14rem; } 141 | .h11 { height: 16rem; } 142 | .h12 { height: 20rem; } 143 | .h25pc { height: 25%; } 144 | .h50pc { height: 50%; } 145 | .h75pc { height: 75%; } 146 | .h100pc { height: 100%; } 147 | 148 | /* line-height */ 149 | .lh-heading { line-height: 1.25; } 150 | .lh-body { line-height: 1.5; } 151 | 152 | .list-none { list-style-type: none; } 153 | 154 | /* margin */ 155 | .center { margin-right: auto; margin-left: auto; } 156 | .ma0 { margin: 0; } 157 | .ma1 { margin: .25rem; } 158 | .ma2 { margin: .5rem; } 159 | .ma3 { margin: 1rem; } 160 | .ma4 { margin: 2rem; } 161 | .ma5 { margin: 4rem; } 162 | .ma6 { margin: 8rem; } 163 | 164 | /* margin-bottom */ 165 | .mb0 { margin-bottom: 0; } 166 | .mb1 { margin-bottom: .25rem; } 167 | .mb2 { margin-bottom: .5rem; } 168 | .mb3 { margin-bottom: 1rem; } 169 | .mb4 { margin-bottom: 2rem; } 170 | .mb5 { margin-bottom: 4rem; } 171 | .mb6 { margin-bottom: 8rem; } 172 | 173 | /* margin-left */ 174 | .ml0 { margin-left: 0; } 175 | .ml1 { margin-left: .25rem; } 176 | .ml2 { margin-left: .5rem; } 177 | .ml3 { margin-left: 1rem; } 178 | .ml4 { margin-left: 2rem; } 179 | .ml5 { margin-left: 4rem; } 180 | .ml6 { margin-left: 8rem; } 181 | 182 | /* margin-right */ 183 | .mr0 { margin-right: 0; } 184 | .mr1 { margin-right: .25rem; } 185 | .mr2 { margin-right: .5rem; } 186 | .mr3 { margin-right: 1rem; } 187 | .mr4 { margin-right: 2rem; } 188 | .mr5 { margin-right: 4rem; } 189 | .mr6 { margin-right: 8rem; } 190 | 191 | /* margin-top */ 192 | .mt0 { margin-top: 0; } 193 | .mt1 { margin-top: .25rem; } 194 | .mt2 { margin-top: .5rem; } 195 | .mt3 { margin-top: 1rem; } 196 | .mt4 { margin-top: 2rem; } 197 | .mt5 { margin-top: 4rem; } 198 | .mt6 { margin-top: 8rem; } 199 | 200 | /* margin-top and margin-bottom */ 201 | .mv0 { margin-top: 0; margin-bottom: 0; } 202 | .mv1 { margin-top: .25rem; margin-bottom: .25rem; } 203 | .mv2 { margin-top: .5rem; margin-bottom: .5rem; } 204 | .mv3 { margin-top: 1rem; margin-bottom: 1rem; } 205 | .mv4 { margin-top: 2rem; margin-bottom: 2rem; } 206 | .mv5 { margin-top: 4rem; margin-bottom: 4rem; } 207 | .mv6 { margin-top: 8rem; margin-bottom: 8rem; } 208 | 209 | /* margin-right and margin-left */ 210 | .mh0 { margin-left: 0; margin-right: 0; } 211 | .mh1 { margin-left: .25rem; margin-right: .25rem; } 212 | .mh2 { margin-left: .5rem; margin-right: .5rem; } 213 | .mh3 { margin-left: 1rem; margin-right: 1rem; } 214 | .mh4 { margin-left: 2rem; margin-right: 2rem; } 215 | .mh5 { margin-left: 4rem; margin-right: 4rem; } 216 | .mh6 { margin-left: 8rem; margin-right: 8rem; } 217 | 218 | /* max-width */ 219 | .mw1 { max-width: 1rem; } 220 | .mw2 { max-width: 2rem; } 221 | .mw3 { max-width: 3rem; } 222 | .mw4 { max-width: 4rem; } 223 | .mw5 { max-width: 5rem; } 224 | .mw6 { max-width: 6rem; } 225 | .mw7 { max-width: 7rem; } 226 | .mw8 { max-width: 8rem; } 227 | .mw9 { max-width: 10rem; } 228 | .mw10 { max-width: 12rem; } 229 | .mw11 { max-width: 20rem; } 230 | .mw12 { max-width: 24rem; } 231 | .mw13 { max-width: 30rem; } 232 | .mw14 { max-width: 36rem; } 233 | .mw15 { max-width: 64rem; } 234 | .mw16 { max-width: 96rem; } 235 | .mw100pc { max-width: 100%; } 236 | 237 | /* min-width */ 238 | .min-width1 { min-width: 1.5rem; } 239 | .min-width2 { min-width: 7rem; } 240 | 241 | /* overflow */ 242 | .overflow-auto { overflow: auto; } 243 | .overflow-x-scroll { overflow-x: scroll; } 244 | 245 | /* padding */ 246 | .pa0 { padding: 0; } 247 | .pa1 { padding: .25rem; } 248 | .pa2 { padding: .5rem; } 249 | .pa3 { padding: 1rem; } 250 | .pa4 { padding: 2rem; } 251 | .pa5 { padding: 4rem; } 252 | .pa6 { padding: 8rem; } 253 | .pa7 { padding: 16rem; } 254 | 255 | /* padding-bottom */ 256 | .pb0 { padding-bottom: 0; } 257 | .pb1 { padding-bottom: .25rem; } 258 | .pb2 { padding-bottom: .5rem; } 259 | .pb3 { padding-bottom: 1rem; } 260 | .pb4 { padding-bottom: 2rem; } 261 | .pb5 { padding-bottom: 4rem; } 262 | .pb6 { padding-bottom: 8rem; } 263 | .pb7 { padding-bottom: 16rem; } 264 | 265 | /* padding-left */ 266 | .pl0 { padding-left: 0; } 267 | .pl1 { padding-left: .25rem; } 268 | .pl2 { padding-left: .5rem; } 269 | .pl3 { padding-left: 1rem; } 270 | .pl4 { padding-left: 2rem; } 271 | .pl5 { padding-left: 4rem; } 272 | .pl6 { padding-left: 8rem; } 273 | .pl7 { padding-left: 16rem; } 274 | 275 | /* padding-right */ 276 | .pr0 { padding-right: 0; } 277 | .pr1 { padding-right: .25rem; } 278 | .pr2 { padding-right: .5rem; } 279 | .pr3 { padding-right: 1rem; } 280 | .pr4 { padding-right: 2rem; } 281 | .pr5 { padding-right: 4rem; } 282 | .pr6 { padding-right: 8rem; } 283 | .pr7 { padding-right: 16rem; } 284 | 285 | /* padding-top */ 286 | .pt0 { padding-top: 0; } 287 | .pt1 { padding-top: .25rem; } 288 | .pt2 { padding-top: .5rem; } 289 | .pt3 { padding-top: 1rem; } 290 | .pt4 { padding-top: 2rem; } 291 | .pt5 { padding-top: 4rem; } 292 | .pt6 { padding-top: 8rem; } 293 | .pt7 { padding-top: 16rem; } 294 | 295 | /* padding-top and padding-bottom */ 296 | .pv1 { padding-top: .25rem; padding-bottom: .25rem; } 297 | .pv2 { padding-top: .5rem; padding-bottom: .5rem; } 298 | .pv3 { padding-top: 1rem; padding-bottom: 1rem; } 299 | .pv4 { padding-top: 2rem; padding-bottom: 2rem; } 300 | .pv5 { padding-top: 4rem; padding-bottom: 4rem; } 301 | .pv6 { padding-top: 8rem; padding-bottom: 8rem; } 302 | .pv7 { padding-top: 16rem; padding-bottom: 16rem; } 303 | 304 | /* padding-right and padding-left */ 305 | .ph0 { padding-left: 0; padding-right: 0; } 306 | .ph1 { padding-left: .25rem; padding-right: .25rem; } 307 | .ph2 { padding-left: .5rem; padding-right: .5rem; } 308 | .ph3 { padding-left: 1rem; padding-right: 1rem; } 309 | .ph4 { padding-left: 2rem; padding-right: 2rem; } 310 | .ph5 { padding-left: 4rem; padding-right: 4rem; } 311 | .ph6 { padding-left: 8rem; padding-right: 8rem; } 312 | .ph7 { padding-left: 16rem; padding-right: 16rem; } 313 | 314 | /* position */ 315 | .relative { position: relative; } 316 | .absolute { position: absolute; } 317 | 318 | /* text-align */ 319 | .tl { text-align: left; } 320 | .tc { text-align: center; } 321 | 322 | /* text-transform */ 323 | .ttu { text-transform: uppercase; } 324 | 325 | /* text-decoration */ 326 | .tdn, .tdn:link, .tdn:visited, .tdn:hover, .tdn:active, .tdn:focus { text-decoration: none; } 327 | 328 | /* white-space */ 329 | .ws-normal { white-space: normal; } 330 | .ws-nowrap { white-space: nowrap; } 331 | .ws-prewrap { white-space: pre-wrap; } 332 | 333 | /* width */ 334 | .w1 { width: 1rem; } 335 | .w2 { width: 2rem; } 336 | .w3 { width: 3rem; } 337 | .w4 { width: 4rem; } 338 | .w5 { width: 5rem; } 339 | .w6 { width: 6rem; } 340 | .w7 { width: 8rem; } 341 | .w8 { width: 9rem; } 342 | .w9 { width: 10rem; } 343 | .w10 { width: 14rem; } 344 | .w11 { width: 16rem; } 345 | .w12 { width: 20rem; } 346 | .w33pc { width: 33%; } 347 | .w100pc { width: 100%; } 348 | 349 | /* Actions, hover states and misc */ 350 | .button-press:active { position: relative; top: 2px; } 351 | .shake-red-border:focus { animation-name: shake; animation-duration: 500ms; animation-fill-mode: both; border-color: red; } 352 | @keyframes shake { from, to { transform: translate3d(0, 0, 0); } 20%, 60% { transform: translate3d(-5px, 0, 0); } 40%, 80% { transform: translate3d(5px, 0, 0); } } 353 | .hover-bg-grey-grow:hover { background-color: #EEEEEE; transition: 100ms ease-out; transform: scale(1.2); } 354 | .hover-bg-grey:hover { background-color: #EEEEEE; transition: 100ms ease-out; } 355 | 356 | /* @media */ 357 | @media (max-width: 48em) { 358 | .bn-s { border: 0; } 359 | .shadow0-s { box-shadow: none; } 360 | .db-s { display: block; } 361 | .hover-bg-white-s:hover { background-color: #FFFFFF; } 362 | .ma0-s { margin: 0; } 363 | .pa0-s { padding: 0; } 364 | .ph1-s { padding-left: 1rem; padding-right: 1rem; } 365 | } 366 | -------------------------------------------------------------------------------- /ui-components-v0.2.min.css: -------------------------------------------------------------------------------- 1 | .font-antialiased{-webkit-font-smoothing:antialiased}.bg-black{background-color:#000}.bg-grey{background-color:#999}.bg-purple{background-color:#9012FE}.bg-silver{background-color:#EEE}.bg-blue{background-color:#4990E2}.bg-red{background-color:#D0011B}.bg-orange{background-color:#F6A623}.bg-green{background-color:#6FC214}.bg-white{background-color:#FFF}.hover-bg-grey-grow:hover,.hover-bg-grey:hover{background-color:#EEE;transition:.1s ease-out}.br0{border-radius:0}.br1{border-radius:.125rem}.br2{border-radius:.25rem}.br3{border-radius:.5rem}.br4{border-radius:1rem}.br100pc{border-radius:100%}.br-pill{border-radius:9999px}.br-right{border-top-left-radius:0;border-bottom-left-radius:0}.br-left{border-top-right-radius:0;border-bottom-right-radius:0}.border-collapse{border-collapse:collapse;border-spacing:0}.border-black{border-color:#000}.border-grey{border-color:#999}.border-purple{border-color:#9012FE}.border-silver{border-color:#CCC}.border-blue{border-color:#4990E2}.border-red{border-color:#D0011B}.border-orange{border-color:#F6A623}.border-green{border-color:#6FC214}.border-white{border-color:#FFF}.ba{border-style:solid;border-width:1px}.bn,.bw0{border-width:0}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none}.bw1{border-width:.125rem}.bw4{border-width:1rem}.bw6{border-width:6rem}.shadow{box-shadow:0 1px 2px 2px rgba(0,0,0,.1)}.shadow1{box-shadow:4px 4px 18px 4px rgba(0,0,0,.1)}.right2{right:2rem}.bottom-1{bottom:-1rem}.bottom-2{bottom:-2rem}.left1{left:1rem}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.white{color:#FFF}.silver{color:#EEE}.black{color:#000}.dark-grey{color:#555}.grey{color:#999}.blue{color:#1B76DF}.red{color:#D0011B}.green{color:#417505}.purple{color:#9012FE}.yellow{color:#FFEF00}.pointer{cursor:pointer}.not-allowed{cursor:not-allowed}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.dt{display:table}.dtrow{display:table-row}.dtcell{display:table-cell}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.items-end{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.self-center{align-self:center}.content-end{align-content:flex-end}.fl{float:left}.fr{float:right}.fn{float:none}.system-font{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif}.monospace{font-family:Inconsolata,Consolas,Monaco,monospace}.fstiny{font-size:.7rem}.fs1{font-size:.875rem}.fs2{font-size:1rem}.fs3{font-size:1.25rem}.fs4{font-size:1.5rem}.fs5{font-size:1.75rem}.fs6{font-size:2rem}.fs10{font-size:3rem}.fs11{font-size:5rem}.fw400{font-weight:400}.fw500{font-weight:500}.fw700{font-weight:700}.h1{height:1rem}.h2{height:2rem}.h3{height:3rem}.h4{height:4rem}.h5{height:5rem}.h6{height:6rem}.h7{height:8rem}.h8{height:9rem}.h9{height:10rem}.h10{height:14rem}.h11{height:16rem}.h12{height:20rem}.h25pc{height:25%}.h50pc{height:50%}.h75pc{height:75%}.h100pc{height:100%}.lh-heading{line-height:1.25}.lh-body{line-height:1.5}.list-none{list-style-type:none}.center{margin-right:auto;margin-left:auto}.ma0{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:3rem}.mw4{max-width:4rem}.mw5{max-width:5rem}.mw6{max-width:6rem}.mw7{max-width:7rem}.mw8{max-width:8rem}.mw9{max-width:10rem}.mw10{max-width:12rem}.mw11{max-width:20rem}.mw12{max-width:24rem}.mw13{max-width:30rem}.mw14{max-width:36rem}.mw15{max-width:64rem}.mw16{max-width:96rem}.mw100pc{max-width:100%}.min-width1{min-width:1.5rem}.min-width2{min-width:7rem}.overflow-auto{overflow:auto}.overflow-x-scroll{overflow-x:scroll}.pa0{padding:0}.pa1{padding:.25rem}.pa2{padding:.5rem}.pa3{padding:1rem}.pa4{padding:2rem}.pa5{padding:4rem}.pa6{padding:8rem}.pa7{padding:16rem}.pb0{padding-bottom:0}.pb1{padding-bottom:.25rem}.pb2{padding-bottom:.5rem}.pb3{padding-bottom:1rem}.pb4{padding-bottom:2rem}.pb5{padding-bottom:4rem}.pb6{padding-bottom:8rem}.pb7{padding-bottom:16rem}.pl0{padding-left:0}.pl1{padding-left:.25rem}.pl2{padding-left:.5rem}.pl3{padding-left:1rem}.pl4{padding-left:2rem}.pl5{padding-left:4rem}.pl6{padding-left:8rem}.pl7{padding-left:16rem}.pr0{padding-right:0}.pr1{padding-right:.25rem}.pr2{padding-right:.5rem}.pr3{padding-right:1rem}.pr4{padding-right:2rem}.pr5{padding-right:4rem}.pr6{padding-right:8rem}.pr7{padding-right:16rem}.pt0{padding-top:0}.pt1{padding-top:.25rem}.pt2{padding-top:.5rem}.pt3{padding-top:1rem}.pt4{padding-top:2rem}.pt5{padding-top:4rem}.pt6{padding-top:8rem}.pt7{padding-top:16rem}.pv1{padding-top:.25rem;padding-bottom:.25rem}.pv2{padding-top:.5rem;padding-bottom:.5rem}.pv3{padding-top:1rem;padding-bottom:1rem}.pv4{padding-top:2rem;padding-bottom:2rem}.pv5{padding-top:4rem;padding-bottom:4rem}.pv6{padding-top:8rem;padding-bottom:8rem}.pv7{padding-top:16rem;padding-bottom:16rem}.ph0{padding-left:0;padding-right:0}.ph1{padding-left:.25rem;padding-right:.25rem}.ph2{padding-left:.5rem;padding-right:.5rem}.ph3{padding-left:1rem;padding-right:1rem}.ph4{padding-left:2rem;padding-right:2rem}.ph5{padding-left:4rem;padding-right:4rem}.ph6{padding-left:8rem;padding-right:8rem}.ph7{padding-left:16rem;padding-right:16rem}.relative{position:relative}.absolute{position:absolute}.tl{text-align:left}.tc{text-align:center}.ttu{text-transform:uppercase}.tdn,.tdn:active,.tdn:focus,.tdn:hover,.tdn:link,.tdn:visited{text-decoration:none}.ws-normal{white-space:normal}.ws-nowrap{white-space:nowrap}.ws-prewrap{white-space:pre-wrap}.w1{width:1rem}.w2{width:2rem}.w3{width:3rem}.w4{width:4rem}.w5{width:5rem}.w6{width:6rem}.w7{width:8rem}.w8{width:9rem}.w9{width:10rem}.w10{width:14rem}.w11{width:16rem}.w12{width:20rem}.w33pc{width:33%}.w100pc{width:100%}.button-press:active{position:relative;top:2px}.shake-red-border:focus{animation-name:shake;animation-duration:.5s;animation-fill-mode:both;border-color:red}@keyframes shake{from,to{transform:translate3d(0,0,0)}20%,60%{transform:translate3d(-5px,0,0)}40%,80%{transform:translate3d(5px,0,0)}}.hover-bg-grey-grow:hover{transform:scale(1.2)}@media (max-width:48em){.bn-s{border:0}.shadow0-s{box-shadow:none}.db-s{display:block}.hover-bg-white-s:hover{background-color:#FFF}.ma0-s{margin:0}.pa0-s{padding:0}.ph1-s{padding-left:1rem;padding-right:1rem}} 2 | -------------------------------------------------------------------------------- /ui-components-v0.2.min.css.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/philipardeljan/ui-components/d7840ad31199062dd4ebc6bcf9e066ef10457bcd/ui-components-v0.2.min.css.zip --------------------------------------------------------------------------------