├── .gitignore ├── README.md ├── dist ├── images │ ├── dog_1.jpg │ ├── dog_2.jpg │ ├── dog_3.jpg │ ├── dog_4.jpg │ └── dog_5.jpg ├── index.html └── styles.css ├── package.json └── src ├── examples ├── card-group.html ├── card.html ├── centered-icon.html ├── centered-prompt.html ├── feature-list.html ├── form-footer.html ├── gallery.html ├── mosaic.html ├── photo.html ├── post.html ├── side-bar.html ├── site-header.html ├── stepper-input.html ├── stream.html └── tabs.html ├── images ├── dog_1.jpg ├── dog_2.jpg ├── dog_3.jpg ├── dog_4.jpg └── dog_5.jpg ├── index.css ├── index.jade └── styles ├── card-group.css ├── card.css ├── centered-icon.css ├── centered-prompt.css ├── feature-list.css ├── form-footer.css ├── gallery.css ├── mosaic.css ├── photo.css ├── post.css ├── side-bar.css ├── site-header.css ├── stepper-input.css ├── stream.css └── tabs.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .sass-cache 4 | *.log 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flexbox Patterns 2 | 3 | This repository contains the original CSS used for the 4 | components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com). 5 | Feel free to use these styles however you like! 6 | 7 | ## Getting started 8 | 9 | Assuming you have Node installed, you can install the project dependencies with 10 | `npm install`. This will install PostCSS and Autoprefixer; two critical tools 11 | for making your CSS cross-browser compatible. 12 | 13 | ## Commands 14 | 15 | `npm run build` 16 | 17 | This command will concatenate the source CSS files into a single CSS file, and 18 | then use PostCSS to add various vendor-prefixed properties. Open up 19 | `dist/index.html` to see a demo page of the various flexbox patterns in the 20 | browser. 21 | 22 | ## Things to keep in mind 23 | 24 | _I don't recommend copy-pasting these examples directly into production code._ 25 | I'm only trying to demonstrate different ways of using flexbox through these 26 | examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the `role` attribute). Before using this 27 | code in production you should make sure it meets your accessibility needs. 28 | -------------------------------------------------------------------------------- /dist/images/dog_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/dist/images/dog_1.jpg -------------------------------------------------------------------------------- /dist/images/dog_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/dist/images/dog_2.jpg -------------------------------------------------------------------------------- /dist/images/dog_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/dist/images/dog_3.jpg -------------------------------------------------------------------------------- /dist/images/dog_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/dist/images/dog_4.jpg -------------------------------------------------------------------------------- /dist/images/dog_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/dist/images/dog_5.jpg -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Flexbox Patterns Demo Page 5 | 6 | 7 | 8 | 9 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 |
33 | 34 |
35 |
Tab 1
36 |
Tab 2
37 |
Tab 3
38 |
Tab 4
39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 | 49 |
Inbox
50 |
Sent
51 |
Trash
52 |
53 | 54 |
55 |
Settings
56 |
Log out
57 |
58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 |  Saving... 67 |
68 |
69 | 70 |
71 |
Reset
72 |
Save
73 |
74 |
75 | 76 |
77 | 78 |
79 |
80 |
81 | 82 |
83 |
Sherlyn S.
84 |
85 |
86 |
87 | I built a tree house out of reclaimed cedar and gave it a coat of my home-made 88 | organic coffee-based varnish. Tree housewarming party this weekend! 89 |
90 |
91 | December 4 92 |
93 |
94 |
95 |
96 | 97 |
98 | 99 |
100 |
Inbox
101 |
Contacts
102 |
Account
103 |
104 | 105 |
106 |
Change theme
107 |
Legal
108 |
109 |
110 | 111 |
112 | 113 |
114 |
115 |
116 |
117 |
Welcome to the app!
118 |
Thanks for signing up. Let’s take a look around.
119 |
Begin tour
120 |
121 | 122 |
123 | 124 |
125 |
126 |
127 | 128 |
129 | 130 |
131 |
132 |
133 |
134 |
The calendar feature makes scheduling a snap.
135 |
136 |
137 |
138 |
139 |
140 |
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
141 |
142 |
143 |
144 |
145 |
146 |
You can get notified by email or SMS.
147 |
148 | 149 |
150 | 151 |
152 |
153 |
154 |
155 | 156 |
157 |
CJ C.
158 |
159 |
160 |
161 | Going hiking with @karla in Yosemite! 162 |
163 |
164 | May 27 165 |
166 |
167 |
168 | 169 |
170 |
171 |
172 | 173 |
174 |
Jatesh V.
175 |
176 |
177 |
178 | Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my 179 | life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com! 180 | Love flexboxpatterns.com! 181 |
182 |
183 | May 28 184 |
185 |
186 |
187 | 188 |
189 |
190 |
191 | 192 |
193 |
Damien S.
194 |
195 |
196 |
197 | Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover 198 | #replicant 199 |
200 |
201 | June 1 202 |
203 |
204 |
205 | 206 |
207 |
208 |
209 | 210 |
211 |
Ziggie G.
212 |
213 |
214 |
215 | I love eating pizza!!!!!!! 216 |
217 |
218 | June 5 219 |
220 |
221 |
222 |
223 |
224 | 225 |
226 |
227 |
228 |
Science potion
229 |
230 |
Costs $5
231 |
232 | 233 |
234 | 235 |
236 |
237 |
238 |
239 |
Trial
240 |
241 |
Free!
242 |
243 |
244 |
245 |
246 |
Basic tier
(most popular)
247 |
248 |
$10.00
249 |
250 |
251 |
252 |
253 |
Advanced tier
(only for enterprise-level professionals)
254 |
255 |
$6,000.00
256 |
257 |
258 | 259 |
260 | 261 |
262 | Sup, dog 263 |
264 |
265 | 266 |
267 |
1
268 |
2
269 |
3
270 |
4
271 |
5
272 |
6
273 |
7
274 |
8
275 |
9
276 |
10
277 |
278 |
279 | 280 |
281 |
1
282 |
2
283 |
3
284 |
4
285 |
5
286 |
6
287 |
7
288 |
8
289 |
9
290 |
10
291 |
11
292 |
12
293 |
13
294 |
14
295 |
296 | 297 |
298 | 299 | -------------------------------------------------------------------------------- /dist/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | /*===================================================== 6 | contents of: styles/stepper-input.css 7 | =====================================================*/ 8 | .stepperInput { 9 | /** 10 | * Setting display to flex makes this container lay 11 | * out its children using flexbox. By default, it 12 | * orders items horizontally, top-aligned. 13 | * This has a similar effect to setting the children 14 | * to have display: inline-block. 15 | */ 16 | display: -ms-flexbox; 17 | display: flex; 18 | } 19 | 20 | .stepperInput__input { 21 | border-left: 0; 22 | border-right: 0; 23 | width: 60px; 24 | text-align: center; 25 | } 26 | 27 | .button { 28 | cursor: pointer; 29 | padding: 5px 15px; 30 | color: #FFFFFF; 31 | background-color: #4EBBE4; 32 | font-size: 12px; 33 | border: 1px solid #16A2D7; 34 | border-radius: 4px; 35 | } 36 | 37 | .button--addOnLeft { 38 | border-top-right-radius: 0; 39 | border-bottom-right-radius: 0; 40 | } 41 | 42 | .button--addOnRight { 43 | border-top-left-radius: 0; 44 | border-bottom-left-radius: 0; 45 | } 46 | 47 | .input { 48 | border: 1px solid #D7DBDD; 49 | padding: 0 10px; 50 | border-radius: 0; 51 | box-shadow: none; 52 | } 53 | /*===================================================== 54 | contents of: styles/tabs.css 55 | =====================================================*/ 56 | .tabs { 57 | /** 58 | * Setting display to flex makes this container lay 59 | * out its children using flexbox, the exact same 60 | * as in the above "Stepper input" example. 61 | */ 62 | display: -ms-flexbox; 63 | display: flex; 64 | 65 | border-bottom: 1px solid #D7DBDD; 66 | } 67 | 68 | .tab { 69 | cursor: pointer; 70 | padding: 5px 30px; 71 | color: #16A2D7; 72 | font-size: 12px; 73 | border-bottom: 2px solid transparent; 74 | } 75 | 76 | .tab.is-tab-selected { 77 | border-bottom-color: #4EBBE4; 78 | } 79 | 80 | /*===================================================== 81 | contents of: styles/site-header.css 82 | =====================================================*/ 83 | .siteHeader { 84 | /** 85 | * Lay out the children of this container with 86 | * flexbox, which is horizontal by default. 87 | */ 88 | display: -ms-flexbox; 89 | display: flex; 90 | 91 | /** 92 | * Make the container put as much space as possible 93 | * between its children, with the children at either 94 | * end laying flush against the container's edges. 95 | */ 96 | -ms-flex-pack: justify; 97 | justify-content: space-between; 98 | 99 | padding: 10px; 100 | background-color: #56727C; 101 | } 102 | 103 | .siteHeader__section { 104 | /** 105 | * Lay out the children of this container with 106 | * flexbox. 107 | */ 108 | display: -ms-flexbox; 109 | display: flex; 110 | 111 | /** 112 | * Align the children in the center, along 113 | * the main axis. By default the children will 114 | * align along their top edges. 115 | */ 116 | -ms-flex-align: center; 117 | align-items: center; 118 | } 119 | 120 | .siteHeader__item { 121 | padding: 5px 15px; 122 | font-size: 12px; 123 | } 124 | 125 | .siteHeader__item + .siteHeader__item { 126 | margin-left: 5px; 127 | } 128 | 129 | .siteHeader__item.is-site-header-item-selected { 130 | color: #FFFFFF; 131 | background-color: #415F69; 132 | border-radius: 4px; 133 | } 134 | 135 | .siteHeaderLogo { 136 | font-size: 20px; 137 | line-height: 0; 138 | color: white; 139 | } 140 | 141 | .siteHeaderButton { 142 | cursor: pointer; 143 | color: #D9E9EF; 144 | } 145 | 146 | /*===================================================== 147 | contents of: styles/form-footer.css 148 | =====================================================*/ 149 | .formFooter { 150 | /** 151 | * Lay out the children of this container with 152 | * flexbox, which is horizontal by default. 153 | */ 154 | display: -ms-flexbox; 155 | display: flex; 156 | 157 | /** 158 | * Make the container put as much space as possible 159 | * between its children, with the children at either 160 | * end laying flush against the container's edges. 161 | */ 162 | -ms-flex-pack: justify; 163 | justify-content: space-between; 164 | 165 | /** 166 | * Align the children in the center, along 167 | * the main axis, which is horizontal in this case. 168 | */ 169 | -ms-flex-align: center; 170 | align-items: center; 171 | 172 | border-top: 1px solid #D7DBDD; 173 | padding: 10px; 174 | } 175 | 176 | .formFooter__section { 177 | /** 178 | * This container orders items horizontally. 179 | */ 180 | display: -ms-flexbox; 181 | display: flex; 182 | 183 | /** 184 | * It aligns them vertically in the center. 185 | */ 186 | -ms-flex-align: center; 187 | align-items: center; 188 | } 189 | 190 | .formFooter__item + .formFooter__item { 191 | margin-left: 5px; 192 | } 193 | 194 | .formFooterFeedback { 195 | color: #86969C; 196 | font-size: 12px; 197 | line-height: 0; 198 | } 199 | 200 | .formFooterSpinner { 201 | animation: formFooterSpinner 1s infinite steps(8, end); 202 | } 203 | 204 | @keyframes formFooterSpinner { 205 | 0% { transform: rotate(0deg); } 206 | 100% { transform: rotate(360deg); } 207 | } 208 | 209 | .button--clear { 210 | color: #16A2D7; 211 | background-color: #FFFFFF; 212 | border: 1px solid #FFFFFF; 213 | } 214 | 215 | /*===================================================== 216 | contents of: styles/post.css 217 | =====================================================*/ 218 | .post { 219 | /** 220 | * Lay out the children of this container with 221 | * flexbox, which is horizontal by default. 222 | */ 223 | display: -ms-flexbox; 224 | display: flex; 225 | } 226 | 227 | .postUser { 228 | /** 229 | * The flex property is a short-hand for setting 230 | * the flex-grow, flex-shrink, and flex-basis 231 | * properties. These properties control how the 232 | * element resizes to fill its container. 233 | * 234 | * The value we're using here is actually the 235 | * default, but I'm including so I can explain it 236 | * a bit. The default value equates to: 237 | * 238 | * - flex-grow: 0 239 | * - flex-shrink: 1 240 | * - flex-basis: auto 241 | * 242 | * We set flex-grow to 0, so this element won't 243 | * expand to fill its container. 244 | * 245 | * We'll then set flex-shrink to 1 so that the 246 | * element will shrink as its container gets 247 | * smaller. However, it will only shrink so far 248 | * because... 249 | * 250 | * ...we set flex-basis to auto. This causes 251 | * the content's size to also be a factor in the 252 | * calculation of the element's size. Because 253 | * the width of a child element is set (below), 254 | * this element won't shrink below that size. 255 | * 256 | * The net result is that this element stays a 257 | * fixed size, neither expanding nor shrinking. 258 | */ 259 | -ms-flex: 0 1 auto; 260 | flex: 0 1 auto; 261 | 262 | padding-bottom: 10px; 263 | } 264 | 265 | .postUser__portrait { 266 | /** 267 | * We're using these three flexbox properties 268 | * here to center the portrait icon inside of 269 | * this element. 270 | * 271 | * We'll explore these properties in more detail 272 | * in the "Stay Centered" section, so I'll only 273 | * briefly summarize here: 274 | * 275 | * - display: flex instructs the browser to 276 | * use flexbox to lay out this element's 277 | * children. 278 | * - justify-content: center will center the 279 | * icon along the main axis. 280 | * - align-items: center will center the icon 281 | * along the secondary (perpendicular) axis. 282 | */ 283 | display: -ms-flexbox; 284 | display: flex; 285 | -ms-flex-pack: center; 286 | justify-content: center; 287 | -ms-flex-align: center; 288 | align-items: center; 289 | 290 | width: 100px; 291 | height: 90px; 292 | font-size: 70px; 293 | line-height: 0; 294 | } 295 | 296 | .postUser__name { 297 | color: #57727C; 298 | font-size: 12px; 299 | font-weight: 700; 300 | line-height: 1; 301 | text-align: center; 302 | } 303 | 304 | .postBody { 305 | /** 306 | * We'll use the short-hand flex property again 307 | * here, to make the body of the post expand to 308 | * fill the container, and shrink as the container 309 | * becomes narrower. 310 | * 311 | * By setting flex-grow to 1, we cause this 312 | * element to expand to fill the container. 313 | * 314 | * Setting flex-shrink to 1 causes this element 315 | * to shrink with the container. 316 | * 317 | * Last, we set flex-basis to 0 so that its 318 | * size is solely determined by the size of 319 | * the container. (The default value is auto, 320 | * which would cause the content's size to also 321 | * be a factor in this calculation.) 322 | * 323 | * The net result of these properties is that the 324 | * element is a fluid size, and will expand and 325 | * shrink with its container. 326 | * 327 | * NOTE: IE11 ignores flex short-hand declarations 328 | * with unitless flex-basis values. So we have to 329 | * use 0% instead of 0 as a workaround. You can 330 | * find more info at: 331 | * github.com/philipwalton/flexbugs. 332 | */ 333 | -ms-flex: 1 1 0%; 334 | flex: 1 1 0%; 335 | 336 | position: relative; 337 | padding: 15px; 338 | border: 1px solid #CAD0D2; 339 | border-radius: 4px; 340 | } 341 | 342 | .postBody:after, 343 | .postBody:before { 344 | right: 100%; 345 | top: 35px; 346 | border: solid transparent; 347 | content: " "; 348 | height: 0; 349 | width: 0; 350 | position: absolute; 351 | pointer-events: none; 352 | } 353 | 354 | .postBody:after { 355 | border-color: transparent; 356 | border-right-color: #ffffff; 357 | border-width: 8px; 358 | margin-top: -8px; 359 | } 360 | 361 | .postBody:before { 362 | border-color: transparent; 363 | border-right-color: #CAD0D2; 364 | border-width: 9px; 365 | margin-top: -9px; 366 | } 367 | 368 | .postBody__content { 369 | color: #57727C; 370 | font-size: 12px; 371 | } 372 | 373 | .postBody__date { 374 | margin-top: 5px; 375 | color: #86969C; 376 | font-size: 10px; 377 | text-transform: uppercase; 378 | letter-spacing: 1px; 379 | } 380 | 381 | /*===================================================== 382 | contents of: styles/side-bar.css 383 | =====================================================*/ 384 | .sideBar { 385 | /** 386 | * This container orders items according to flexbox 387 | * rules. By default, this would arrange its children 388 | * horizontally. However, the next property... 389 | */ 390 | display: -ms-flexbox; 391 | display: flex; 392 | 393 | /** 394 | * ...sets the main axis to be vertical instead of 395 | * horizontal, so now the children are laid out 396 | * vertically, from top to bottom. 397 | */ 398 | -ms-flex-direction: column; 399 | flex-direction: column; 400 | 401 | /** 402 | * It will also put as much space as possible 403 | * between its children, with the children at either end 404 | * laying flush against the container's edges. 405 | */ 406 | -ms-flex-pack: justify; 407 | justify-content: space-between; 408 | 409 | height: 300px; 410 | width: 150px; 411 | border-right: 1px solid #D7DBDD; 412 | background-color: #FCFDFD; 413 | padding: 10px; 414 | } 415 | 416 | .sideBar__item { 417 | cursor: pointer; 418 | padding: 5px 10px; 419 | color: #16A2D7; 420 | font-size: 12px; 421 | } 422 | 423 | .sideBar__item.is-side-bar-item-selected { 424 | background-color: #EEF3F5; 425 | border-radius: 4px; 426 | } 427 | 428 | /*===================================================== 429 | contents of: styles/centered-prompt.css 430 | =====================================================*/ 431 | .centeredPrompt { 432 | /** 433 | * Lay out the children of this container with 434 | * flexbox. 435 | */ 436 | display: -ms-flexbox; 437 | display: flex; 438 | 439 | /** 440 | * Rotate the main axis so that the children 441 | * are laid out vertically, the same as in the 442 | * above "Side bar" example. 443 | */ 444 | -ms-flex-direction: column; 445 | flex-direction: column; 446 | 447 | /** 448 | * Instead of pushing the children apart, as in 449 | * previous examples, we will group them together 450 | * in the center of their container. 451 | */ 452 | -ms-flex-pack: center; 453 | justify-content: center; 454 | 455 | /** 456 | * Align the children in the center, along 457 | * the main axis. Because the direction is 458 | * "column" this has a similar effect as setting 459 | * text-align: center. 460 | */ 461 | -ms-flex-align: center; 462 | align-items: center; 463 | 464 | min-height: 300px; 465 | padding: 10px; 466 | } 467 | 468 | .centeredPrompt__item + .centeredPrompt__item { 469 | margin-top: 5px; 470 | } 471 | 472 | .centeredPromptIcon { 473 | font-size: 60px; 474 | line-height: 0; 475 | } 476 | 477 | .centeredPromptLabel { 478 | color: #86969C; 479 | font-size: 30px; 480 | font-weight: 700; 481 | text-align: center; 482 | } 483 | 484 | .centeredPromptDetails { 485 | color: #86969C; 486 | font-size: 16px; 487 | margin-bottom: 10px; 488 | text-align: center; 489 | } 490 | 491 | .icon { 492 | color: #BCD2DA; 493 | } 494 | 495 | /*===================================================== 496 | contents of: styles/centered-icon.css 497 | =====================================================*/ 498 | .centeredIcon { 499 | /** 500 | * Lay out the children of this container with 501 | * flexbox. 502 | */ 503 | display: -ms-flexbox; 504 | display: flex; 505 | 506 | /** 507 | * As in the above "Centered prmopt" example, 508 | * we'll rotate the main axis so that the children 509 | * are ordered vertically. 510 | */ 511 | -ms-flex-direction: column; 512 | flex-direction: column; 513 | 514 | /** 515 | * Same thing here as before: group the children 516 | * together in the center of their container. 517 | */ 518 | -ms-flex-pack: center; 519 | justify-content: center; 520 | 521 | /** 522 | * Just like in the "Centered prmopt" example, 523 | * align the children in the center, along the 524 | * main axis. 525 | */ 526 | -ms-flex-align: center; 527 | align-items: center; 528 | 529 | border: 1px solid #D7DBDD; 530 | font-size: 40px; 531 | width: 90px; 532 | height: 90px; 533 | border-radius: 100%; 534 | box-shadow: 535 | 0 2px 1px rgba(0, 0, 0, 0.05), 536 | 0 2px 3px rgba(0, 0, 0, 0.05), 537 | 0 4px 8px rgba(0, 0, 0, 0.05); 538 | } 539 | 540 | /*===================================================== 541 | contents of: styles/feature-list.css 542 | =====================================================*/ 543 | .featureListItem { 544 | /** 545 | * Lay out the children of this container with 546 | * flexbox, which is horizontal by default. 547 | */ 548 | display: -ms-flexbox; 549 | display: flex; 550 | 551 | /** 552 | * Align the children in the center, along 553 | * the main axis, which is horizontal in this case. 554 | */ 555 | -ms-flex-align: center; 556 | align-items: center; 557 | 558 | max-width: 400px; 559 | padding: 10px; 560 | } 561 | 562 | .featureListItem + .featureListItem { 563 | border-top: 1px solid #D7DBDD; 564 | } 565 | 566 | .featureListItem--reverse { 567 | /** 568 | * We can specify the flex-direction so that 569 | * the children elements are displayed in the 570 | * reverse order of how they appear in the 571 | * markup. 572 | */ 573 | -ms-flex-direction: row-reverse; 574 | flex-direction: row-reverse; 575 | } 576 | 577 | .featureListItem__icon, 578 | .featureListItem__description { 579 | padding: 5px 15px; 580 | } 581 | 582 | .featureListItem__icon { 583 | font-size: 50px; 584 | line-height: 0; 585 | } 586 | 587 | .featureListItem__description { 588 | color: #57727C; 589 | font-size: 12px; 590 | } 591 | 592 | /*===================================================== 593 | contents of: styles/stream.css 594 | =====================================================*/ 595 | .stream { 596 | /** 597 | * Lay out the children of this container with 598 | * flexbox. 599 | */ 600 | display: -ms-flexbox; 601 | display: flex; 602 | 603 | /* 604 | * Set the main axis to be vertical, but present 605 | * the children in reverse order of that in which 606 | * they occur in the DOM. 607 | */ 608 | -ms-flex-direction: column-reverse; 609 | flex-direction: column-reverse; 610 | } 611 | 612 | .post + .post { 613 | margin-bottom: 5px; 614 | } 615 | 616 | /*===================================================== 617 | contents of: styles/card.css 618 | =====================================================*/ 619 | .card { 620 | /** 621 | * Lay out the children of this container with 622 | * flexbox, which is horizontal by default. 623 | */ 624 | display: -ms-flexbox; 625 | display: flex; 626 | 627 | /** 628 | * Rotate the main axis so that the children 629 | * are laid out vertically. 630 | */ 631 | -ms-flex-direction: column; 632 | flex-direction: column; 633 | 634 | border: 1px solid #CAD0D2; 635 | border-radius: 4px; 636 | overflow: hidden; 637 | } 638 | 639 | .card__description { 640 | /** 641 | * Lay out the children of this container with 642 | * flexbox. 643 | */ 644 | display: -ms-flexbox; 645 | display: flex; 646 | 647 | /** 648 | * We're going to lay out this element's children 649 | * just like in the "Centered prompt" example. 650 | * First we'll rotate the main axis so that the 651 | * children are laid out vertically. 652 | */ 653 | -ms-flex-direction: column; 654 | flex-direction: column; 655 | 656 | /** 657 | * Just like in the "Centered prompt", we'll 658 | * group the children in the center of their 659 | * container. 660 | */ 661 | -ms-flex-pack: center; 662 | justify-content: center; 663 | 664 | /** 665 | * And just like in the "Centered prompt" example, 666 | * we'll align the children in the center, along 667 | * the main axis. 668 | */ 669 | -ms-flex-align: center; 670 | align-items: center; 671 | 672 | padding: 15px 0; 673 | } 674 | 675 | .card__descriptionIcon { 676 | font-size: 32px; 677 | margin-bottom: 10px; 678 | } 679 | 680 | .card__descriptionText { 681 | color: #57727C; 682 | font-size: 12px; 683 | text-align: center; 684 | max-width: calc(100% - 30px); 685 | } 686 | 687 | .card__price { 688 | text-align: center; 689 | color: #57727C; 690 | font-size: 12px; 691 | font-weight: 700; 692 | padding: 5px 15px; 693 | border-top: 1px solid #D7DBDD; 694 | background-color: #EEF3F5; 695 | } 696 | 697 | .card--fixedWidth { 698 | max-width: 120px; 699 | } 700 | 701 | /*===================================================== 702 | contents of: index.css 703 | =====================================================*/ 704 | /*===================================================== 705 | contents of: styles/card-group.css 706 | =====================================================*/ 707 | .cardGroup { 708 | /** 709 | * Lay out the children of this container with 710 | * flexbox, which is horizontal by default. 711 | */ 712 | display: -ms-flexbox; 713 | display: flex; 714 | 715 | border: 1px solid #CAD0D2; 716 | border-radius: 4px; 717 | overflow: hidden; 718 | } 719 | 720 | .cardGroup__card { 721 | /** 722 | * The flex property is a short-hand for setting 723 | * the flex-grow, flex-shrink, and flex-basis 724 | * properties. These properties control how the 725 | * element resizes to fill its container. 726 | * 727 | * We'll set flex-grow to 1 so that it will 728 | * expand to fill its container. (The default 729 | * default value is 0.) 730 | * 731 | * We'll also set flex-shrink to 1 so that the 732 | * element will shrink as its container gets 733 | * smaller. (The default value is 1.) 734 | * 735 | * Last, we set flex-basis to 0 so that its 736 | * size is solely determined by the size of 737 | * the container. (The default value 738 | * is auto, which would cause the content's 739 | * size to also be a factor in this calculation.) 740 | * 741 | * The net result of these properties is that the 742 | * element is a fluid size, and will expand and 743 | * shrink with its container and siblings, but 744 | * they will all have the same size, even if they 745 | * have different amounts of content. 746 | * 747 | * NOTE: IE11 ignores flex short-hand declarations 748 | * with unitless flex-basis values. So we have to 749 | * use 0% instead of 0 as a workaround. You can 750 | * find more info at: 751 | * github.com/philipwalton/flexbugs. 752 | */ 753 | -ms-flex: 1 1 0%; 754 | flex: 1 1 0%; 755 | 756 | border: none; 757 | border-radius: 0; 758 | } 759 | 760 | .cardGroup__card + .cardGroup__card { 761 | border-left: 1px solid #D7DBDD; 762 | } 763 | 764 | .cardGroup__cardDescription { 765 | /** 766 | * We're doing almost the exact same thing here as 767 | * we did above. The difference is that its 768 | * flex-basis is auto, so now the size of its content 769 | * will affect how large it is. 770 | */ 771 | -ms-flex: 1 1 auto; 772 | flex: 1 1 auto; 773 | } 774 | 775 | /*===================================================== 776 | contents of: styles/photo.css 777 | =====================================================*/ 778 | .photo { 779 | /** 780 | * Lay out the children of this container with 781 | * flexbox, which is horizontal by default. 782 | */ 783 | display: -ms-flexbox; 784 | display: flex; 785 | 786 | /** 787 | * Align all the children to the end of the main 788 | * axis. This is the right side, by default. 789 | */ 790 | -ms-flex-pack: end; 791 | justify-content: flex-end; 792 | 793 | /** 794 | * Align all the children to the end of the 795 | * secondary axis. This is the bottom, by default. 796 | */ 797 | -ms-flex-align: end; 798 | align-items: flex-end; 799 | 800 | width: 145px; 801 | margin: 5px; 802 | padding: 5px 10px; 803 | font-size: 18px; 804 | font-weight: bold; 805 | text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); 806 | color: #FFFFFF; 807 | background-size: cover; 808 | background-position: center; 809 | border-radius: 4px; 810 | } 811 | 812 | .photo--large { 813 | height: 130px; 814 | } 815 | 816 | .photo1 { 817 | background-image: url('images/dog_1.jpg'); 818 | } 819 | 820 | /*===================================================== 821 | contents of: styles/gallery.css 822 | =====================================================*/ 823 | .gallery { 824 | /** 825 | * Lay out the children of this container with 826 | * flexbox, which is horizontal by default. 827 | */ 828 | display: -ms-flexbox; 829 | display: flex; 830 | 831 | /** 832 | * Allow the children to wrap to the next "row", 833 | * instead of trying to squeeze them all into 834 | * a single row. 835 | */ 836 | -ms-flex-wrap: wrap; 837 | flex-wrap: wrap; 838 | 839 | width: 478px; 840 | padding: 5px; 841 | border: 1px solid #D7DBDD; 842 | } 843 | 844 | .photo2 { 845 | background-image: url('images/dog_2.jpg'); 846 | } 847 | 848 | .photo3 { 849 | background-image: url('images/dog_3.jpg'); 850 | } 851 | 852 | .photo4 { 853 | background-image: url('images/dog_4.jpg'); 854 | } 855 | 856 | .photo5 { 857 | background-image: url('images/dog_5.jpg'); 858 | } 859 | 860 | .photo6 { 861 | background-image: url('images/dog_1.jpg'); 862 | } 863 | 864 | .photo7 { 865 | background-image: url('images/dog_2.jpg'); 866 | } 867 | 868 | .photo8 { 869 | background-image: url('images/dog_3.jpg'); 870 | } 871 | 872 | .photo9 { 873 | background-image: url('images/dog_4.jpg'); 874 | } 875 | 876 | .photo10 { 877 | background-image: url('images/dog_5.jpg'); 878 | } 879 | 880 | /*===================================================== 881 | contents of: styles/mosaic.css 882 | =====================================================*/ 883 | .mosaic { 884 | /** 885 | * Lay out the children of this container with 886 | * flexbox, which is horizontal by default. 887 | */ 888 | display: -ms-flexbox; 889 | display: flex; 890 | 891 | /** 892 | * Set the main axis to be vertical instead of 893 | * horizontal, so now the children are laid out 894 | * vertically, from top to bottom. 895 | */ 896 | -ms-flex-direction: column; 897 | flex-direction: column; 898 | 899 | /** 900 | * Now when the children wrap, they'll wrap to the 901 | * next "column". 902 | */ 903 | -ms-flex-wrap: wrap; 904 | flex-wrap: wrap; 905 | 906 | width: 478px; 907 | height: 370px; 908 | padding: 6px; 909 | border: 1px solid #D7DBDD; 910 | overflow: auto; 911 | } 912 | 913 | .photo:last-child { 914 | /** 915 | * This is the first part of a flexbox hack. 916 | * It addresses a problem flexbox has with scrolling 917 | * content. Without this hack, the children on the 918 | * far right of the container will be flush against 919 | * the container's right edge. 920 | */ 921 | position: relative; 922 | } 923 | 924 | .photo:last-child::after { 925 | /** 926 | * This is the second part of the hack. It creates 927 | * an invisible element on the last child that 928 | * forces a space between the child and the right 929 | * edge of the container. 930 | */ 931 | display: block; 932 | width: 11px; 933 | height: 1px; 934 | position: absolute; 935 | top: 0; 936 | left: 100%; 937 | visibility: hidden; 938 | content: ""; 939 | } 940 | 941 | .photo--small { 942 | height: 70px; 943 | } 944 | 945 | .photo--medium { 946 | height: 90px; 947 | } 948 | 949 | .photo11 { 950 | background-image: url('images/dog_1.jpg'); 951 | } 952 | 953 | .photo12 { 954 | background-image: url('images/dog_2.jpg'); 955 | } 956 | 957 | .photo13 { 958 | background-image: url('images/dog_3.jpg'); 959 | } 960 | 961 | .photo14 { 962 | background-image: url('images/dog_4.jpg'); 963 | } 964 | 965 | 966 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flexbox-patterns", 3 | "version": "0.3.0", 4 | "description": "Patterns for using flexbox CSS to build awesome UI components", 5 | "repository": "cjcenizal/flexbox-patterns", 6 | "author": { 7 | "name": "CJ Cenizal", 8 | "email": "cj@cenizal.com", 9 | "url": "http://www.cenizal.com/" 10 | }, 11 | "devDependencies": { 12 | "autoprefixer": "6.2.3", 13 | "css-concat": "0.0.4", 14 | "cpx": "1.3.1", 15 | "jade": "1.11.0", 16 | "postcss-cli": "2.3.3" 17 | }, 18 | "scripts": { 19 | "build": "npm run copyImages && npm run compileCss && npm run autoPrefixCss && npm run compileHtml", 20 | "copyImages": "cpx \"src/images/**/*\" dist/images", 21 | "compileCss": "css-concat src/index.css dist/styles.css", 22 | "autoPrefixCss": "postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css", 23 | "compileHtml": "jade src/index.jade -P -o dist" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/examples/card-group.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
Trial
6 |
7 |
Free!
8 |
9 |
10 |
11 |
12 |
Basic tier
(most popular)
13 |
14 |
$10.00
15 |
16 |
17 |
18 |
19 |
Advanced tier
(only for enterprise-level professionals)
20 |
21 |
$6,000.00
22 |
23 |
24 | -------------------------------------------------------------------------------- /src/examples/card.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
Science potion
5 |
6 |
Costs $5
7 |
8 | -------------------------------------------------------------------------------- /src/examples/centered-icon.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | -------------------------------------------------------------------------------- /src/examples/centered-prompt.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
Welcome to the app!
6 |
Thanks for signing up. Let’s take a look around.
7 |
Begin tour
8 |
9 | -------------------------------------------------------------------------------- /src/examples/feature-list.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
The calendar feature makes scheduling a snap.
6 |
7 |
8 |
9 |
10 |
11 |
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
12 |
13 |
14 |
15 |
16 |
17 |
You can get notified by email or SMS.
18 |
19 | -------------------------------------------------------------------------------- /src/examples/form-footer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 |  Saving... 6 |
7 |
8 | 9 |
10 |
Reset
11 |
Save
12 |
13 |
14 | -------------------------------------------------------------------------------- /src/examples/gallery.html: -------------------------------------------------------------------------------- 1 |
2 |
1
3 |
2
4 |
3
5 |
4
6 |
5
7 |
6
8 |
7
9 |
8
10 |
9
11 |
10
12 |
-------------------------------------------------------------------------------- /src/examples/mosaic.html: -------------------------------------------------------------------------------- 1 |
2 |
1
3 |
2
4 |
3
5 |
4
6 |
5
7 |
6
8 |
7
9 |
8
10 |
9
11 |
10
12 |
11
13 |
12
14 |
13
15 |
14
16 |
17 | -------------------------------------------------------------------------------- /src/examples/photo.html: -------------------------------------------------------------------------------- 1 |
2 | Sup, dog 3 |
-------------------------------------------------------------------------------- /src/examples/post.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
Sherlyn S.
7 |
8 |
9 |
10 | I built a tree house out of reclaimed cedar and gave it a coat of my home-made 11 | organic coffee-based varnish. Tree housewarming party this weekend! 12 |
13 |
14 | December 4 15 |
16 |
17 |
-------------------------------------------------------------------------------- /src/examples/side-bar.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
Inbox
5 |
Contacts
6 |
Account
7 |
8 | 9 |
10 |
Change theme
11 |
Legal
12 |
13 |
14 | -------------------------------------------------------------------------------- /src/examples/site-header.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 7 |
Inbox
8 |
Sent
9 |
Trash
10 |
11 | 12 |
13 |
Settings
14 |
Log out
15 |
16 |
17 | -------------------------------------------------------------------------------- /src/examples/stepper-input.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /src/examples/stream.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 |
CJ C.
8 |
9 |
10 |
11 | Going hiking with @karla in Yosemite! 12 |
13 |
14 | May 27 15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 |
Jatesh V.
25 |
26 |
27 |
28 | Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my 29 | life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com! 30 | Love flexboxpatterns.com! 31 |
32 |
33 | May 28 34 |
35 |
36 |
37 | 38 |
39 |
40 |
41 | 42 |
43 |
Damien S.
44 |
45 |
46 |
47 | Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover 48 | #replicant 49 |
50 |
51 | June 1 52 |
53 |
54 |
55 | 56 |
57 |
58 |
59 | 60 |
61 |
Ziggie G.
62 |
63 |
64 |
65 | I love eating pizza!!!!!!! 66 |
67 |
68 | June 5 69 |
70 |
71 |
72 |
-------------------------------------------------------------------------------- /src/examples/tabs.html: -------------------------------------------------------------------------------- 1 |
2 |
Tab 1
3 |
Tab 2
4 |
Tab 3
5 |
Tab 4
6 |
7 | -------------------------------------------------------------------------------- /src/images/dog_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/src/images/dog_1.jpg -------------------------------------------------------------------------------- /src/images/dog_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/src/images/dog_2.jpg -------------------------------------------------------------------------------- /src/images/dog_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/src/images/dog_3.jpg -------------------------------------------------------------------------------- /src/images/dog_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/src/images/dog_4.jpg -------------------------------------------------------------------------------- /src/images/dog_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cjcenizal/flexbox-patterns/f856b14c880dcb89cc85ec7ed95da3845763440f/src/images/dog_5.jpg -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | @import url("./styles/stepper-input.css"); 6 | @import url("./styles/tabs.css"); 7 | @import url("./styles/site-header.css"); 8 | @import url("./styles/form-footer.css"); 9 | @import url("./styles/post.css"); 10 | @import url("./styles/side-bar.css"); 11 | @import url("./styles/centered-prompt.css"); 12 | @import url("./styles/centered-icon.css"); 13 | @import url("./styles/feature-list.css"); 14 | @import url("./styles/stream.css"); 15 | @import url("./styles/card.css"); 16 | @import url("./styles/card-group.css"); 17 | @import url("./styles/photo.css"); 18 | @import url("./styles/gallery.css"); 19 | @import url("./styles/mosaic.css"); 20 | -------------------------------------------------------------------------------- /src/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en') 3 | head 4 | 5 | title Flexbox Patterns Demo Page 6 | 7 | meta( 8 | name="viewport" 9 | content="width=device-width, initial-scale=1" 10 | ) 11 | 12 | //- Fonts 13 | link( 14 | href="http://fonts.googleapis.com/css?family=Lato:400,700" 15 | rel="stylesheet" 16 | type="text/css" 17 | ) 18 | 19 | //- Font aweosome icons 20 | link( 21 | rel="stylesheet" 22 | href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 23 | ) 24 | 25 | //- CSS 26 | link( 27 | href="styles.css" 28 | rel="stylesheet" 29 | type="text/css" 30 | ) 31 | 32 | style. 33 | body { 34 | padding: 40px; 35 | font-family: "Lato", "Helvetica", sans-serif; 36 | font-size: 14px; 37 | line-height: 1.5; 38 | } 39 | 40 | .demo { 41 | max-width: 500px; 42 | margin-bottom: 40px; 43 | } 44 | 45 | body 46 | 47 | // Stepper input 48 | .demo 49 | include ./examples/stepper-input.html 50 | 51 | // Tabs 52 | .demo 53 | include ./examples/tabs.html 54 | 55 | // Site header 56 | .demo 57 | include ./examples/site-header.html 58 | 59 | // Form footer 60 | .demo 61 | include ./examples/form-footer.html 62 | 63 | // Post 64 | .demo 65 | include ./examples/post.html 66 | 67 | // Side bar 68 | .demo 69 | include ./examples/side-bar.html 70 | 71 | // Centered prompt 72 | .demo 73 | include ./examples/centered-prompt.html 74 | 75 | // Centered icon 76 | .demo 77 | include ./examples/centered-icon.html 78 | 79 | // Feature list 80 | .demo 81 | include ./examples/feature-list.html 82 | 83 | // Stream 84 | .demo 85 | include ./examples/stream.html 86 | 87 | // Card 88 | .demo 89 | include ./examples/card.html 90 | 91 | // Card group 92 | .demo 93 | include ./examples/card-group.html 94 | 95 | // Photo 96 | .demo 97 | include ./examples/photo.html 98 | 99 | // Gallery 100 | .demo 101 | include ./examples/gallery.html 102 | 103 | // Mosaic 104 | .demo 105 | include ./examples/mosaic.html 106 | -------------------------------------------------------------------------------- /src/styles/card-group.css: -------------------------------------------------------------------------------- 1 | .cardGroup { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | border: 1px solid #CAD0D2; 9 | border-radius: 4px; 10 | overflow: hidden; 11 | } 12 | 13 | .cardGroup__card { 14 | /** 15 | * The flex property is a short-hand for setting 16 | * the flex-grow, flex-shrink, and flex-basis 17 | * properties. These properties control how the 18 | * element resizes to fill its container. 19 | * 20 | * We'll set flex-grow to 1 so that it will 21 | * expand to fill its container. (The default 22 | * default value is 0.) 23 | * 24 | * We'll also set flex-shrink to 1 so that the 25 | * element will shrink as its container gets 26 | * smaller. (The default value is 1.) 27 | * 28 | * Last, we set flex-basis to 0 so that its 29 | * size is solely determined by the size of 30 | * the container. (The default value 31 | * is auto, which would cause the content's 32 | * size to also be a factor in this calculation.) 33 | * 34 | * The net result of these properties is that the 35 | * element is a fluid size, and will expand and 36 | * shrink with its container and siblings, but 37 | * they will all have the same size, even if they 38 | * have different amounts of content. 39 | * 40 | * NOTE: IE11 ignores flex short-hand declarations 41 | * with unitless flex-basis values. So we have to 42 | * use 0% instead of 0 as a workaround. You can 43 | * find more info at: 44 | * github.com/philipwalton/flexbugs. 45 | */ 46 | flex: 1 1 0%; 47 | 48 | border: none; 49 | border-radius: 0; 50 | } 51 | 52 | .cardGroup__card + .cardGroup__card { 53 | border-left: 1px solid #D7DBDD; 54 | } 55 | 56 | .cardGroup__cardDescription { 57 | /** 58 | * We're doing almost the exact same thing here as 59 | * we did above. The difference is that its 60 | * flex-basis is auto, so now the size of its content 61 | * will affect how large it is. 62 | */ 63 | flex: 1 1 auto; 64 | } 65 | -------------------------------------------------------------------------------- /src/styles/card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Rotate the main axis so that the children 10 | * are laid out vertically. 11 | */ 12 | flex-direction: column; 13 | 14 | border: 1px solid #CAD0D2; 15 | border-radius: 4px; 16 | overflow: hidden; 17 | } 18 | 19 | .card__description { 20 | /** 21 | * Lay out the children of this container with 22 | * flexbox. 23 | */ 24 | display: flex; 25 | 26 | /** 27 | * We're going to lay out this element's children 28 | * just like in the "Centered prompt" example. 29 | * First we'll rotate the main axis so that the 30 | * children are laid out vertically. 31 | */ 32 | flex-direction: column; 33 | 34 | /** 35 | * Just like in the "Centered prompt", we'll 36 | * group the children in the center of their 37 | * container. 38 | */ 39 | justify-content: center; 40 | 41 | /** 42 | * And just like in the "Centered prompt" example, 43 | * we'll align the children in the center, along 44 | * the main axis. 45 | */ 46 | align-items: center; 47 | 48 | padding: 15px 0; 49 | } 50 | 51 | .card__descriptionIcon { 52 | font-size: 32px; 53 | margin-bottom: 10px; 54 | } 55 | 56 | .card__descriptionText { 57 | color: #57727C; 58 | font-size: 12px; 59 | text-align: center; 60 | max-width: calc(100% - 30px); 61 | } 62 | 63 | .card__price { 64 | text-align: center; 65 | color: #57727C; 66 | font-size: 12px; 67 | font-weight: 700; 68 | padding: 5px 15px; 69 | border-top: 1px solid #D7DBDD; 70 | background-color: #EEF3F5; 71 | } 72 | 73 | .card--fixedWidth { 74 | max-width: 120px; 75 | } 76 | -------------------------------------------------------------------------------- /src/styles/centered-icon.css: -------------------------------------------------------------------------------- 1 | .centeredIcon { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * As in the above "Centered prmopt" example, 10 | * we'll rotate the main axis so that the children 11 | * are ordered vertically. 12 | */ 13 | flex-direction: column; 14 | 15 | /** 16 | * Same thing here as before: group the children 17 | * together in the center of their container. 18 | */ 19 | justify-content: center; 20 | 21 | /** 22 | * Just like in the "Centered prmopt" example, 23 | * align the children in the center, along the 24 | * main axis. 25 | */ 26 | align-items: center; 27 | 28 | border: 1px solid #D7DBDD; 29 | font-size: 40px; 30 | width: 90px; 31 | height: 90px; 32 | border-radius: 100%; 33 | box-shadow: 34 | 0 2px 1px rgba(0, 0, 0, 0.05), 35 | 0 2px 3px rgba(0, 0, 0, 0.05), 36 | 0 4px 8px rgba(0, 0, 0, 0.05); 37 | } 38 | -------------------------------------------------------------------------------- /src/styles/centered-prompt.css: -------------------------------------------------------------------------------- 1 | .centeredPrompt { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Rotate the main axis so that the children 10 | * are laid out vertically, the same as in the 11 | * above "Side bar" example. 12 | */ 13 | flex-direction: column; 14 | 15 | /** 16 | * Instead of pushing the children apart, as in 17 | * previous examples, we will group them together 18 | * in the center of their container. 19 | */ 20 | justify-content: center; 21 | 22 | /** 23 | * Align the children in the center, along 24 | * the main axis. Because the direction is 25 | * "column" this has a similar effect as setting 26 | * text-align: center. 27 | */ 28 | align-items: center; 29 | 30 | min-height: 300px; 31 | padding: 10px; 32 | } 33 | 34 | .centeredPrompt__item + .centeredPrompt__item { 35 | margin-top: 5px; 36 | } 37 | 38 | .centeredPromptIcon { 39 | font-size: 60px; 40 | line-height: 0; 41 | } 42 | 43 | .centeredPromptLabel { 44 | color: #86969C; 45 | font-size: 30px; 46 | font-weight: 700; 47 | text-align: center; 48 | } 49 | 50 | .centeredPromptDetails { 51 | color: #86969C; 52 | font-size: 16px; 53 | margin-bottom: 10px; 54 | text-align: center; 55 | } 56 | 57 | .icon { 58 | color: #BCD2DA; 59 | } 60 | -------------------------------------------------------------------------------- /src/styles/feature-list.css: -------------------------------------------------------------------------------- 1 | .featureListItem { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Align the children in the center, along 10 | * the main axis, which is horizontal in this case. 11 | */ 12 | align-items: center; 13 | 14 | max-width: 400px; 15 | padding: 10px; 16 | } 17 | 18 | .featureListItem + .featureListItem { 19 | border-top: 1px solid #D7DBDD; 20 | } 21 | 22 | .featureListItem--reverse { 23 | /** 24 | * We can specify the flex-direction so that 25 | * the children elements are displayed in the 26 | * reverse order of how they appear in the 27 | * markup. 28 | */ 29 | flex-direction: row-reverse; 30 | } 31 | 32 | .featureListItem__icon, 33 | .featureListItem__description { 34 | padding: 5px 15px; 35 | } 36 | 37 | .featureListItem__icon { 38 | font-size: 50px; 39 | line-height: 0; 40 | } 41 | 42 | .featureListItem__description { 43 | color: #57727C; 44 | font-size: 12px; 45 | } 46 | -------------------------------------------------------------------------------- /src/styles/form-footer.css: -------------------------------------------------------------------------------- 1 | .formFooter { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Make the container put as much space as possible 10 | * between its children, with the children at either 11 | * end laying flush against the container's edges. 12 | */ 13 | justify-content: space-between; 14 | 15 | /** 16 | * Align the children in the center, along 17 | * the main axis, which is horizontal in this case. 18 | */ 19 | align-items: center; 20 | 21 | border-top: 1px solid #D7DBDD; 22 | padding: 10px; 23 | } 24 | 25 | .formFooter__section { 26 | /** 27 | * This container orders items horizontally. 28 | */ 29 | display: flex; 30 | 31 | /** 32 | * It aligns them vertically in the center. 33 | */ 34 | align-items: center; 35 | } 36 | 37 | .formFooter__item + .formFooter__item { 38 | margin-left: 5px; 39 | } 40 | 41 | .formFooterFeedback { 42 | color: #86969C; 43 | font-size: 12px; 44 | line-height: 0; 45 | } 46 | 47 | .formFooterSpinner { 48 | animation: formFooterSpinner 1s infinite steps(8, end); 49 | } 50 | 51 | @keyframes formFooterSpinner { 52 | 0% { transform: rotate(0deg); } 53 | 100% { transform: rotate(360deg); } 54 | } 55 | 56 | .button--clear { 57 | color: #16A2D7; 58 | background-color: #FFFFFF; 59 | border: 1px solid #FFFFFF; 60 | } 61 | -------------------------------------------------------------------------------- /src/styles/gallery.css: -------------------------------------------------------------------------------- 1 | .gallery { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Allow the children to wrap to the next "row", 10 | * instead of trying to squeeze them all into 11 | * a single row. 12 | */ 13 | flex-wrap: wrap; 14 | 15 | width: 478px; 16 | padding: 5px; 17 | border: 1px solid #D7DBDD; 18 | } 19 | 20 | .photo2 { 21 | background-image: url('../images/dog_2.jpg'); 22 | } 23 | 24 | .photo3 { 25 | background-image: url('../images/dog_3.jpg'); 26 | } 27 | 28 | .photo4 { 29 | background-image: url('../images/dog_4.jpg'); 30 | } 31 | 32 | .photo5 { 33 | background-image: url('../images/dog_5.jpg'); 34 | } 35 | 36 | .photo6 { 37 | background-image: url('../images/dog_1.jpg'); 38 | } 39 | 40 | .photo7 { 41 | background-image: url('../images/dog_2.jpg'); 42 | } 43 | 44 | .photo8 { 45 | background-image: url('../images/dog_3.jpg'); 46 | } 47 | 48 | .photo9 { 49 | background-image: url('../images/dog_4.jpg'); 50 | } 51 | 52 | .photo10 { 53 | background-image: url('../images/dog_5.jpg'); 54 | } 55 | -------------------------------------------------------------------------------- /src/styles/mosaic.css: -------------------------------------------------------------------------------- 1 | .mosaic { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Set the main axis to be vertical instead of 10 | * horizontal, so now the children are laid out 11 | * vertically, from top to bottom. 12 | */ 13 | flex-direction: column; 14 | 15 | /** 16 | * Now when the children wrap, they'll wrap to the 17 | * next "column". 18 | */ 19 | flex-wrap: wrap; 20 | 21 | width: 478px; 22 | height: 370px; 23 | padding: 6px; 24 | border: 1px solid #D7DBDD; 25 | overflow: auto; 26 | } 27 | 28 | .photo:last-child { 29 | /** 30 | * This is the first part of a flexbox hack. 31 | * It addresses a problem flexbox has with scrolling 32 | * content. Without this hack, the children on the 33 | * far right of the container will be flush against 34 | * the container's right edge. 35 | */ 36 | position: relative; 37 | } 38 | 39 | .photo:last-child::after { 40 | /** 41 | * This is the second part of the hack. It creates 42 | * an invisible element on the last child that 43 | * forces a space between the child and the right 44 | * edge of the container. 45 | */ 46 | display: block; 47 | width: 11px; 48 | height: 1px; 49 | position: absolute; 50 | top: 0; 51 | left: 100%; 52 | visibility: hidden; 53 | content: ""; 54 | } 55 | 56 | .photo--small { 57 | height: 70px; 58 | } 59 | 60 | .photo--medium { 61 | height: 90px; 62 | } 63 | 64 | .photo11 { 65 | background-image: url('../images/dog_1.jpg'); 66 | } 67 | 68 | .photo12 { 69 | background-image: url('../images/dog_2.jpg'); 70 | } 71 | 72 | .photo13 { 73 | background-image: url('../images/dog_3.jpg'); 74 | } 75 | 76 | .photo14 { 77 | background-image: url('../images/dog_4.jpg'); 78 | } 79 | -------------------------------------------------------------------------------- /src/styles/photo.css: -------------------------------------------------------------------------------- 1 | .photo { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Align all the children to the end of the main 10 | * axis. This is the right side, by default. 11 | */ 12 | justify-content: flex-end; 13 | 14 | /** 15 | * Align all the children to the end of the 16 | * secondary axis. This is the bottom, by default. 17 | */ 18 | align-items: flex-end; 19 | 20 | width: 145px; 21 | margin: 5px; 22 | padding: 5px 10px; 23 | font-size: 18px; 24 | font-weight: bold; 25 | text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); 26 | color: #FFFFFF; 27 | background-size: cover; 28 | background-position: center; 29 | border-radius: 4px; 30 | } 31 | 32 | .photo--large { 33 | height: 130px; 34 | } 35 | 36 | .photo1 { 37 | background-image: url('../images/dog_1.jpg'); 38 | } 39 | -------------------------------------------------------------------------------- /src/styles/post.css: -------------------------------------------------------------------------------- 1 | .post { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | } 8 | 9 | .postUser { 10 | /** 11 | * The flex property is a short-hand for setting 12 | * the flex-grow, flex-shrink, and flex-basis 13 | * properties. These properties control how the 14 | * element resizes to fill its container. 15 | * 16 | * The value we're using here is actually the 17 | * default, but I'm including so I can explain it 18 | * a bit. The default value equates to: 19 | * 20 | * - flex-grow: 0 21 | * - flex-shrink: 1 22 | * - flex-basis: auto 23 | * 24 | * We set flex-grow to 0, so this element won't 25 | * expand to fill its container. 26 | * 27 | * We'll then set flex-shrink to 1 so that the 28 | * element will shrink as its container gets 29 | * smaller. However, it will only shrink so far 30 | * because... 31 | * 32 | * ...we set flex-basis to auto. This causes 33 | * the content's size to also be a factor in the 34 | * calculation of the element's size. Because 35 | * the width of a child element is set (below), 36 | * this element won't shrink below that size. 37 | * 38 | * The net result is that this element stays a 39 | * fixed size, neither expanding nor shrinking. 40 | */ 41 | flex: 0 1 auto; 42 | 43 | padding-bottom: 10px; 44 | } 45 | 46 | .postUser__portrait { 47 | /** 48 | * We're using these three flexbox properties 49 | * here to center the portrait icon inside of 50 | * this element. 51 | * 52 | * We'll explore these properties in more detail 53 | * in the "Stay Centered" section, so I'll only 54 | * briefly summarize here: 55 | * 56 | * - display: flex instructs the browser to 57 | * use flexbox to lay out this element's 58 | * children. 59 | * - justify-content: center will center the 60 | * icon along the main axis. 61 | * - align-items: center will center the icon 62 | * along the secondary (perpendicular) axis. 63 | */ 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | 68 | width: 100px; 69 | height: 90px; 70 | font-size: 70px; 71 | line-height: 0; 72 | } 73 | 74 | .postUser__name { 75 | color: #57727C; 76 | font-size: 12px; 77 | font-weight: 700; 78 | line-height: 1; 79 | text-align: center; 80 | } 81 | 82 | .postBody { 83 | /** 84 | * We'll use the short-hand flex property again 85 | * here, to make the body of the post expand to 86 | * fill the container, and shrink as the container 87 | * becomes narrower. 88 | * 89 | * By setting flex-grow to 1, we cause this 90 | * element to expand to fill the container. 91 | * 92 | * Setting flex-shrink to 1 causes this element 93 | * to shrink with the container. 94 | * 95 | * Last, we set flex-basis to 0 so that its 96 | * size is solely determined by the size of 97 | * the container. (The default value is auto, 98 | * which would cause the content's size to also 99 | * be a factor in this calculation.) 100 | * 101 | * The net result of these properties is that the 102 | * element is a fluid size, and will expand and 103 | * shrink with its container. 104 | * 105 | * NOTE: IE11 ignores flex short-hand declarations 106 | * with unitless flex-basis values. So we have to 107 | * use 0% instead of 0 as a workaround. You can 108 | * find more info at: 109 | * github.com/philipwalton/flexbugs. 110 | */ 111 | flex: 1 1 0%; 112 | 113 | position: relative; 114 | padding: 15px; 115 | border: 1px solid #CAD0D2; 116 | border-radius: 4px; 117 | } 118 | 119 | .postBody:after, 120 | .postBody:before { 121 | right: 100%; 122 | top: 35px; 123 | border: solid transparent; 124 | content: " "; 125 | height: 0; 126 | width: 0; 127 | position: absolute; 128 | pointer-events: none; 129 | } 130 | 131 | .postBody:after { 132 | border-color: transparent; 133 | border-right-color: #ffffff; 134 | border-width: 8px; 135 | margin-top: -8px; 136 | } 137 | 138 | .postBody:before { 139 | border-color: transparent; 140 | border-right-color: #CAD0D2; 141 | border-width: 9px; 142 | margin-top: -9px; 143 | } 144 | 145 | .postBody__content { 146 | color: #57727C; 147 | font-size: 12px; 148 | } 149 | 150 | .postBody__date { 151 | margin-top: 5px; 152 | color: #86969C; 153 | font-size: 10px; 154 | text-transform: uppercase; 155 | letter-spacing: 1px; 156 | } 157 | -------------------------------------------------------------------------------- /src/styles/side-bar.css: -------------------------------------------------------------------------------- 1 | .sideBar { 2 | /** 3 | * This container orders items according to flexbox 4 | * rules. By default, this would arrange its children 5 | * horizontally. However, the next property... 6 | */ 7 | display: flex; 8 | 9 | /** 10 | * ...sets the main axis to be vertical instead of 11 | * horizontal, so now the children are laid out 12 | * vertically, from top to bottom. 13 | */ 14 | flex-direction: column; 15 | 16 | /** 17 | * It will also put as much space as possible 18 | * between its children, with the children at either end 19 | * laying flush against the container's edges. 20 | */ 21 | justify-content: space-between; 22 | 23 | height: 300px; 24 | width: 150px; 25 | border-right: 1px solid #D7DBDD; 26 | background-color: #FCFDFD; 27 | padding: 10px; 28 | } 29 | 30 | .sideBar__item { 31 | cursor: pointer; 32 | padding: 5px 10px; 33 | color: #16A2D7; 34 | font-size: 12px; 35 | } 36 | 37 | .sideBar__item.is-side-bar-item-selected { 38 | background-color: #EEF3F5; 39 | border-radius: 4px; 40 | } 41 | -------------------------------------------------------------------------------- /src/styles/site-header.css: -------------------------------------------------------------------------------- 1 | .siteHeader { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox, which is horizontal by default. 5 | */ 6 | display: flex; 7 | 8 | /** 9 | * Make the container put as much space as possible 10 | * between its children, with the children at either 11 | * end laying flush against the container's edges. 12 | */ 13 | justify-content: space-between; 14 | 15 | padding: 10px; 16 | background-color: #56727C; 17 | } 18 | 19 | .siteHeader__section { 20 | /** 21 | * Lay out the children of this container with 22 | * flexbox. 23 | */ 24 | display: flex; 25 | 26 | /** 27 | * Align the children in the center, along 28 | * the main axis. By default the children will 29 | * align along their top edges. 30 | */ 31 | align-items: center; 32 | } 33 | 34 | .siteHeader__item { 35 | padding: 5px 15px; 36 | font-size: 12px; 37 | } 38 | 39 | .siteHeader__item + .siteHeader__item { 40 | margin-left: 5px; 41 | } 42 | 43 | .siteHeader__item.is-site-header-item-selected { 44 | color: #FFFFFF; 45 | background-color: #415F69; 46 | border-radius: 4px; 47 | } 48 | 49 | .siteHeaderLogo { 50 | font-size: 20px; 51 | line-height: 0; 52 | color: white; 53 | } 54 | 55 | .siteHeaderButton { 56 | cursor: pointer; 57 | color: #D9E9EF; 58 | } 59 | -------------------------------------------------------------------------------- /src/styles/stepper-input.css: -------------------------------------------------------------------------------- 1 | .stepperInput { 2 | /** 3 | * Setting display to flex makes this container lay 4 | * out its children using flexbox. By default, it 5 | * orders items horizontally, top-aligned. 6 | * This has a similar effect to setting the children 7 | * to have display: inline-block. 8 | */ 9 | display: flex; 10 | } 11 | 12 | .stepperInput__input { 13 | border-left: 0; 14 | border-right: 0; 15 | width: 60px; 16 | text-align: center; 17 | } 18 | 19 | .button { 20 | cursor: pointer; 21 | padding: 5px 15px; 22 | color: #FFFFFF; 23 | background-color: #4EBBE4; 24 | font-size: 12px; 25 | border: 1px solid #16A2D7; 26 | border-radius: 4px; 27 | } 28 | 29 | .button--addOnLeft { 30 | border-top-right-radius: 0; 31 | border-bottom-right-radius: 0; 32 | } 33 | 34 | .button--addOnRight { 35 | border-top-left-radius: 0; 36 | border-bottom-left-radius: 0; 37 | } 38 | 39 | .input { 40 | border: 1px solid #D7DBDD; 41 | padding: 0 10px; 42 | border-radius: 0; 43 | box-shadow: none; 44 | } -------------------------------------------------------------------------------- /src/styles/stream.css: -------------------------------------------------------------------------------- 1 | .stream { 2 | /** 3 | * Lay out the children of this container with 4 | * flexbox. 5 | */ 6 | display: flex; 7 | 8 | /* 9 | * Set the main axis to be vertical, but present 10 | * the children in reverse order of that in which 11 | * they occur in the DOM. 12 | */ 13 | flex-direction: column-reverse; 14 | } 15 | 16 | .post + .post { 17 | margin-bottom: 5px; 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/tabs.css: -------------------------------------------------------------------------------- 1 | .tabs { 2 | /** 3 | * Setting display to flex makes this container lay 4 | * out its children using flexbox, the exact same 5 | * as in the above "Stepper input" example. 6 | */ 7 | display: flex; 8 | 9 | border-bottom: 1px solid #D7DBDD; 10 | } 11 | 12 | .tab { 13 | cursor: pointer; 14 | padding: 5px 30px; 15 | color: #16A2D7; 16 | font-size: 12px; 17 | border-bottom: 2px solid transparent; 18 | } 19 | 20 | .tab.is-tab-selected { 21 | border-bottom-color: #4EBBE4; 22 | } 23 | --------------------------------------------------------------------------------