├── .gitignore ├── LICENSE ├── README.MD ├── build └── css.js ├── dist ├── full-main-10x.css ├── full-main-10x.css.gz ├── full-main.css ├── full-main.css.gz ├── index.html ├── index2.html ├── main-10x.css ├── main-10x.css.gz ├── main.css ├── main.css.gz ├── main.js ├── uncss-main.css └── uncss-main.css.gz ├── package-lock.json ├── package.json └── src └── scss ├── components ├── _button.scss ├── _core.scss ├── _expander.scss └── _typography.scss ├── elements ├── _core.scss ├── _page.scss └── _typography.scss ├── generic ├── _box-sizing.scss ├── _core.scss ├── _reset.scss └── _tabindex.scss ├── main.scss ├── objects ├── _box.scss ├── _container.scss ├── _core.scss └── _layout.scss ├── settings ├── _breakpoints.scss ├── _core.scss ├── _dependencies.scss ├── _imports.scss └── _spacing.scss ├── tools ├── _core.scss ├── _filter.scss ├── _rem.scss └── _render.scss └── utilities ├── _alignments.scss ├── _core.scss └── _widths.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Luke Harrison 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Handling unused CSS in SASS to improve performance 2 | This is a boilerplate which will allow you to follow along more easily with the article "Handling unused CSS in SASS to improve performance". 3 | 4 | ## Instructions 5 | - `npm run install` to install dependencies for SASS compilation 6 | - `npm run build` to compiled SASS 7 | - `npm run watch` to set up a watch task to automatically look for changes and then compile -------------------------------------------------------------------------------- /build/css.js: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // CSS BUILD SCRIPT 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Compiles SASS into CSS 7 | */ 8 | 9 | const fs = require('fs'); 10 | const glob = require('glob'); 11 | const path = require('path'); 12 | const sass = require('node-sass'); 13 | 14 | glob('src/scss/*.scss', {}, function(er, files) { 15 | for(let file in files) { 16 | const fileName = path.basename(files[file], path.extname(files[file])); 17 | sass.render({ 18 | file: files[file], 19 | outputStyle: 'nested', 20 | precision: 8 21 | }, function(err, result) { 22 | if(!err) { 23 | fs.writeFile(`dist/${fileName}.css`, result.css, function(err){ 24 | if(err) { 25 | console.log(err); 26 | return false; 27 | } 28 | }); 29 | } 30 | else { 31 | console.log(err) 32 | return false; 33 | } 34 | }); 35 | } 36 | console.log('\x1b[32m', '💅 Compiled CSS', '\x1b[37m'); 37 | }); -------------------------------------------------------------------------------- /dist/full-main-10x.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevLuke/handlingunusedcss/99a03321f2446abb9c0c292755cb3e4192bdf82e/dist/full-main-10x.css.gz -------------------------------------------------------------------------------- /dist/full-main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Here we define spacing variants. These are used to generate spacing 3 | variants for many object and utility classes to give you an easy way of 4 | spacing out content. Typically, if a component requires more precise 5 | spacing, this CSS should be defined in the component CSS, not here. 6 | */ 7 | /* 8 | A function to convert any px value into its rem equivalent 9 | 10 | .myElement { 11 | padding: rem(16px); 12 | } 13 | */ 14 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 15 | /* Document 16 | ========================================================================== */ 17 | /** 18 | * 1. Correct the line height in all browsers. 19 | * 2. Prevent adjustments of font size after orientation changes in iOS. 20 | */ 21 | html { 22 | line-height: 1.15; 23 | /* 1 */ 24 | -webkit-text-size-adjust: 100%; 25 | /* 2 */ } 26 | 27 | /* Sections 28 | ========================================================================== */ 29 | /** 30 | * Remove the margin in all browsers. 31 | */ 32 | body { 33 | margin: 0; } 34 | 35 | /** 36 | * Render the `main` element consistently in IE. 37 | */ 38 | main { 39 | display: block; } 40 | 41 | /** 42 | * Correct the font size and margin on `h1` elements within `section` and 43 | * `article` contexts in Chrome, Firefox, and Safari. 44 | */ 45 | h1 { 46 | font-size: 2em; 47 | margin: 0.67em 0; } 48 | 49 | /* Grouping content 50 | ========================================================================== */ 51 | /** 52 | * 1. Add the correct box sizing in Firefox. 53 | * 2. Show the overflow in Edge and IE. 54 | */ 55 | hr { 56 | box-sizing: content-box; 57 | /* 1 */ 58 | height: 0; 59 | /* 1 */ 60 | overflow: visible; 61 | /* 2 */ } 62 | 63 | /** 64 | * 1. Correct the inheritance and scaling of font size in all browsers. 65 | * 2. Correct the odd `em` font sizing in all browsers. 66 | */ 67 | pre { 68 | font-family: monospace, monospace; 69 | /* 1 */ 70 | font-size: 1em; 71 | /* 2 */ } 72 | 73 | /* Text-level semantics 74 | ========================================================================== */ 75 | /** 76 | * Remove the gray background on active links in IE 10. 77 | */ 78 | a { 79 | background-color: transparent; } 80 | 81 | /** 82 | * 1. Remove the bottom border in Chrome 57- 83 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 84 | */ 85 | abbr[title] { 86 | border-bottom: none; 87 | /* 1 */ 88 | text-decoration: underline; 89 | /* 2 */ 90 | text-decoration: underline dotted; 91 | /* 2 */ } 92 | 93 | /** 94 | * Add the correct font weight in Chrome, Edge, and Safari. 95 | */ 96 | b, 97 | strong { 98 | font-weight: bolder; } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | code, 105 | kbd, 106 | samp { 107 | font-family: monospace, monospace; 108 | /* 1 */ 109 | font-size: 1em; 110 | /* 2 */ } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | small { 116 | font-size: 80%; } 117 | 118 | /** 119 | * Prevent `sub` and `sup` elements from affecting the line height in 120 | * all browsers. 121 | */ 122 | sub, 123 | sup { 124 | font-size: 75%; 125 | line-height: 0; 126 | position: relative; 127 | vertical-align: baseline; } 128 | 129 | sub { 130 | bottom: -0.25em; } 131 | 132 | sup { 133 | top: -0.5em; } 134 | 135 | /* Embedded content 136 | ========================================================================== */ 137 | /** 138 | * Remove the border on images inside links in IE 10. 139 | */ 140 | img { 141 | border-style: none; } 142 | 143 | /* Forms 144 | ========================================================================== */ 145 | /** 146 | * 1. Change the font styles in all browsers. 147 | * 2. Remove the margin in Firefox and Safari. 148 | */ 149 | button, 150 | input, 151 | optgroup, 152 | select, 153 | textarea { 154 | font-family: inherit; 155 | /* 1 */ 156 | font-size: 100%; 157 | /* 1 */ 158 | line-height: 1.15; 159 | /* 1 */ 160 | margin: 0; 161 | /* 2 */ } 162 | 163 | /** 164 | * Show the overflow in IE. 165 | * 1. Show the overflow in Edge. 166 | */ 167 | button, 168 | input { 169 | /* 1 */ 170 | overflow: visible; } 171 | 172 | /** 173 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 174 | * 1. Remove the inheritance of text transform in Firefox. 175 | */ 176 | button, 177 | select { 178 | /* 1 */ 179 | text-transform: none; } 180 | 181 | /** 182 | * Correct the inability to style clickable types in iOS and Safari. 183 | */ 184 | button, 185 | [type="button"], 186 | [type="reset"], 187 | [type="submit"] { 188 | -webkit-appearance: button; } 189 | 190 | /** 191 | * Remove the inner border and padding in Firefox. 192 | */ 193 | button::-moz-focus-inner, 194 | [type="button"]::-moz-focus-inner, 195 | [type="reset"]::-moz-focus-inner, 196 | [type="submit"]::-moz-focus-inner { 197 | border-style: none; 198 | padding: 0; } 199 | 200 | /** 201 | * Restore the focus styles unset by the previous rule. 202 | */ 203 | button:-moz-focusring, 204 | [type="button"]:-moz-focusring, 205 | [type="reset"]:-moz-focusring, 206 | [type="submit"]:-moz-focusring { 207 | outline: 1px dotted ButtonText; } 208 | 209 | /** 210 | * Correct the padding in Firefox. 211 | */ 212 | fieldset { 213 | padding: 0.35em 0.75em 0.625em; } 214 | 215 | /** 216 | * 1. Correct the text wrapping in Edge and IE. 217 | * 2. Correct the color inheritance from `fieldset` elements in IE. 218 | * 3. Remove the padding so developers are not caught out when they zero out 219 | * `fieldset` elements in all browsers. 220 | */ 221 | legend { 222 | box-sizing: border-box; 223 | /* 1 */ 224 | color: inherit; 225 | /* 2 */ 226 | display: table; 227 | /* 1 */ 228 | max-width: 100%; 229 | /* 1 */ 230 | padding: 0; 231 | /* 3 */ 232 | white-space: normal; 233 | /* 1 */ } 234 | 235 | /** 236 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 237 | */ 238 | progress { 239 | vertical-align: baseline; } 240 | 241 | /** 242 | * Remove the default vertical scrollbar in IE 10+. 243 | */ 244 | textarea { 245 | overflow: auto; } 246 | 247 | /** 248 | * 1. Add the correct box sizing in IE 10. 249 | * 2. Remove the padding in IE 10. 250 | */ 251 | [type="checkbox"], 252 | [type="radio"] { 253 | box-sizing: border-box; 254 | /* 1 */ 255 | padding: 0; 256 | /* 2 */ } 257 | 258 | /** 259 | * Correct the cursor style of increment and decrement buttons in Chrome. 260 | */ 261 | [type="number"]::-webkit-inner-spin-button, 262 | [type="number"]::-webkit-outer-spin-button { 263 | height: auto; } 264 | 265 | /** 266 | * 1. Correct the odd appearance in Chrome and Safari. 267 | * 2. Correct the outline style in Safari. 268 | */ 269 | [type="search"] { 270 | -webkit-appearance: textfield; 271 | /* 1 */ 272 | outline-offset: -2px; 273 | /* 2 */ } 274 | 275 | /** 276 | * Remove the inner padding in Chrome and Safari on macOS. 277 | */ 278 | [type="search"]::-webkit-search-decoration { 279 | -webkit-appearance: none; } 280 | 281 | /** 282 | * 1. Correct the inability to style clickable types in iOS and Safari. 283 | * 2. Change font properties to `inherit` in Safari. 284 | */ 285 | ::-webkit-file-upload-button { 286 | -webkit-appearance: button; 287 | /* 1 */ 288 | font: inherit; 289 | /* 2 */ } 290 | 291 | /* Interactive 292 | ========================================================================== */ 293 | /* 294 | * Add the correct display in Edge, IE 10+, and Firefox. 295 | */ 296 | details { 297 | display: block; } 298 | 299 | /* 300 | * Add the correct display in all browsers. 301 | */ 302 | summary { 303 | display: list-item; } 304 | 305 | /* Misc 306 | ========================================================================== */ 307 | /** 308 | * Add the correct display in IE 10+. 309 | */ 310 | template { 311 | display: none; } 312 | 313 | /** 314 | * Add the correct display in IE 10. 315 | */ 316 | [hidden] { 317 | display: none; } 318 | 319 | /* 320 | Set the global `box-sizing` state to `border-box`. 321 | 322 | css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 323 | paulirish.com/2012/box-sizing-border-box-ftw 324 | */ 325 | html { 326 | box-sizing: border-box; } 327 | 328 | *, *:before, *:after { 329 | box-sizing: inherit; } 330 | 331 | /* 332 | An additional reset that sits on top of Normalize.css. 333 | */ 334 | body, 335 | h1, h2, h3, h4, h5, h6, 336 | blockquote, p, pre, 337 | dl, dd, ol, ul, 338 | figure, 339 | hr, 340 | fieldset, legend { 341 | margin: 0; 342 | padding: 0; 343 | border: 0; } 344 | 345 | /* 346 | Remove trailing margins from nested lists. 347 | */ 348 | li > ol, 349 | li > ul { 350 | margin-bottom: 0; } 351 | 352 | /* 353 | Remove default table spacing. 354 | */ 355 | table { 356 | border-collapse: collapse; 357 | border-spacing: 0; } 358 | 359 | /* 360 | [1] Remove firefox blur on invalid elements 361 | */ 362 | input:invalid, 363 | select:invalid, 364 | textarea:invalid { 365 | box-shadow: none; 366 | /* [1] */ } 367 | 368 | /* 369 | Resets transparency on input placeholders 370 | */ 371 | ::-webkit-input-placeholder { 372 | opacity: 1; } 373 | 374 | ::-moz-placeholder { 375 | opacity: 1; } 376 | 377 | :-ms-input-placeholder { 378 | opacity: 1; } 379 | 380 | /* 381 | Disables Safari iOS default styles for disabled inputs 382 | */ 383 | input:disabled, 384 | textarea:disabled { 385 | opacity: 1; } 386 | 387 | /* 388 | Remove spinners/arrows for number input 389 | */ 390 | input[type='number'] { 391 | -moz-appearance: textfield; } 392 | 393 | input::-webkit-outer-spin-button, 394 | input::-webkit-inner-spin-button { 395 | -webkit-appearance: none; } 396 | 397 | /* 398 | Remove default italics from address element 399 | */ 400 | address { 401 | font-style: normal; } 402 | 403 | /* 404 | Make button into blank element 405 | */ 406 | button { 407 | background-color: transparent; 408 | border: 0; 409 | padding: 0; } 410 | 411 | /* 412 | Set a global tabindex rule, so when non-focusable elements are made 413 | focusable, the intent is to make them interactive, so we add a pointer 414 | cursor on hover. 415 | */ 416 | [tabindex] { 417 | cursor: pointer; } 418 | 419 | /* 420 | Set basic styles for HTML top level element. 421 | */ 422 | /* 423 | [1] The `font-size` is calculated to exist in ems so the users browser 424 | font-size is respected if changed. 425 | */ 426 | html { 427 | font-family: sans-serif; 428 | font-size: 1em; 429 | /* [1] */ 430 | line-height: 1.5; 431 | min-height: 100%; 432 | overflow-y: scroll; 433 | color: #000000; } 434 | 435 | /* 436 | Basic styles for typography elements 437 | */ 438 | /* 439 | Keep headers identical and apply styles via component classes avoiding the 440 | trap of semantically requiring a specific header and then having to override 441 | styles because cosmetics aren't appropriate. 442 | 443 | http://csswizardry.com/2016/02/managing-typography-on-large-apps/ 444 | */ 445 | h1, h2, h3, h4, h5, h6 { 446 | font-size: 1rem; } 447 | 448 | p { 449 | margin-bottom: 1.2em; } 450 | 451 | p:last-child { 452 | margin-bottom: 0; } 453 | 454 | /* 455 | Define consistent indentation lists. Also, add matching margin bottom so 456 | they can be mixed in with paragraphs. 457 | */ 458 | dd, ol, ul { 459 | margin: 0 0 1.2em 1.2em; } 460 | dd:last-child, ol:last-child, ul:last-child { 461 | margin-bottom: 0; } 462 | 463 | /* 464 | Boxes off content 465 | http://csswizardry.com/2011/10/the-island-object/ 466 | */ 467 | /* 468 | [1] So we can apply the `.o-box` class to naturally-inline elements. 469 | [2] If within a flex box, make sure it stretches full width by default. 470 | */ 471 | .o-box { 472 | display: block; 473 | /* [1] */ 474 | width: 100%; 475 | /* [2] */ } 476 | 477 | /* 478 | Generates variants in padding size using data from settings.spacing. 20% 479 | extra is added to the bottom of the box to better visually balance contents. 480 | */ 481 | .o-box--spacing-none { 482 | padding: 0rem 0rem 0rem 0rem; } 483 | 484 | .o-box--spacing-micro { 485 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 486 | 487 | .o-box--spacing-tiny { 488 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 489 | 490 | .o-box--spacing-small { 491 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 492 | 493 | .o-box--spacing-regular { 494 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 495 | 496 | .o-box--spacing-large { 497 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 498 | 499 | .o-box--spacing-huge { 500 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } 501 | 502 | @media (min-width: 23.4375em) { 503 | .o-box--spacing-none\@sm { 504 | padding: 0rem 0rem 0rem 0rem; } 505 | .o-box--spacing-micro\@sm { 506 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 507 | .o-box--spacing-tiny\@sm { 508 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 509 | .o-box--spacing-small\@sm { 510 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 511 | .o-box--spacing-regular\@sm { 512 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 513 | .o-box--spacing-large\@sm { 514 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 515 | .o-box--spacing-huge\@sm { 516 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 517 | 518 | @media (min-width: 26.5625em) { 519 | .o-box--spacing-none\@sm2 { 520 | padding: 0rem 0rem 0rem 0rem; } 521 | .o-box--spacing-micro\@sm2 { 522 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 523 | .o-box--spacing-tiny\@sm2 { 524 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 525 | .o-box--spacing-small\@sm2 { 526 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 527 | .o-box--spacing-regular\@sm2 { 528 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 529 | .o-box--spacing-large\@sm2 { 530 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 531 | .o-box--spacing-huge\@sm2 { 532 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 533 | 534 | @media (min-width: 34.375em) { 535 | .o-box--spacing-none\@sm3 { 536 | padding: 0rem 0rem 0rem 0rem; } 537 | .o-box--spacing-micro\@sm3 { 538 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 539 | .o-box--spacing-tiny\@sm3 { 540 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 541 | .o-box--spacing-small\@sm3 { 542 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 543 | .o-box--spacing-regular\@sm3 { 544 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 545 | .o-box--spacing-large\@sm3 { 546 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 547 | .o-box--spacing-huge\@sm3 { 548 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 549 | 550 | @media (min-width: 48em) { 551 | .o-box--spacing-none\@md { 552 | padding: 0rem 0rem 0rem 0rem; } 553 | .o-box--spacing-micro\@md { 554 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 555 | .o-box--spacing-tiny\@md { 556 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 557 | .o-box--spacing-small\@md { 558 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 559 | .o-box--spacing-regular\@md { 560 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 561 | .o-box--spacing-large\@md { 562 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 563 | .o-box--spacing-huge\@md { 564 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 565 | 566 | @media (min-width: 52.5em) { 567 | .o-box--spacing-none\@md2 { 568 | padding: 0rem 0rem 0rem 0rem; } 569 | .o-box--spacing-micro\@md2 { 570 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 571 | .o-box--spacing-tiny\@md2 { 572 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 573 | .o-box--spacing-small\@md2 { 574 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 575 | .o-box--spacing-regular\@md2 { 576 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 577 | .o-box--spacing-large\@md2 { 578 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 579 | .o-box--spacing-huge\@md2 { 580 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 581 | 582 | @media (min-width: 57.8125em) { 583 | .o-box--spacing-none\@md3 { 584 | padding: 0rem 0rem 0rem 0rem; } 585 | .o-box--spacing-micro\@md3 { 586 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 587 | .o-box--spacing-tiny\@md3 { 588 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 589 | .o-box--spacing-small\@md3 { 590 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 591 | .o-box--spacing-regular\@md3 { 592 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 593 | .o-box--spacing-large\@md3 { 594 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 595 | .o-box--spacing-huge\@md3 { 596 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 597 | 598 | @media (min-width: 64em) { 599 | .o-box--spacing-none\@lg { 600 | padding: 0rem 0rem 0rem 0rem; } 601 | .o-box--spacing-micro\@lg { 602 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 603 | .o-box--spacing-tiny\@lg { 604 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 605 | .o-box--spacing-small\@lg { 606 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 607 | .o-box--spacing-regular\@lg { 608 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 609 | .o-box--spacing-large\@lg { 610 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 611 | .o-box--spacing-huge\@lg { 612 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 613 | 614 | @media (min-width: 80em) { 615 | .o-box--spacing-none\@lg2 { 616 | padding: 0rem 0rem 0rem 0rem; } 617 | .o-box--spacing-micro\@lg2 { 618 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 619 | .o-box--spacing-tiny\@lg2 { 620 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 621 | .o-box--spacing-small\@lg2 { 622 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 623 | .o-box--spacing-regular\@lg2 { 624 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 625 | .o-box--spacing-large\@lg2 { 626 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 627 | .o-box--spacing-huge\@lg2 { 628 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 629 | 630 | @media (min-width: 90em) { 631 | .o-box--spacing-none\@lg3 { 632 | padding: 0rem 0rem 0rem 0rem; } 633 | .o-box--spacing-micro\@lg3 { 634 | padding: 0.3125rem 0.3125rem 0.375rem 0.3125rem; } 635 | .o-box--spacing-tiny\@lg3 { 636 | padding: 0.625rem 0.625rem 0.75rem 0.625rem; } 637 | .o-box--spacing-small\@lg3 { 638 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 639 | .o-box--spacing-regular\@lg3 { 640 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 641 | .o-box--spacing-large\@lg3 { 642 | padding: 3.125rem 3.125rem 3.75rem 3.125rem; } 643 | .o-box--spacing-huge\@lg3 { 644 | padding: 4.6875rem 4.6875rem 5.625rem 4.6875rem; } } 645 | 646 | /* 647 | Add these to a box with spacing to filter which sides have spacing. 648 | */ 649 | .o-box--spacing-disable-left, 650 | .o-box--spacing-horizontal { 651 | padding-left: 0; } 652 | 653 | .o-box--spacing-disable-right, 654 | .o-box--spacing-horizontal { 655 | padding-right: 0; } 656 | 657 | .o-box--spacing-disable-top, 658 | .o-box--spacing-vertical { 659 | padding-top: 0; } 660 | 661 | .o-box--spacing-disable-bottom, 662 | .o-box--spacing-vertical { 663 | padding-bottom: 0; } 664 | 665 | /* 666 | Constrains the content within a max-width. Typically used with 667 | o-layout and width utilities to form a 12 column grid system. 668 | */ 669 | .o-container { 670 | margin-right: auto; 671 | margin-left: auto; 672 | max-width: 73.125rem; 673 | padding-left: 1.25rem; 674 | padding-right: 1.25rem; 675 | width: 100%; } 676 | 677 | /* 678 | The layout object is used to construct a grid-like layout system, with each 679 | layout__item representing an individual column. Typically used with 680 | container object and width utilities to form a grid system. 681 | */ 682 | /* 683 | [1] Allows us to use the layout object on any type of element. 684 | [2] Makes layout fill all available space. Useful for nesting layouts within 685 | layouts. 686 | [3] We need to defensively reset any box-model properties. 687 | [4] Absorb amount equal to half of the gutter on either side to account for 688 | their spacing. 689 | [5] Removes bullet points if layout is a list 690 | */ 691 | .o-layout { 692 | align-items: flex-start; 693 | display: flex; 694 | /* [1] */ 695 | flex-wrap: wrap; 696 | flex-grow: 1; 697 | /* [2] */ 698 | margin: 0; 699 | /* [3] */ 700 | padding: 0; 701 | /* [3] */ 702 | margin-left: -rem(20px)/2; 703 | /* [4] */ 704 | margin-right: -rem(20px)/2; 705 | /* [4] */ 706 | list-style: none; 707 | /* [5] */ } 708 | 709 | /* 710 | [1] Required in order to combine fluid widths with fixed gutters. 711 | */ 712 | .o-layout__item { 713 | box-sizing: border-box; 714 | /* [1] */ 715 | padding-left: 0.625rem; 716 | padding-right: 0.625rem; 717 | vertical-align: top; 718 | width: 100%; 719 | max-width: 100%; 720 | flex-basis: 0; 721 | flex-grow: 1; } 722 | 723 | /* 724 | Flush removes the gutter between layout items. 725 | */ 726 | /* 727 | [1] Remove negative margins as we no longer have to absorb any paddings 728 | from columns 729 | */ 730 | .o-layout--flush { 731 | margin-left: 0; 732 | /* [1] */ 733 | margin-right: 0; 734 | /* [1] */ } 735 | .o-layout--flush > .o-layout__item { 736 | padding-left: 0; 737 | padding-right: 0; } 738 | 739 | .o-layout__item--flush:not(:first-child) { 740 | padding-left: 0; } 741 | 742 | .o-layout__item--flush:not(:last-child) { 743 | padding-right: 0; } 744 | 745 | /* 746 | Allows each layout item to size itself automatically on a single row by 747 | dividing the space equally between the total number of items. 748 | */ 749 | .o-layout--fit { 750 | flex-wrap: nowrap; } 751 | 752 | /* 753 | Makes each column have an equal height. Also includes modifiers for 754 | individual columns. 755 | */ 756 | .o-layout--fit-height { 757 | align-items: stretch; } 758 | 759 | .o-layout__item--fit-height { 760 | align-self: stretch; } 761 | 762 | /* 763 | With a fit-height modifier active, any child element 764 | with 'o-layout__fill' will expand to fill all available 765 | space created by everything being equal height. 766 | */ 767 | .o-layout--fit-height .o-layout__fill, 768 | .o-layout__item--fit-height .o-layout__fill { 769 | display: flex; 770 | flex-grow: 1; 771 | flex-direction: column; 772 | height: 100%; } 773 | 774 | /* 775 | Standard button component. 776 | */ 777 | /* 778 | Easily assign colours to the button component without having to 779 | find/replace variables. 780 | */ 781 | /* 782 | [1] Remove anchor text-decoration (necessary when styling `a`s as buttons). 783 | [2] Font size duplicate of c-text-lead. 784 | [3] Focus styles for when the user tabs onto the button shouldn't be just a 785 | colour change as people with colour blindness may not see it. 786 | */ 787 | .c-button { 788 | align-items: center; 789 | background-color: #ba4252; 790 | border-radius: 0.625rem; 791 | border: 0.125rem solid transparent; 792 | color: #ffffff; 793 | cursor: pointer; 794 | display: inline-flex; 795 | font-size: 1.125rem; 796 | /* [2] */ 797 | font-weight: bold; 798 | justify-content: center; 799 | line-height: 2; 800 | padding: 0 1.25rem; 801 | text-decoration: none; 802 | /* [1] */ 803 | position: relative; 804 | transition: background-color 0.25s, border-color 0.25s, color 0.25s; 805 | min-height: 3.125rem; 806 | min-width: 3.125rem; } 807 | .c-button:hover { 808 | background-color: #943541; } 809 | .c-button:hover, .c-button:active, .c-button:focus { 810 | text-decoration: none; 811 | /* [1] */ 812 | outline: none; } 813 | .c-button:focus { 814 | background-color: #943541; 815 | box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25), 0 0 0.9375rem 0.1875rem rgba(186, 66, 82, 0.5); } 816 | 817 | @media (min-width: 48em) { 818 | .c-button { 819 | font-size: 1.375rem; 820 | /* [2] */ } } 821 | 822 | /* 823 | Decorated wrapper around expander object. Use if you require a premade 824 | expander, rather than creating your own using the expander object as a base. 825 | */ 826 | /* 827 | Easily assign colours to the button component without having to 828 | find/replace variables. 829 | */ 830 | .c-expander__header { 831 | border: 0rem solid #c4c4c4; 832 | border-radius: 10px; 833 | transition: border-radius 0.15s, background-color 0.25s; 834 | position: relative; 835 | overflow: hidden; 836 | background-color: #f5f5f5; 837 | border-width: 0.0625rem; } 838 | 839 | .c-expander__header-icon { 840 | width: 1.25rem; 841 | height: 1.25rem; 842 | position: relative; } 843 | .c-expander__header-icon:before, .c-expander__header-icon:after { 844 | content: ''; 845 | display: block; 846 | width: 0.125rem; 847 | height: 1.25rem; 848 | background-color: currentColor; 849 | margin: 0 auto; 850 | transition: transform 0.25s; } 851 | .c-expander__header-icon:after { 852 | width: 1.25rem; 853 | height: 0.125rem; 854 | position: absolute; 855 | bottom: 0.5625rem; } 856 | 857 | .c-expander.is-active .c-expander__header { 858 | background-color: #f5f5f5; } 859 | 860 | .c-expander.is-active .c-expander__header-icon:before { 861 | transform: rotate(90deg); } 862 | 863 | .c-expander__content { 864 | display: none; 865 | border: 0rem solid #c4c4c4; 866 | border-top: 0; 867 | border-bottom-left-radius: 0.625rem; 868 | border-bottom-right-radius: 0.625rem; } 869 | 870 | .c-expander.is-active .c-expander__content { 871 | display: block; } 872 | 873 | .c-expander--content-border .c-expander__content { 874 | border-width: 0.0625rem; } 875 | 876 | .c-expander--content-border.is-active .c-expander__header, .c-expander--content-border.is-animating .c-expander__header { 877 | border-bottom-right-radius: 0; 878 | border-bottom-left-radius: 0; } 879 | 880 | /* 881 | In order to separate our semantic decisions from our stylistic ones, we only 882 | define opinionated typographical styles against classes, NOT against 883 | typographic HTML elements. 884 | 885 | Example: Will prevent a case where we need to use a H3 because of how it 886 | looks, rather than because its the correct place to use it in the document. 887 | 888 | https://csswizardry.com/2016/02/managing-typography-on-large-apps/ 889 | 890 | Naming convention taken from the NATO phonetic alphabet: 891 | https://en.wikipedia.org/wiki/NATO_phonetic_alphabet 892 | */ 893 | /* 894 | Easily assign colours to the component without having to 895 | find/replace variables. 896 | */ 897 | .c-type-alpha { 898 | font-size: 2.25rem; } 899 | 900 | .c-type-bravo { 901 | font-size: 1.8125rem; } 902 | 903 | .c-type-charlie { 904 | font-size: 1.5625rem; } 905 | 906 | .c-type-delta { 907 | font-size: 1.375rem; } 908 | 909 | .c-type-echo { 910 | font-size: 1.25rem; } 911 | 912 | .c-type-foxtrot { 913 | font-size: 1.125rem; } 914 | 915 | @media (min-width: 48em) { 916 | .c-type-alpha { 917 | font-size: 3.125rem; } 918 | .c-type-bravo { 919 | font-size: 2.5rem; } 920 | .c-type-charlie { 921 | font-size: 2.125rem; } 922 | .c-type-delta { 923 | font-size: 1.75rem; } 924 | .c-type-echo { 925 | font-size: 1.5rem; } 926 | .c-type-foxtrot { 927 | font-size: 1.375rem; } } 928 | 929 | .u-align-left { 930 | text-align: left !important; } 931 | 932 | .u-align-center { 933 | text-align: center !important; } 934 | 935 | .u-align-right { 936 | text-align: right !important; } 937 | 938 | @media (min-width: 23.4375em) { 939 | .u-align-left\@sm { 940 | text-align: left !important; } 941 | .u-align-center\@sm { 942 | text-align: center !important; } 943 | .u-align-right\@sm { 944 | text-align: right !important; } } 945 | 946 | @media (min-width: 26.5625em) { 947 | .u-align-left\@sm2 { 948 | text-align: left !important; } 949 | .u-align-center\@sm2 { 950 | text-align: center !important; } 951 | .u-align-right\@sm2 { 952 | text-align: right !important; } } 953 | 954 | @media (min-width: 34.375em) { 955 | .u-align-left\@sm3 { 956 | text-align: left !important; } 957 | .u-align-center\@sm3 { 958 | text-align: center !important; } 959 | .u-align-right\@sm3 { 960 | text-align: right !important; } } 961 | 962 | @media (min-width: 48em) { 963 | .u-align-left\@md { 964 | text-align: left !important; } 965 | .u-align-center\@md { 966 | text-align: center !important; } 967 | .u-align-right\@md { 968 | text-align: right !important; } } 969 | 970 | @media (min-width: 52.5em) { 971 | .u-align-left\@md2 { 972 | text-align: left !important; } 973 | .u-align-center\@md2 { 974 | text-align: center !important; } 975 | .u-align-right\@md2 { 976 | text-align: right !important; } } 977 | 978 | @media (min-width: 57.8125em) { 979 | .u-align-left\@md3 { 980 | text-align: left !important; } 981 | .u-align-center\@md3 { 982 | text-align: center !important; } 983 | .u-align-right\@md3 { 984 | text-align: right !important; } } 985 | 986 | @media (min-width: 64em) { 987 | .u-align-left\@lg { 988 | text-align: left !important; } 989 | .u-align-center\@lg { 990 | text-align: center !important; } 991 | .u-align-right\@lg { 992 | text-align: right !important; } } 993 | 994 | @media (min-width: 80em) { 995 | .u-align-left\@lg2 { 996 | text-align: left !important; } 997 | .u-align-center\@lg2 { 998 | text-align: center !important; } 999 | .u-align-right\@lg2 { 1000 | text-align: right !important; } } 1001 | 1002 | @media (min-width: 90em) { 1003 | .u-align-left\@lg3 { 1004 | text-align: left !important; } 1005 | .u-align-center\@lg3 { 1006 | text-align: center !important; } 1007 | .u-align-right\@lg3 { 1008 | text-align: right !important; } } 1009 | 1010 | [class*='u-flex-'] { 1011 | display: flex !important; } 1012 | 1013 | .u-flex-middle, 1014 | .u-flex-center-all { 1015 | align-items: center !important; } 1016 | 1017 | .u-flex-center, 1018 | .u-flex-center-all { 1019 | justify-content: center !important; } 1020 | 1021 | .u-flex-justify-start, 1022 | .u-flex-left { 1023 | justify-content: flex-start !important; } 1024 | 1025 | .u-flex-justify-end, 1026 | .u-flex-right { 1027 | justify-content: flex-end !important; } 1028 | 1029 | .u-flex-align-start, 1030 | .u-flex-top { 1031 | align-items: flex-start !important; } 1032 | 1033 | .u-flex-align-end, 1034 | .u-flex-bottom { 1035 | align-items: flex-end !important; } 1036 | 1037 | .u-width-1\/12 { 1038 | width: 8.33333333% !important; 1039 | max-width: 8.33333333% !important; 1040 | flex-basis: 8.33333333% !important; 1041 | margin-left: 0 !important; 1042 | /* [1] */ 1043 | flex-grow: 1 !important; } 1044 | 1045 | .u-width-2\/12 { 1046 | width: 16.66666667% !important; 1047 | max-width: 16.66666667% !important; 1048 | flex-basis: 16.66666667% !important; 1049 | margin-left: 0 !important; 1050 | /* [1] */ 1051 | flex-grow: 1 !important; } 1052 | 1053 | .u-width-3\/12 { 1054 | width: 25% !important; 1055 | max-width: 25% !important; 1056 | flex-basis: 25% !important; 1057 | margin-left: 0 !important; 1058 | /* [1] */ 1059 | flex-grow: 1 !important; } 1060 | 1061 | .u-width-4\/12 { 1062 | width: 33.33333333% !important; 1063 | max-width: 33.33333333% !important; 1064 | flex-basis: 33.33333333% !important; 1065 | margin-left: 0 !important; 1066 | /* [1] */ 1067 | flex-grow: 1 !important; } 1068 | 1069 | .u-width-5\/12 { 1070 | width: 41.66666667% !important; 1071 | max-width: 41.66666667% !important; 1072 | flex-basis: 41.66666667% !important; 1073 | margin-left: 0 !important; 1074 | /* [1] */ 1075 | flex-grow: 1 !important; } 1076 | 1077 | .u-width-6\/12 { 1078 | width: 50% !important; 1079 | max-width: 50% !important; 1080 | flex-basis: 50% !important; 1081 | margin-left: 0 !important; 1082 | /* [1] */ 1083 | flex-grow: 1 !important; } 1084 | 1085 | .u-width-7\/12 { 1086 | width: 58.33333333% !important; 1087 | max-width: 58.33333333% !important; 1088 | flex-basis: 58.33333333% !important; 1089 | margin-left: 0 !important; 1090 | /* [1] */ 1091 | flex-grow: 1 !important; } 1092 | 1093 | .u-width-8\/12 { 1094 | width: 66.66666667% !important; 1095 | max-width: 66.66666667% !important; 1096 | flex-basis: 66.66666667% !important; 1097 | margin-left: 0 !important; 1098 | /* [1] */ 1099 | flex-grow: 1 !important; } 1100 | 1101 | .u-width-9\/12 { 1102 | width: 75% !important; 1103 | max-width: 75% !important; 1104 | flex-basis: 75% !important; 1105 | margin-left: 0 !important; 1106 | /* [1] */ 1107 | flex-grow: 1 !important; } 1108 | 1109 | .u-width-10\/12 { 1110 | width: 83.33333333% !important; 1111 | max-width: 83.33333333% !important; 1112 | flex-basis: 83.33333333% !important; 1113 | margin-left: 0 !important; 1114 | /* [1] */ 1115 | flex-grow: 1 !important; } 1116 | 1117 | .u-width-11\/12 { 1118 | width: 91.66666667% !important; 1119 | max-width: 91.66666667% !important; 1120 | flex-basis: 91.66666667% !important; 1121 | margin-left: 0 !important; 1122 | /* [1] */ 1123 | flex-grow: 1 !important; } 1124 | 1125 | .u-width-12\/12 { 1126 | width: 100% !important; 1127 | max-width: 100% !important; 1128 | flex-basis: 100% !important; 1129 | margin-left: 0 !important; 1130 | /* [1] */ 1131 | flex-grow: 1 !important; } 1132 | 1133 | .u-width-auto { 1134 | width: auto !important; 1135 | flex-basis: 0 !important; 1136 | margin-left: 0 !important; 1137 | /* [1] */ 1138 | flex-grow: 1 !important; 1139 | max-width: initial !important; } 1140 | 1141 | .u-width-grow { 1142 | width: auto !important; 1143 | flex-basis: auto !important; 1144 | margin-left: 0 !important; 1145 | /* [1] */ 1146 | flex-grow: 1 !important; 1147 | max-width: initial !important; } 1148 | 1149 | .u-width-shrink { 1150 | width: auto !important; 1151 | flex-basis: auto !important; 1152 | margin-left: 0 !important; 1153 | /* [1] */ 1154 | flex-grow: 0 !important; 1155 | max-width: initial !important; } 1156 | 1157 | @media (min-width: 23.4375em) { 1158 | .u-width-1\/12\@sm { 1159 | width: 8.33333333% !important; 1160 | max-width: 8.33333333% !important; 1161 | flex-basis: 8.33333333% !important; 1162 | margin-left: 0 !important; 1163 | /* [1] */ 1164 | flex-grow: 1 !important; } 1165 | .u-width-2\/12\@sm { 1166 | width: 16.66666667% !important; 1167 | max-width: 16.66666667% !important; 1168 | flex-basis: 16.66666667% !important; 1169 | margin-left: 0 !important; 1170 | /* [1] */ 1171 | flex-grow: 1 !important; } 1172 | .u-width-3\/12\@sm { 1173 | width: 25% !important; 1174 | max-width: 25% !important; 1175 | flex-basis: 25% !important; 1176 | margin-left: 0 !important; 1177 | /* [1] */ 1178 | flex-grow: 1 !important; } 1179 | .u-width-4\/12\@sm { 1180 | width: 33.33333333% !important; 1181 | max-width: 33.33333333% !important; 1182 | flex-basis: 33.33333333% !important; 1183 | margin-left: 0 !important; 1184 | /* [1] */ 1185 | flex-grow: 1 !important; } 1186 | .u-width-5\/12\@sm { 1187 | width: 41.66666667% !important; 1188 | max-width: 41.66666667% !important; 1189 | flex-basis: 41.66666667% !important; 1190 | margin-left: 0 !important; 1191 | /* [1] */ 1192 | flex-grow: 1 !important; } 1193 | .u-width-6\/12\@sm { 1194 | width: 50% !important; 1195 | max-width: 50% !important; 1196 | flex-basis: 50% !important; 1197 | margin-left: 0 !important; 1198 | /* [1] */ 1199 | flex-grow: 1 !important; } 1200 | .u-width-7\/12\@sm { 1201 | width: 58.33333333% !important; 1202 | max-width: 58.33333333% !important; 1203 | flex-basis: 58.33333333% !important; 1204 | margin-left: 0 !important; 1205 | /* [1] */ 1206 | flex-grow: 1 !important; } 1207 | .u-width-8\/12\@sm { 1208 | width: 66.66666667% !important; 1209 | max-width: 66.66666667% !important; 1210 | flex-basis: 66.66666667% !important; 1211 | margin-left: 0 !important; 1212 | /* [1] */ 1213 | flex-grow: 1 !important; } 1214 | .u-width-9\/12\@sm { 1215 | width: 75% !important; 1216 | max-width: 75% !important; 1217 | flex-basis: 75% !important; 1218 | margin-left: 0 !important; 1219 | /* [1] */ 1220 | flex-grow: 1 !important; } 1221 | .u-width-10\/12\@sm { 1222 | width: 83.33333333% !important; 1223 | max-width: 83.33333333% !important; 1224 | flex-basis: 83.33333333% !important; 1225 | margin-left: 0 !important; 1226 | /* [1] */ 1227 | flex-grow: 1 !important; } 1228 | .u-width-11\/12\@sm { 1229 | width: 91.66666667% !important; 1230 | max-width: 91.66666667% !important; 1231 | flex-basis: 91.66666667% !important; 1232 | margin-left: 0 !important; 1233 | /* [1] */ 1234 | flex-grow: 1 !important; } 1235 | .u-width-12\/12\@sm { 1236 | width: 100% !important; 1237 | max-width: 100% !important; 1238 | flex-basis: 100% !important; 1239 | margin-left: 0 !important; 1240 | /* [1] */ 1241 | flex-grow: 1 !important; } 1242 | .u-width-auto\@sm { 1243 | width: auto !important; 1244 | flex-basis: 0 !important; 1245 | margin-left: 0 !important; 1246 | /* [1] */ 1247 | flex-grow: 1 !important; 1248 | max-width: initial !important; } 1249 | .u-width-grow\@sm { 1250 | width: auto !important; 1251 | flex-basis: auto !important; 1252 | margin-left: 0 !important; 1253 | /* [1] */ 1254 | flex-grow: 1 !important; 1255 | max-width: initial !important; } 1256 | .u-width-shrink\@sm { 1257 | width: auto !important; 1258 | flex-basis: auto !important; 1259 | margin-left: 0 !important; 1260 | /* [1] */ 1261 | flex-grow: 0 !important; 1262 | max-width: initial !important; } } 1263 | 1264 | @media (min-width: 26.5625em) { 1265 | .u-width-1\/12\@sm2 { 1266 | width: 8.33333333% !important; 1267 | max-width: 8.33333333% !important; 1268 | flex-basis: 8.33333333% !important; 1269 | margin-left: 0 !important; 1270 | /* [1] */ 1271 | flex-grow: 1 !important; } 1272 | .u-width-2\/12\@sm2 { 1273 | width: 16.66666667% !important; 1274 | max-width: 16.66666667% !important; 1275 | flex-basis: 16.66666667% !important; 1276 | margin-left: 0 !important; 1277 | /* [1] */ 1278 | flex-grow: 1 !important; } 1279 | .u-width-3\/12\@sm2 { 1280 | width: 25% !important; 1281 | max-width: 25% !important; 1282 | flex-basis: 25% !important; 1283 | margin-left: 0 !important; 1284 | /* [1] */ 1285 | flex-grow: 1 !important; } 1286 | .u-width-4\/12\@sm2 { 1287 | width: 33.33333333% !important; 1288 | max-width: 33.33333333% !important; 1289 | flex-basis: 33.33333333% !important; 1290 | margin-left: 0 !important; 1291 | /* [1] */ 1292 | flex-grow: 1 !important; } 1293 | .u-width-5\/12\@sm2 { 1294 | width: 41.66666667% !important; 1295 | max-width: 41.66666667% !important; 1296 | flex-basis: 41.66666667% !important; 1297 | margin-left: 0 !important; 1298 | /* [1] */ 1299 | flex-grow: 1 !important; } 1300 | .u-width-6\/12\@sm2 { 1301 | width: 50% !important; 1302 | max-width: 50% !important; 1303 | flex-basis: 50% !important; 1304 | margin-left: 0 !important; 1305 | /* [1] */ 1306 | flex-grow: 1 !important; } 1307 | .u-width-7\/12\@sm2 { 1308 | width: 58.33333333% !important; 1309 | max-width: 58.33333333% !important; 1310 | flex-basis: 58.33333333% !important; 1311 | margin-left: 0 !important; 1312 | /* [1] */ 1313 | flex-grow: 1 !important; } 1314 | .u-width-8\/12\@sm2 { 1315 | width: 66.66666667% !important; 1316 | max-width: 66.66666667% !important; 1317 | flex-basis: 66.66666667% !important; 1318 | margin-left: 0 !important; 1319 | /* [1] */ 1320 | flex-grow: 1 !important; } 1321 | .u-width-9\/12\@sm2 { 1322 | width: 75% !important; 1323 | max-width: 75% !important; 1324 | flex-basis: 75% !important; 1325 | margin-left: 0 !important; 1326 | /* [1] */ 1327 | flex-grow: 1 !important; } 1328 | .u-width-10\/12\@sm2 { 1329 | width: 83.33333333% !important; 1330 | max-width: 83.33333333% !important; 1331 | flex-basis: 83.33333333% !important; 1332 | margin-left: 0 !important; 1333 | /* [1] */ 1334 | flex-grow: 1 !important; } 1335 | .u-width-11\/12\@sm2 { 1336 | width: 91.66666667% !important; 1337 | max-width: 91.66666667% !important; 1338 | flex-basis: 91.66666667% !important; 1339 | margin-left: 0 !important; 1340 | /* [1] */ 1341 | flex-grow: 1 !important; } 1342 | .u-width-12\/12\@sm2 { 1343 | width: 100% !important; 1344 | max-width: 100% !important; 1345 | flex-basis: 100% !important; 1346 | margin-left: 0 !important; 1347 | /* [1] */ 1348 | flex-grow: 1 !important; } 1349 | .u-width-auto\@sm2 { 1350 | width: auto !important; 1351 | flex-basis: 0 !important; 1352 | margin-left: 0 !important; 1353 | /* [1] */ 1354 | flex-grow: 1 !important; 1355 | max-width: initial !important; } 1356 | .u-width-grow\@sm2 { 1357 | width: auto !important; 1358 | flex-basis: auto !important; 1359 | margin-left: 0 !important; 1360 | /* [1] */ 1361 | flex-grow: 1 !important; 1362 | max-width: initial !important; } 1363 | .u-width-shrink\@sm2 { 1364 | width: auto !important; 1365 | flex-basis: auto !important; 1366 | margin-left: 0 !important; 1367 | /* [1] */ 1368 | flex-grow: 0 !important; 1369 | max-width: initial !important; } } 1370 | 1371 | @media (min-width: 34.375em) { 1372 | .u-width-1\/12\@sm3 { 1373 | width: 8.33333333% !important; 1374 | max-width: 8.33333333% !important; 1375 | flex-basis: 8.33333333% !important; 1376 | margin-left: 0 !important; 1377 | /* [1] */ 1378 | flex-grow: 1 !important; } 1379 | .u-width-2\/12\@sm3 { 1380 | width: 16.66666667% !important; 1381 | max-width: 16.66666667% !important; 1382 | flex-basis: 16.66666667% !important; 1383 | margin-left: 0 !important; 1384 | /* [1] */ 1385 | flex-grow: 1 !important; } 1386 | .u-width-3\/12\@sm3 { 1387 | width: 25% !important; 1388 | max-width: 25% !important; 1389 | flex-basis: 25% !important; 1390 | margin-left: 0 !important; 1391 | /* [1] */ 1392 | flex-grow: 1 !important; } 1393 | .u-width-4\/12\@sm3 { 1394 | width: 33.33333333% !important; 1395 | max-width: 33.33333333% !important; 1396 | flex-basis: 33.33333333% !important; 1397 | margin-left: 0 !important; 1398 | /* [1] */ 1399 | flex-grow: 1 !important; } 1400 | .u-width-5\/12\@sm3 { 1401 | width: 41.66666667% !important; 1402 | max-width: 41.66666667% !important; 1403 | flex-basis: 41.66666667% !important; 1404 | margin-left: 0 !important; 1405 | /* [1] */ 1406 | flex-grow: 1 !important; } 1407 | .u-width-6\/12\@sm3 { 1408 | width: 50% !important; 1409 | max-width: 50% !important; 1410 | flex-basis: 50% !important; 1411 | margin-left: 0 !important; 1412 | /* [1] */ 1413 | flex-grow: 1 !important; } 1414 | .u-width-7\/12\@sm3 { 1415 | width: 58.33333333% !important; 1416 | max-width: 58.33333333% !important; 1417 | flex-basis: 58.33333333% !important; 1418 | margin-left: 0 !important; 1419 | /* [1] */ 1420 | flex-grow: 1 !important; } 1421 | .u-width-8\/12\@sm3 { 1422 | width: 66.66666667% !important; 1423 | max-width: 66.66666667% !important; 1424 | flex-basis: 66.66666667% !important; 1425 | margin-left: 0 !important; 1426 | /* [1] */ 1427 | flex-grow: 1 !important; } 1428 | .u-width-9\/12\@sm3 { 1429 | width: 75% !important; 1430 | max-width: 75% !important; 1431 | flex-basis: 75% !important; 1432 | margin-left: 0 !important; 1433 | /* [1] */ 1434 | flex-grow: 1 !important; } 1435 | .u-width-10\/12\@sm3 { 1436 | width: 83.33333333% !important; 1437 | max-width: 83.33333333% !important; 1438 | flex-basis: 83.33333333% !important; 1439 | margin-left: 0 !important; 1440 | /* [1] */ 1441 | flex-grow: 1 !important; } 1442 | .u-width-11\/12\@sm3 { 1443 | width: 91.66666667% !important; 1444 | max-width: 91.66666667% !important; 1445 | flex-basis: 91.66666667% !important; 1446 | margin-left: 0 !important; 1447 | /* [1] */ 1448 | flex-grow: 1 !important; } 1449 | .u-width-12\/12\@sm3 { 1450 | width: 100% !important; 1451 | max-width: 100% !important; 1452 | flex-basis: 100% !important; 1453 | margin-left: 0 !important; 1454 | /* [1] */ 1455 | flex-grow: 1 !important; } 1456 | .u-width-auto\@sm3 { 1457 | width: auto !important; 1458 | flex-basis: 0 !important; 1459 | margin-left: 0 !important; 1460 | /* [1] */ 1461 | flex-grow: 1 !important; 1462 | max-width: initial !important; } 1463 | .u-width-grow\@sm3 { 1464 | width: auto !important; 1465 | flex-basis: auto !important; 1466 | margin-left: 0 !important; 1467 | /* [1] */ 1468 | flex-grow: 1 !important; 1469 | max-width: initial !important; } 1470 | .u-width-shrink\@sm3 { 1471 | width: auto !important; 1472 | flex-basis: auto !important; 1473 | margin-left: 0 !important; 1474 | /* [1] */ 1475 | flex-grow: 0 !important; 1476 | max-width: initial !important; } } 1477 | 1478 | @media (min-width: 48em) { 1479 | .u-width-1\/12\@md { 1480 | width: 8.33333333% !important; 1481 | max-width: 8.33333333% !important; 1482 | flex-basis: 8.33333333% !important; 1483 | margin-left: 0 !important; 1484 | /* [1] */ 1485 | flex-grow: 1 !important; } 1486 | .u-width-2\/12\@md { 1487 | width: 16.66666667% !important; 1488 | max-width: 16.66666667% !important; 1489 | flex-basis: 16.66666667% !important; 1490 | margin-left: 0 !important; 1491 | /* [1] */ 1492 | flex-grow: 1 !important; } 1493 | .u-width-3\/12\@md { 1494 | width: 25% !important; 1495 | max-width: 25% !important; 1496 | flex-basis: 25% !important; 1497 | margin-left: 0 !important; 1498 | /* [1] */ 1499 | flex-grow: 1 !important; } 1500 | .u-width-4\/12\@md { 1501 | width: 33.33333333% !important; 1502 | max-width: 33.33333333% !important; 1503 | flex-basis: 33.33333333% !important; 1504 | margin-left: 0 !important; 1505 | /* [1] */ 1506 | flex-grow: 1 !important; } 1507 | .u-width-5\/12\@md { 1508 | width: 41.66666667% !important; 1509 | max-width: 41.66666667% !important; 1510 | flex-basis: 41.66666667% !important; 1511 | margin-left: 0 !important; 1512 | /* [1] */ 1513 | flex-grow: 1 !important; } 1514 | .u-width-6\/12\@md { 1515 | width: 50% !important; 1516 | max-width: 50% !important; 1517 | flex-basis: 50% !important; 1518 | margin-left: 0 !important; 1519 | /* [1] */ 1520 | flex-grow: 1 !important; } 1521 | .u-width-7\/12\@md { 1522 | width: 58.33333333% !important; 1523 | max-width: 58.33333333% !important; 1524 | flex-basis: 58.33333333% !important; 1525 | margin-left: 0 !important; 1526 | /* [1] */ 1527 | flex-grow: 1 !important; } 1528 | .u-width-8\/12\@md { 1529 | width: 66.66666667% !important; 1530 | max-width: 66.66666667% !important; 1531 | flex-basis: 66.66666667% !important; 1532 | margin-left: 0 !important; 1533 | /* [1] */ 1534 | flex-grow: 1 !important; } 1535 | .u-width-9\/12\@md { 1536 | width: 75% !important; 1537 | max-width: 75% !important; 1538 | flex-basis: 75% !important; 1539 | margin-left: 0 !important; 1540 | /* [1] */ 1541 | flex-grow: 1 !important; } 1542 | .u-width-10\/12\@md { 1543 | width: 83.33333333% !important; 1544 | max-width: 83.33333333% !important; 1545 | flex-basis: 83.33333333% !important; 1546 | margin-left: 0 !important; 1547 | /* [1] */ 1548 | flex-grow: 1 !important; } 1549 | .u-width-11\/12\@md { 1550 | width: 91.66666667% !important; 1551 | max-width: 91.66666667% !important; 1552 | flex-basis: 91.66666667% !important; 1553 | margin-left: 0 !important; 1554 | /* [1] */ 1555 | flex-grow: 1 !important; } 1556 | .u-width-12\/12\@md { 1557 | width: 100% !important; 1558 | max-width: 100% !important; 1559 | flex-basis: 100% !important; 1560 | margin-left: 0 !important; 1561 | /* [1] */ 1562 | flex-grow: 1 !important; } 1563 | .u-width-auto\@md { 1564 | width: auto !important; 1565 | flex-basis: 0 !important; 1566 | margin-left: 0 !important; 1567 | /* [1] */ 1568 | flex-grow: 1 !important; 1569 | max-width: initial !important; } 1570 | .u-width-grow\@md { 1571 | width: auto !important; 1572 | flex-basis: auto !important; 1573 | margin-left: 0 !important; 1574 | /* [1] */ 1575 | flex-grow: 1 !important; 1576 | max-width: initial !important; } 1577 | .u-width-shrink\@md { 1578 | width: auto !important; 1579 | flex-basis: auto !important; 1580 | margin-left: 0 !important; 1581 | /* [1] */ 1582 | flex-grow: 0 !important; 1583 | max-width: initial !important; } } 1584 | 1585 | @media (min-width: 52.5em) { 1586 | .u-width-1\/12\@md2 { 1587 | width: 8.33333333% !important; 1588 | max-width: 8.33333333% !important; 1589 | flex-basis: 8.33333333% !important; 1590 | margin-left: 0 !important; 1591 | /* [1] */ 1592 | flex-grow: 1 !important; } 1593 | .u-width-2\/12\@md2 { 1594 | width: 16.66666667% !important; 1595 | max-width: 16.66666667% !important; 1596 | flex-basis: 16.66666667% !important; 1597 | margin-left: 0 !important; 1598 | /* [1] */ 1599 | flex-grow: 1 !important; } 1600 | .u-width-3\/12\@md2 { 1601 | width: 25% !important; 1602 | max-width: 25% !important; 1603 | flex-basis: 25% !important; 1604 | margin-left: 0 !important; 1605 | /* [1] */ 1606 | flex-grow: 1 !important; } 1607 | .u-width-4\/12\@md2 { 1608 | width: 33.33333333% !important; 1609 | max-width: 33.33333333% !important; 1610 | flex-basis: 33.33333333% !important; 1611 | margin-left: 0 !important; 1612 | /* [1] */ 1613 | flex-grow: 1 !important; } 1614 | .u-width-5\/12\@md2 { 1615 | width: 41.66666667% !important; 1616 | max-width: 41.66666667% !important; 1617 | flex-basis: 41.66666667% !important; 1618 | margin-left: 0 !important; 1619 | /* [1] */ 1620 | flex-grow: 1 !important; } 1621 | .u-width-6\/12\@md2 { 1622 | width: 50% !important; 1623 | max-width: 50% !important; 1624 | flex-basis: 50% !important; 1625 | margin-left: 0 !important; 1626 | /* [1] */ 1627 | flex-grow: 1 !important; } 1628 | .u-width-7\/12\@md2 { 1629 | width: 58.33333333% !important; 1630 | max-width: 58.33333333% !important; 1631 | flex-basis: 58.33333333% !important; 1632 | margin-left: 0 !important; 1633 | /* [1] */ 1634 | flex-grow: 1 !important; } 1635 | .u-width-8\/12\@md2 { 1636 | width: 66.66666667% !important; 1637 | max-width: 66.66666667% !important; 1638 | flex-basis: 66.66666667% !important; 1639 | margin-left: 0 !important; 1640 | /* [1] */ 1641 | flex-grow: 1 !important; } 1642 | .u-width-9\/12\@md2 { 1643 | width: 75% !important; 1644 | max-width: 75% !important; 1645 | flex-basis: 75% !important; 1646 | margin-left: 0 !important; 1647 | /* [1] */ 1648 | flex-grow: 1 !important; } 1649 | .u-width-10\/12\@md2 { 1650 | width: 83.33333333% !important; 1651 | max-width: 83.33333333% !important; 1652 | flex-basis: 83.33333333% !important; 1653 | margin-left: 0 !important; 1654 | /* [1] */ 1655 | flex-grow: 1 !important; } 1656 | .u-width-11\/12\@md2 { 1657 | width: 91.66666667% !important; 1658 | max-width: 91.66666667% !important; 1659 | flex-basis: 91.66666667% !important; 1660 | margin-left: 0 !important; 1661 | /* [1] */ 1662 | flex-grow: 1 !important; } 1663 | .u-width-12\/12\@md2 { 1664 | width: 100% !important; 1665 | max-width: 100% !important; 1666 | flex-basis: 100% !important; 1667 | margin-left: 0 !important; 1668 | /* [1] */ 1669 | flex-grow: 1 !important; } 1670 | .u-width-auto\@md2 { 1671 | width: auto !important; 1672 | flex-basis: 0 !important; 1673 | margin-left: 0 !important; 1674 | /* [1] */ 1675 | flex-grow: 1 !important; 1676 | max-width: initial !important; } 1677 | .u-width-grow\@md2 { 1678 | width: auto !important; 1679 | flex-basis: auto !important; 1680 | margin-left: 0 !important; 1681 | /* [1] */ 1682 | flex-grow: 1 !important; 1683 | max-width: initial !important; } 1684 | .u-width-shrink\@md2 { 1685 | width: auto !important; 1686 | flex-basis: auto !important; 1687 | margin-left: 0 !important; 1688 | /* [1] */ 1689 | flex-grow: 0 !important; 1690 | max-width: initial !important; } } 1691 | 1692 | @media (min-width: 57.8125em) { 1693 | .u-width-1\/12\@md3 { 1694 | width: 8.33333333% !important; 1695 | max-width: 8.33333333% !important; 1696 | flex-basis: 8.33333333% !important; 1697 | margin-left: 0 !important; 1698 | /* [1] */ 1699 | flex-grow: 1 !important; } 1700 | .u-width-2\/12\@md3 { 1701 | width: 16.66666667% !important; 1702 | max-width: 16.66666667% !important; 1703 | flex-basis: 16.66666667% !important; 1704 | margin-left: 0 !important; 1705 | /* [1] */ 1706 | flex-grow: 1 !important; } 1707 | .u-width-3\/12\@md3 { 1708 | width: 25% !important; 1709 | max-width: 25% !important; 1710 | flex-basis: 25% !important; 1711 | margin-left: 0 !important; 1712 | /* [1] */ 1713 | flex-grow: 1 !important; } 1714 | .u-width-4\/12\@md3 { 1715 | width: 33.33333333% !important; 1716 | max-width: 33.33333333% !important; 1717 | flex-basis: 33.33333333% !important; 1718 | margin-left: 0 !important; 1719 | /* [1] */ 1720 | flex-grow: 1 !important; } 1721 | .u-width-5\/12\@md3 { 1722 | width: 41.66666667% !important; 1723 | max-width: 41.66666667% !important; 1724 | flex-basis: 41.66666667% !important; 1725 | margin-left: 0 !important; 1726 | /* [1] */ 1727 | flex-grow: 1 !important; } 1728 | .u-width-6\/12\@md3 { 1729 | width: 50% !important; 1730 | max-width: 50% !important; 1731 | flex-basis: 50% !important; 1732 | margin-left: 0 !important; 1733 | /* [1] */ 1734 | flex-grow: 1 !important; } 1735 | .u-width-7\/12\@md3 { 1736 | width: 58.33333333% !important; 1737 | max-width: 58.33333333% !important; 1738 | flex-basis: 58.33333333% !important; 1739 | margin-left: 0 !important; 1740 | /* [1] */ 1741 | flex-grow: 1 !important; } 1742 | .u-width-8\/12\@md3 { 1743 | width: 66.66666667% !important; 1744 | max-width: 66.66666667% !important; 1745 | flex-basis: 66.66666667% !important; 1746 | margin-left: 0 !important; 1747 | /* [1] */ 1748 | flex-grow: 1 !important; } 1749 | .u-width-9\/12\@md3 { 1750 | width: 75% !important; 1751 | max-width: 75% !important; 1752 | flex-basis: 75% !important; 1753 | margin-left: 0 !important; 1754 | /* [1] */ 1755 | flex-grow: 1 !important; } 1756 | .u-width-10\/12\@md3 { 1757 | width: 83.33333333% !important; 1758 | max-width: 83.33333333% !important; 1759 | flex-basis: 83.33333333% !important; 1760 | margin-left: 0 !important; 1761 | /* [1] */ 1762 | flex-grow: 1 !important; } 1763 | .u-width-11\/12\@md3 { 1764 | width: 91.66666667% !important; 1765 | max-width: 91.66666667% !important; 1766 | flex-basis: 91.66666667% !important; 1767 | margin-left: 0 !important; 1768 | /* [1] */ 1769 | flex-grow: 1 !important; } 1770 | .u-width-12\/12\@md3 { 1771 | width: 100% !important; 1772 | max-width: 100% !important; 1773 | flex-basis: 100% !important; 1774 | margin-left: 0 !important; 1775 | /* [1] */ 1776 | flex-grow: 1 !important; } 1777 | .u-width-auto\@md3 { 1778 | width: auto !important; 1779 | flex-basis: 0 !important; 1780 | margin-left: 0 !important; 1781 | /* [1] */ 1782 | flex-grow: 1 !important; 1783 | max-width: initial !important; } 1784 | .u-width-grow\@md3 { 1785 | width: auto !important; 1786 | flex-basis: auto !important; 1787 | margin-left: 0 !important; 1788 | /* [1] */ 1789 | flex-grow: 1 !important; 1790 | max-width: initial !important; } 1791 | .u-width-shrink\@md3 { 1792 | width: auto !important; 1793 | flex-basis: auto !important; 1794 | margin-left: 0 !important; 1795 | /* [1] */ 1796 | flex-grow: 0 !important; 1797 | max-width: initial !important; } } 1798 | 1799 | @media (min-width: 64em) { 1800 | .u-width-1\/12\@lg { 1801 | width: 8.33333333% !important; 1802 | max-width: 8.33333333% !important; 1803 | flex-basis: 8.33333333% !important; 1804 | margin-left: 0 !important; 1805 | /* [1] */ 1806 | flex-grow: 1 !important; } 1807 | .u-width-2\/12\@lg { 1808 | width: 16.66666667% !important; 1809 | max-width: 16.66666667% !important; 1810 | flex-basis: 16.66666667% !important; 1811 | margin-left: 0 !important; 1812 | /* [1] */ 1813 | flex-grow: 1 !important; } 1814 | .u-width-3\/12\@lg { 1815 | width: 25% !important; 1816 | max-width: 25% !important; 1817 | flex-basis: 25% !important; 1818 | margin-left: 0 !important; 1819 | /* [1] */ 1820 | flex-grow: 1 !important; } 1821 | .u-width-4\/12\@lg { 1822 | width: 33.33333333% !important; 1823 | max-width: 33.33333333% !important; 1824 | flex-basis: 33.33333333% !important; 1825 | margin-left: 0 !important; 1826 | /* [1] */ 1827 | flex-grow: 1 !important; } 1828 | .u-width-5\/12\@lg { 1829 | width: 41.66666667% !important; 1830 | max-width: 41.66666667% !important; 1831 | flex-basis: 41.66666667% !important; 1832 | margin-left: 0 !important; 1833 | /* [1] */ 1834 | flex-grow: 1 !important; } 1835 | .u-width-6\/12\@lg { 1836 | width: 50% !important; 1837 | max-width: 50% !important; 1838 | flex-basis: 50% !important; 1839 | margin-left: 0 !important; 1840 | /* [1] */ 1841 | flex-grow: 1 !important; } 1842 | .u-width-7\/12\@lg { 1843 | width: 58.33333333% !important; 1844 | max-width: 58.33333333% !important; 1845 | flex-basis: 58.33333333% !important; 1846 | margin-left: 0 !important; 1847 | /* [1] */ 1848 | flex-grow: 1 !important; } 1849 | .u-width-8\/12\@lg { 1850 | width: 66.66666667% !important; 1851 | max-width: 66.66666667% !important; 1852 | flex-basis: 66.66666667% !important; 1853 | margin-left: 0 !important; 1854 | /* [1] */ 1855 | flex-grow: 1 !important; } 1856 | .u-width-9\/12\@lg { 1857 | width: 75% !important; 1858 | max-width: 75% !important; 1859 | flex-basis: 75% !important; 1860 | margin-left: 0 !important; 1861 | /* [1] */ 1862 | flex-grow: 1 !important; } 1863 | .u-width-10\/12\@lg { 1864 | width: 83.33333333% !important; 1865 | max-width: 83.33333333% !important; 1866 | flex-basis: 83.33333333% !important; 1867 | margin-left: 0 !important; 1868 | /* [1] */ 1869 | flex-grow: 1 !important; } 1870 | .u-width-11\/12\@lg { 1871 | width: 91.66666667% !important; 1872 | max-width: 91.66666667% !important; 1873 | flex-basis: 91.66666667% !important; 1874 | margin-left: 0 !important; 1875 | /* [1] */ 1876 | flex-grow: 1 !important; } 1877 | .u-width-12\/12\@lg { 1878 | width: 100% !important; 1879 | max-width: 100% !important; 1880 | flex-basis: 100% !important; 1881 | margin-left: 0 !important; 1882 | /* [1] */ 1883 | flex-grow: 1 !important; } 1884 | .u-width-auto\@lg { 1885 | width: auto !important; 1886 | flex-basis: 0 !important; 1887 | margin-left: 0 !important; 1888 | /* [1] */ 1889 | flex-grow: 1 !important; 1890 | max-width: initial !important; } 1891 | .u-width-grow\@lg { 1892 | width: auto !important; 1893 | flex-basis: auto !important; 1894 | margin-left: 0 !important; 1895 | /* [1] */ 1896 | flex-grow: 1 !important; 1897 | max-width: initial !important; } 1898 | .u-width-shrink\@lg { 1899 | width: auto !important; 1900 | flex-basis: auto !important; 1901 | margin-left: 0 !important; 1902 | /* [1] */ 1903 | flex-grow: 0 !important; 1904 | max-width: initial !important; } } 1905 | 1906 | @media (min-width: 80em) { 1907 | .u-width-1\/12\@lg2 { 1908 | width: 8.33333333% !important; 1909 | max-width: 8.33333333% !important; 1910 | flex-basis: 8.33333333% !important; 1911 | margin-left: 0 !important; 1912 | /* [1] */ 1913 | flex-grow: 1 !important; } 1914 | .u-width-2\/12\@lg2 { 1915 | width: 16.66666667% !important; 1916 | max-width: 16.66666667% !important; 1917 | flex-basis: 16.66666667% !important; 1918 | margin-left: 0 !important; 1919 | /* [1] */ 1920 | flex-grow: 1 !important; } 1921 | .u-width-3\/12\@lg2 { 1922 | width: 25% !important; 1923 | max-width: 25% !important; 1924 | flex-basis: 25% !important; 1925 | margin-left: 0 !important; 1926 | /* [1] */ 1927 | flex-grow: 1 !important; } 1928 | .u-width-4\/12\@lg2 { 1929 | width: 33.33333333% !important; 1930 | max-width: 33.33333333% !important; 1931 | flex-basis: 33.33333333% !important; 1932 | margin-left: 0 !important; 1933 | /* [1] */ 1934 | flex-grow: 1 !important; } 1935 | .u-width-5\/12\@lg2 { 1936 | width: 41.66666667% !important; 1937 | max-width: 41.66666667% !important; 1938 | flex-basis: 41.66666667% !important; 1939 | margin-left: 0 !important; 1940 | /* [1] */ 1941 | flex-grow: 1 !important; } 1942 | .u-width-6\/12\@lg2 { 1943 | width: 50% !important; 1944 | max-width: 50% !important; 1945 | flex-basis: 50% !important; 1946 | margin-left: 0 !important; 1947 | /* [1] */ 1948 | flex-grow: 1 !important; } 1949 | .u-width-7\/12\@lg2 { 1950 | width: 58.33333333% !important; 1951 | max-width: 58.33333333% !important; 1952 | flex-basis: 58.33333333% !important; 1953 | margin-left: 0 !important; 1954 | /* [1] */ 1955 | flex-grow: 1 !important; } 1956 | .u-width-8\/12\@lg2 { 1957 | width: 66.66666667% !important; 1958 | max-width: 66.66666667% !important; 1959 | flex-basis: 66.66666667% !important; 1960 | margin-left: 0 !important; 1961 | /* [1] */ 1962 | flex-grow: 1 !important; } 1963 | .u-width-9\/12\@lg2 { 1964 | width: 75% !important; 1965 | max-width: 75% !important; 1966 | flex-basis: 75% !important; 1967 | margin-left: 0 !important; 1968 | /* [1] */ 1969 | flex-grow: 1 !important; } 1970 | .u-width-10\/12\@lg2 { 1971 | width: 83.33333333% !important; 1972 | max-width: 83.33333333% !important; 1973 | flex-basis: 83.33333333% !important; 1974 | margin-left: 0 !important; 1975 | /* [1] */ 1976 | flex-grow: 1 !important; } 1977 | .u-width-11\/12\@lg2 { 1978 | width: 91.66666667% !important; 1979 | max-width: 91.66666667% !important; 1980 | flex-basis: 91.66666667% !important; 1981 | margin-left: 0 !important; 1982 | /* [1] */ 1983 | flex-grow: 1 !important; } 1984 | .u-width-12\/12\@lg2 { 1985 | width: 100% !important; 1986 | max-width: 100% !important; 1987 | flex-basis: 100% !important; 1988 | margin-left: 0 !important; 1989 | /* [1] */ 1990 | flex-grow: 1 !important; } 1991 | .u-width-auto\@lg2 { 1992 | width: auto !important; 1993 | flex-basis: 0 !important; 1994 | margin-left: 0 !important; 1995 | /* [1] */ 1996 | flex-grow: 1 !important; 1997 | max-width: initial !important; } 1998 | .u-width-grow\@lg2 { 1999 | width: auto !important; 2000 | flex-basis: auto !important; 2001 | margin-left: 0 !important; 2002 | /* [1] */ 2003 | flex-grow: 1 !important; 2004 | max-width: initial !important; } 2005 | .u-width-shrink\@lg2 { 2006 | width: auto !important; 2007 | flex-basis: auto !important; 2008 | margin-left: 0 !important; 2009 | /* [1] */ 2010 | flex-grow: 0 !important; 2011 | max-width: initial !important; } } 2012 | 2013 | @media (min-width: 90em) { 2014 | .u-width-1\/12\@lg3 { 2015 | width: 8.33333333% !important; 2016 | max-width: 8.33333333% !important; 2017 | flex-basis: 8.33333333% !important; 2018 | margin-left: 0 !important; 2019 | /* [1] */ 2020 | flex-grow: 1 !important; } 2021 | .u-width-2\/12\@lg3 { 2022 | width: 16.66666667% !important; 2023 | max-width: 16.66666667% !important; 2024 | flex-basis: 16.66666667% !important; 2025 | margin-left: 0 !important; 2026 | /* [1] */ 2027 | flex-grow: 1 !important; } 2028 | .u-width-3\/12\@lg3 { 2029 | width: 25% !important; 2030 | max-width: 25% !important; 2031 | flex-basis: 25% !important; 2032 | margin-left: 0 !important; 2033 | /* [1] */ 2034 | flex-grow: 1 !important; } 2035 | .u-width-4\/12\@lg3 { 2036 | width: 33.33333333% !important; 2037 | max-width: 33.33333333% !important; 2038 | flex-basis: 33.33333333% !important; 2039 | margin-left: 0 !important; 2040 | /* [1] */ 2041 | flex-grow: 1 !important; } 2042 | .u-width-5\/12\@lg3 { 2043 | width: 41.66666667% !important; 2044 | max-width: 41.66666667% !important; 2045 | flex-basis: 41.66666667% !important; 2046 | margin-left: 0 !important; 2047 | /* [1] */ 2048 | flex-grow: 1 !important; } 2049 | .u-width-6\/12\@lg3 { 2050 | width: 50% !important; 2051 | max-width: 50% !important; 2052 | flex-basis: 50% !important; 2053 | margin-left: 0 !important; 2054 | /* [1] */ 2055 | flex-grow: 1 !important; } 2056 | .u-width-7\/12\@lg3 { 2057 | width: 58.33333333% !important; 2058 | max-width: 58.33333333% !important; 2059 | flex-basis: 58.33333333% !important; 2060 | margin-left: 0 !important; 2061 | /* [1] */ 2062 | flex-grow: 1 !important; } 2063 | .u-width-8\/12\@lg3 { 2064 | width: 66.66666667% !important; 2065 | max-width: 66.66666667% !important; 2066 | flex-basis: 66.66666667% !important; 2067 | margin-left: 0 !important; 2068 | /* [1] */ 2069 | flex-grow: 1 !important; } 2070 | .u-width-9\/12\@lg3 { 2071 | width: 75% !important; 2072 | max-width: 75% !important; 2073 | flex-basis: 75% !important; 2074 | margin-left: 0 !important; 2075 | /* [1] */ 2076 | flex-grow: 1 !important; } 2077 | .u-width-10\/12\@lg3 { 2078 | width: 83.33333333% !important; 2079 | max-width: 83.33333333% !important; 2080 | flex-basis: 83.33333333% !important; 2081 | margin-left: 0 !important; 2082 | /* [1] */ 2083 | flex-grow: 1 !important; } 2084 | .u-width-11\/12\@lg3 { 2085 | width: 91.66666667% !important; 2086 | max-width: 91.66666667% !important; 2087 | flex-basis: 91.66666667% !important; 2088 | margin-left: 0 !important; 2089 | /* [1] */ 2090 | flex-grow: 1 !important; } 2091 | .u-width-12\/12\@lg3 { 2092 | width: 100% !important; 2093 | max-width: 100% !important; 2094 | flex-basis: 100% !important; 2095 | margin-left: 0 !important; 2096 | /* [1] */ 2097 | flex-grow: 1 !important; } 2098 | .u-width-auto\@lg3 { 2099 | width: auto !important; 2100 | flex-basis: 0 !important; 2101 | margin-left: 0 !important; 2102 | /* [1] */ 2103 | flex-grow: 1 !important; 2104 | max-width: initial !important; } 2105 | .u-width-grow\@lg3 { 2106 | width: auto !important; 2107 | flex-basis: auto !important; 2108 | margin-left: 0 !important; 2109 | /* [1] */ 2110 | flex-grow: 1 !important; 2111 | max-width: initial !important; } 2112 | .u-width-shrink\@lg3 { 2113 | width: auto !important; 2114 | flex-basis: auto !important; 2115 | margin-left: 0 !important; 2116 | /* [1] */ 2117 | flex-grow: 0 !important; 2118 | max-width: initial !important; } } 2119 | -------------------------------------------------------------------------------- /dist/full-main.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevLuke/handlingunusedcss/99a03321f2446abb9c0c292755cb3e4192bdf82e/dist/full-main.css.gz -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Handling Unused CSS with SASS 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |

Toggle Expander

18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

27 |

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

28 |

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

29 |

30 | 31 |

32 |
33 |
34 |
35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Handling Unused CSS with SASS 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |

Toggle Expander

18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

27 |

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

28 |

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

29 |

30 | 31 |

32 |
33 |
34 |
35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /dist/main-10x.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevLuke/handlingunusedcss/99a03321f2446abb9c0c292755cb3e4192bdf82e/dist/main-10x.css.gz -------------------------------------------------------------------------------- /dist/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Here we define spacing variants. These are used to generate spacing 3 | variants for many object and utility classes to give you an easy way of 4 | spacing out content. Typically, if a component requires more precise 5 | spacing, this CSS should be defined in the component CSS, not here. 6 | */ 7 | /* 8 | A function to convert any px value into its rem equivalent 9 | 10 | .myElement { 11 | padding: rem(16px); 12 | } 13 | */ 14 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 15 | /* Document 16 | ========================================================================== */ 17 | /** 18 | * 1. Correct the line height in all browsers. 19 | * 2. Prevent adjustments of font size after orientation changes in iOS. 20 | */ 21 | html { 22 | line-height: 1.15; 23 | /* 1 */ 24 | -webkit-text-size-adjust: 100%; 25 | /* 2 */ } 26 | 27 | /* Sections 28 | ========================================================================== */ 29 | /** 30 | * Remove the margin in all browsers. 31 | */ 32 | body { 33 | margin: 0; } 34 | 35 | /** 36 | * Render the `main` element consistently in IE. 37 | */ 38 | main { 39 | display: block; } 40 | 41 | /** 42 | * Correct the font size and margin on `h1` elements within `section` and 43 | * `article` contexts in Chrome, Firefox, and Safari. 44 | */ 45 | h1 { 46 | font-size: 2em; 47 | margin: 0.67em 0; } 48 | 49 | /* Grouping content 50 | ========================================================================== */ 51 | /** 52 | * 1. Add the correct box sizing in Firefox. 53 | * 2. Show the overflow in Edge and IE. 54 | */ 55 | hr { 56 | box-sizing: content-box; 57 | /* 1 */ 58 | height: 0; 59 | /* 1 */ 60 | overflow: visible; 61 | /* 2 */ } 62 | 63 | /** 64 | * 1. Correct the inheritance and scaling of font size in all browsers. 65 | * 2. Correct the odd `em` font sizing in all browsers. 66 | */ 67 | pre { 68 | font-family: monospace, monospace; 69 | /* 1 */ 70 | font-size: 1em; 71 | /* 2 */ } 72 | 73 | /* Text-level semantics 74 | ========================================================================== */ 75 | /** 76 | * Remove the gray background on active links in IE 10. 77 | */ 78 | a { 79 | background-color: transparent; } 80 | 81 | /** 82 | * 1. Remove the bottom border in Chrome 57- 83 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 84 | */ 85 | abbr[title] { 86 | border-bottom: none; 87 | /* 1 */ 88 | text-decoration: underline; 89 | /* 2 */ 90 | text-decoration: underline dotted; 91 | /* 2 */ } 92 | 93 | /** 94 | * Add the correct font weight in Chrome, Edge, and Safari. 95 | */ 96 | b, 97 | strong { 98 | font-weight: bolder; } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | code, 105 | kbd, 106 | samp { 107 | font-family: monospace, monospace; 108 | /* 1 */ 109 | font-size: 1em; 110 | /* 2 */ } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | small { 116 | font-size: 80%; } 117 | 118 | /** 119 | * Prevent `sub` and `sup` elements from affecting the line height in 120 | * all browsers. 121 | */ 122 | sub, 123 | sup { 124 | font-size: 75%; 125 | line-height: 0; 126 | position: relative; 127 | vertical-align: baseline; } 128 | 129 | sub { 130 | bottom: -0.25em; } 131 | 132 | sup { 133 | top: -0.5em; } 134 | 135 | /* Embedded content 136 | ========================================================================== */ 137 | /** 138 | * Remove the border on images inside links in IE 10. 139 | */ 140 | img { 141 | border-style: none; } 142 | 143 | /* Forms 144 | ========================================================================== */ 145 | /** 146 | * 1. Change the font styles in all browsers. 147 | * 2. Remove the margin in Firefox and Safari. 148 | */ 149 | button, 150 | input, 151 | optgroup, 152 | select, 153 | textarea { 154 | font-family: inherit; 155 | /* 1 */ 156 | font-size: 100%; 157 | /* 1 */ 158 | line-height: 1.15; 159 | /* 1 */ 160 | margin: 0; 161 | /* 2 */ } 162 | 163 | /** 164 | * Show the overflow in IE. 165 | * 1. Show the overflow in Edge. 166 | */ 167 | button, 168 | input { 169 | /* 1 */ 170 | overflow: visible; } 171 | 172 | /** 173 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 174 | * 1. Remove the inheritance of text transform in Firefox. 175 | */ 176 | button, 177 | select { 178 | /* 1 */ 179 | text-transform: none; } 180 | 181 | /** 182 | * Correct the inability to style clickable types in iOS and Safari. 183 | */ 184 | button, 185 | [type="button"], 186 | [type="reset"], 187 | [type="submit"] { 188 | -webkit-appearance: button; } 189 | 190 | /** 191 | * Remove the inner border and padding in Firefox. 192 | */ 193 | button::-moz-focus-inner, 194 | [type="button"]::-moz-focus-inner, 195 | [type="reset"]::-moz-focus-inner, 196 | [type="submit"]::-moz-focus-inner { 197 | border-style: none; 198 | padding: 0; } 199 | 200 | /** 201 | * Restore the focus styles unset by the previous rule. 202 | */ 203 | button:-moz-focusring, 204 | [type="button"]:-moz-focusring, 205 | [type="reset"]:-moz-focusring, 206 | [type="submit"]:-moz-focusring { 207 | outline: 1px dotted ButtonText; } 208 | 209 | /** 210 | * Correct the padding in Firefox. 211 | */ 212 | fieldset { 213 | padding: 0.35em 0.75em 0.625em; } 214 | 215 | /** 216 | * 1. Correct the text wrapping in Edge and IE. 217 | * 2. Correct the color inheritance from `fieldset` elements in IE. 218 | * 3. Remove the padding so developers are not caught out when they zero out 219 | * `fieldset` elements in all browsers. 220 | */ 221 | legend { 222 | box-sizing: border-box; 223 | /* 1 */ 224 | color: inherit; 225 | /* 2 */ 226 | display: table; 227 | /* 1 */ 228 | max-width: 100%; 229 | /* 1 */ 230 | padding: 0; 231 | /* 3 */ 232 | white-space: normal; 233 | /* 1 */ } 234 | 235 | /** 236 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 237 | */ 238 | progress { 239 | vertical-align: baseline; } 240 | 241 | /** 242 | * Remove the default vertical scrollbar in IE 10+. 243 | */ 244 | textarea { 245 | overflow: auto; } 246 | 247 | /** 248 | * 1. Add the correct box sizing in IE 10. 249 | * 2. Remove the padding in IE 10. 250 | */ 251 | [type="checkbox"], 252 | [type="radio"] { 253 | box-sizing: border-box; 254 | /* 1 */ 255 | padding: 0; 256 | /* 2 */ } 257 | 258 | /** 259 | * Correct the cursor style of increment and decrement buttons in Chrome. 260 | */ 261 | [type="number"]::-webkit-inner-spin-button, 262 | [type="number"]::-webkit-outer-spin-button { 263 | height: auto; } 264 | 265 | /** 266 | * 1. Correct the odd appearance in Chrome and Safari. 267 | * 2. Correct the outline style in Safari. 268 | */ 269 | [type="search"] { 270 | -webkit-appearance: textfield; 271 | /* 1 */ 272 | outline-offset: -2px; 273 | /* 2 */ } 274 | 275 | /** 276 | * Remove the inner padding in Chrome and Safari on macOS. 277 | */ 278 | [type="search"]::-webkit-search-decoration { 279 | -webkit-appearance: none; } 280 | 281 | /** 282 | * 1. Correct the inability to style clickable types in iOS and Safari. 283 | * 2. Change font properties to `inherit` in Safari. 284 | */ 285 | ::-webkit-file-upload-button { 286 | -webkit-appearance: button; 287 | /* 1 */ 288 | font: inherit; 289 | /* 2 */ } 290 | 291 | /* Interactive 292 | ========================================================================== */ 293 | /* 294 | * Add the correct display in Edge, IE 10+, and Firefox. 295 | */ 296 | details { 297 | display: block; } 298 | 299 | /* 300 | * Add the correct display in all browsers. 301 | */ 302 | summary { 303 | display: list-item; } 304 | 305 | /* Misc 306 | ========================================================================== */ 307 | /** 308 | * Add the correct display in IE 10+. 309 | */ 310 | template { 311 | display: none; } 312 | 313 | /** 314 | * Add the correct display in IE 10. 315 | */ 316 | [hidden] { 317 | display: none; } 318 | 319 | /* 320 | Set the global `box-sizing` state to `border-box`. 321 | 322 | css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 323 | paulirish.com/2012/box-sizing-border-box-ftw 324 | */ 325 | html { 326 | box-sizing: border-box; } 327 | 328 | *, *:before, *:after { 329 | box-sizing: inherit; } 330 | 331 | /* 332 | An additional reset that sits on top of Normalize.css. 333 | */ 334 | body, 335 | h1, h2, h3, h4, h5, h6, 336 | blockquote, p, pre, 337 | dl, dd, ol, ul, 338 | figure, 339 | hr, 340 | fieldset, legend { 341 | margin: 0; 342 | padding: 0; 343 | border: 0; } 344 | 345 | /* 346 | Remove trailing margins from nested lists. 347 | */ 348 | li > ol, 349 | li > ul { 350 | margin-bottom: 0; } 351 | 352 | /* 353 | Remove default table spacing. 354 | */ 355 | table { 356 | border-collapse: collapse; 357 | border-spacing: 0; } 358 | 359 | /* 360 | [1] Remove firefox blur on invalid elements 361 | */ 362 | input:invalid, 363 | select:invalid, 364 | textarea:invalid { 365 | box-shadow: none; 366 | /* [1] */ } 367 | 368 | /* 369 | Resets transparency on input placeholders 370 | */ 371 | ::-webkit-input-placeholder { 372 | opacity: 1; } 373 | 374 | ::-moz-placeholder { 375 | opacity: 1; } 376 | 377 | :-ms-input-placeholder { 378 | opacity: 1; } 379 | 380 | /* 381 | Disables Safari iOS default styles for disabled inputs 382 | */ 383 | input:disabled, 384 | textarea:disabled { 385 | opacity: 1; } 386 | 387 | /* 388 | Remove spinners/arrows for number input 389 | */ 390 | input[type='number'] { 391 | -moz-appearance: textfield; } 392 | 393 | input::-webkit-outer-spin-button, 394 | input::-webkit-inner-spin-button { 395 | -webkit-appearance: none; } 396 | 397 | /* 398 | Remove default italics from address element 399 | */ 400 | address { 401 | font-style: normal; } 402 | 403 | /* 404 | Make button into blank element 405 | */ 406 | button { 407 | background-color: transparent; 408 | border: 0; 409 | padding: 0; } 410 | 411 | /* 412 | Set a global tabindex rule, so when non-focusable elements are made 413 | focusable, the intent is to make them interactive, so we add a pointer 414 | cursor on hover. 415 | */ 416 | [tabindex] { 417 | cursor: pointer; } 418 | 419 | /* 420 | Set basic styles for HTML top level element. 421 | */ 422 | /* 423 | [1] The `font-size` is calculated to exist in ems so the users browser 424 | font-size is respected if changed. 425 | */ 426 | html { 427 | font-family: sans-serif; 428 | font-size: 1em; 429 | /* [1] */ 430 | line-height: 1.5; 431 | min-height: 100%; 432 | overflow-y: scroll; 433 | color: #000000; } 434 | 435 | /* 436 | Basic styles for typography elements 437 | */ 438 | /* 439 | Keep headers identical and apply styles via component classes avoiding the 440 | trap of semantically requiring a specific header and then having to override 441 | styles because cosmetics aren't appropriate. 442 | 443 | http://csswizardry.com/2016/02/managing-typography-on-large-apps/ 444 | */ 445 | h1, h2, h3, h4, h5, h6 { 446 | font-size: 1rem; } 447 | 448 | p { 449 | margin-bottom: 1.2em; } 450 | 451 | p:last-child { 452 | margin-bottom: 0; } 453 | 454 | /* 455 | Define consistent indentation lists. Also, add matching margin bottom so 456 | they can be mixed in with paragraphs. 457 | */ 458 | dd, ol, ul { 459 | margin: 0 0 1.2em 1.2em; } 460 | dd:last-child, ol:last-child, ul:last-child { 461 | margin-bottom: 0; } 462 | 463 | /* 464 | Boxes off content 465 | http://csswizardry.com/2011/10/the-island-object/ 466 | */ 467 | /* 468 | [1] So we can apply the `.o-box` class to naturally-inline elements. 469 | [2] If within a flex box, make sure it stretches full width by default. 470 | */ 471 | .o-box { 472 | display: block; 473 | /* [1] */ 474 | width: 100%; 475 | /* [2] */ } 476 | 477 | /* 478 | Generates variants in padding size using data from settings.spacing. 20% 479 | extra is added to the bottom of the box to better visually balance contents. 480 | */ 481 | .o-box--spacing-small { 482 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 483 | 484 | .o-box--spacing-regular { 485 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 486 | 487 | /* 488 | Add these to a box with spacing to filter which sides have spacing. 489 | */ 490 | /* 491 | Constrains the content within a max-width. Typically used with 492 | o-layout and width utilities to form a 12 column grid system. 493 | */ 494 | .o-container { 495 | margin-right: auto; 496 | margin-left: auto; 497 | max-width: 73.125rem; 498 | padding-left: 1.25rem; 499 | padding-right: 1.25rem; 500 | width: 100%; } 501 | 502 | /* 503 | The layout object is used to construct a grid-like layout system, with each 504 | layout__item representing an individual column. Typically used with 505 | container object and width utilities to form a grid system. 506 | */ 507 | /* 508 | [1] Allows us to use the layout object on any type of element. 509 | [2] Makes layout fill all available space. Useful for nesting layouts within 510 | layouts. 511 | [3] We need to defensively reset any box-model properties. 512 | [4] Absorb amount equal to half of the gutter on either side to account for 513 | their spacing. 514 | [5] Removes bullet points if layout is a list 515 | */ 516 | .o-layout { 517 | align-items: flex-start; 518 | display: flex; 519 | /* [1] */ 520 | flex-wrap: wrap; 521 | flex-grow: 1; 522 | /* [2] */ 523 | margin: 0; 524 | /* [3] */ 525 | padding: 0; 526 | /* [3] */ 527 | margin-left: -rem(20px)/2; 528 | /* [4] */ 529 | margin-right: -rem(20px)/2; 530 | /* [4] */ 531 | list-style: none; 532 | /* [5] */ } 533 | 534 | /* 535 | [1] Required in order to combine fluid widths with fixed gutters. 536 | */ 537 | .o-layout__item { 538 | box-sizing: border-box; 539 | /* [1] */ 540 | padding-left: 0.625rem; 541 | padding-right: 0.625rem; 542 | vertical-align: top; 543 | width: 100%; 544 | max-width: 100%; 545 | flex-basis: 0; 546 | flex-grow: 1; } 547 | 548 | /* 549 | Flush removes the gutter between layout items. 550 | */ 551 | /* 552 | [1] Remove negative margins as we no longer have to absorb any paddings 553 | from columns 554 | */ 555 | /* 556 | Allows each layout item to size itself automatically on a single row by 557 | dividing the space equally between the total number of items. 558 | */ 559 | .o-layout--fit { 560 | flex-wrap: nowrap; } 561 | 562 | /* 563 | Makes each column have an equal height. Also includes modifiers for 564 | individual columns. 565 | */ 566 | /* 567 | With a fit-height modifier active, any child element 568 | with 'o-layout__fill' will expand to fill all available 569 | space created by everything being equal height. 570 | */ 571 | /* 572 | Standard button component. 573 | */ 574 | /* 575 | Easily assign colours to the button component without having to 576 | find/replace variables. 577 | */ 578 | /* 579 | [1] Remove anchor text-decoration (necessary when styling `a`s as buttons). 580 | [2] Font size duplicate of c-text-lead. 581 | [3] Focus styles for when the user tabs onto the button shouldn't be just a 582 | colour change as people with colour blindness may not see it. 583 | */ 584 | .c-button { 585 | align-items: center; 586 | background-color: #ba4252; 587 | border-radius: 0.625rem; 588 | border: 0.125rem solid transparent; 589 | color: #ffffff; 590 | cursor: pointer; 591 | display: inline-flex; 592 | font-size: 1.125rem; 593 | /* [2] */ 594 | font-weight: bold; 595 | justify-content: center; 596 | line-height: 2; 597 | padding: 0 1.25rem; 598 | text-decoration: none; 599 | /* [1] */ 600 | position: relative; 601 | transition: background-color 0.25s, border-color 0.25s, color 0.25s; 602 | min-height: 3.125rem; 603 | min-width: 3.125rem; } 604 | .c-button:hover { 605 | background-color: #943541; } 606 | .c-button:hover, .c-button:active, .c-button:focus { 607 | text-decoration: none; 608 | /* [1] */ 609 | outline: none; } 610 | .c-button:focus { 611 | background-color: #943541; 612 | box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25), 0 0 0.9375rem 0.1875rem rgba(186, 66, 82, 0.5); } 613 | 614 | @media (min-width: 48em) { 615 | .c-button { 616 | font-size: 1.375rem; 617 | /* [2] */ } } 618 | 619 | /* 620 | Decorated wrapper around expander object. Use if you require a premade 621 | expander, rather than creating your own using the expander object as a base. 622 | */ 623 | /* 624 | Easily assign colours to the button component without having to 625 | find/replace variables. 626 | */ 627 | .c-expander__header { 628 | border: 0rem solid #c4c4c4; 629 | border-radius: 10px; 630 | transition: border-radius 0.15s, background-color 0.25s; 631 | position: relative; 632 | overflow: hidden; 633 | background-color: #f5f5f5; 634 | border-width: 0.0625rem; } 635 | 636 | .c-expander__header-icon { 637 | width: 1.25rem; 638 | height: 1.25rem; 639 | position: relative; } 640 | .c-expander__header-icon:before, .c-expander__header-icon:after { 641 | content: ''; 642 | display: block; 643 | width: 0.125rem; 644 | height: 1.25rem; 645 | background-color: currentColor; 646 | margin: 0 auto; 647 | transition: transform 0.25s; } 648 | .c-expander__header-icon:after { 649 | width: 1.25rem; 650 | height: 0.125rem; 651 | position: absolute; 652 | bottom: 0.5625rem; } 653 | 654 | .c-expander.is-active .c-expander__header { 655 | background-color: #f5f5f5; } 656 | 657 | .c-expander.is-active .c-expander__header-icon:before { 658 | transform: rotate(90deg); } 659 | 660 | .c-expander__content { 661 | display: none; 662 | border: 0rem solid #c4c4c4; 663 | border-top: 0; 664 | border-bottom-left-radius: 0.625rem; 665 | border-bottom-right-radius: 0.625rem; } 666 | 667 | .c-expander.is-active .c-expander__content { 668 | display: block; } 669 | 670 | /* 671 | In order to separate our semantic decisions from our stylistic ones, we only 672 | define opinionated typographical styles against classes, NOT against 673 | typographic HTML elements. 674 | 675 | Example: Will prevent a case where we need to use a H3 because of how it 676 | looks, rather than because its the correct place to use it in the document. 677 | 678 | https://csswizardry.com/2016/02/managing-typography-on-large-apps/ 679 | 680 | Naming convention taken from the NATO phonetic alphabet: 681 | https://en.wikipedia.org/wiki/NATO_phonetic_alphabet 682 | */ 683 | /* 684 | Easily assign colours to the component without having to 685 | find/replace variables. 686 | */ 687 | .c-type-echo { 688 | font-size: 1.25rem; } 689 | 690 | @media (min-width: 48em) { 691 | .c-type-echo { 692 | font-size: 1.5rem; } } 693 | 694 | .u-align-center { 695 | text-align: center !important; } 696 | 697 | [class*='u-flex-'] { 698 | display: flex !important; } 699 | 700 | .u-flex-middle, 701 | .u-flex-center-all { 702 | align-items: center !important; } 703 | 704 | .u-width-grow { 705 | width: auto !important; 706 | flex-basis: auto !important; 707 | margin-left: 0 !important; 708 | /* [1] */ 709 | flex-grow: 1 !important; 710 | max-width: initial !important; } 711 | 712 | .u-width-shrink { 713 | width: auto !important; 714 | flex-basis: auto !important; 715 | margin-left: 0 !important; 716 | /* [1] */ 717 | flex-grow: 0 !important; 718 | max-width: initial !important; } 719 | -------------------------------------------------------------------------------- /dist/main.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevLuke/handlingunusedcss/99a03321f2446abb9c0c292755cb3e4192bdf82e/dist/main.css.gz -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // COMPONENT LOGIC 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | // Logic to get the components functioning on a basic level. Nothing too elaborate. 6 | 7 | const expanders = document.querySelectorAll('.c-expander'); 8 | for(let i = 0; i < expanders.length; i++) { 9 | const triggers = expanders[i].querySelectorAll('.c-expander__trigger'); 10 | for(let t = 0; t < triggers.length; t++) { 11 | triggers[t].addEventListener('click', () => { 12 | expanders[i].classList.toggle('is-active'); 13 | }) 14 | triggers[t].addEventListener('keypress', (e) => { 15 | if(e.which === 13) { 16 | expanders[i].classList.toggle('is-active'); 17 | } 18 | }); 19 | } 20 | } 21 | 22 | -------------------------------------------------------------------------------- /dist/uncss-main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Here we define spacing variants. These are used to generate spacing 3 | variants for many object and utility classes to give you an easy way of 4 | spacing out content. Typically, if a component requires more precise 5 | spacing, this CSS should be defined in the component CSS, not here. 6 | */ 7 | /* 8 | A function to convert any px value into its rem equivalent 9 | 10 | .myElement { 11 | padding: rem(16px); 12 | } 13 | */ 14 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 15 | /* Document 16 | ========================================================================== */ 17 | /** 18 | * 1. Correct the line height in all browsers. 19 | * 2. Prevent adjustments of font size after orientation changes in iOS. 20 | */ 21 | html { 22 | line-height: 1.15; 23 | /* 1 */ 24 | -webkit-text-size-adjust: 100%; 25 | /* 2 */ } 26 | 27 | /* Sections 28 | ========================================================================== */ 29 | /** 30 | * Remove the margin in all browsers. 31 | */ 32 | body { 33 | margin: 0; } 34 | 35 | /** 36 | * Render the `main` element consistently in IE. 37 | */ 38 | 39 | /** 40 | * Correct the font size and margin on `h1` elements within `section` and 41 | * `article` contexts in Chrome, Firefox, and Safari. 42 | */ 43 | 44 | /* Grouping content 45 | ========================================================================== */ 46 | /** 47 | * 1. Add the correct box sizing in Firefox. 48 | * 2. Show the overflow in Edge and IE. 49 | */ 50 | 51 | /** 52 | * 1. Correct the inheritance and scaling of font size in all browsers. 53 | * 2. Correct the odd `em` font sizing in all browsers. 54 | */ 55 | 56 | /* Text-level semantics 57 | ========================================================================== */ 58 | /** 59 | * Remove the gray background on active links in IE 10. 60 | */ 61 | 62 | /** 63 | * 1. Remove the bottom border in Chrome 57- 64 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 65 | */ 66 | 67 | /** 68 | * Add the correct font weight in Chrome, Edge, and Safari. 69 | */ 70 | 71 | /** 72 | * 1. Correct the inheritance and scaling of font size in all browsers. 73 | * 2. Correct the odd `em` font sizing in all browsers. 74 | */ 75 | 76 | /** 77 | * Add the correct font size in all browsers. 78 | */ 79 | 80 | /** 81 | * Prevent `sub` and `sup` elements from affecting the line height in 82 | * all browsers. 83 | */ 84 | 85 | /* Embedded content 86 | ========================================================================== */ 87 | /** 88 | * Remove the border on images inside links in IE 10. 89 | */ 90 | 91 | /* Forms 92 | ========================================================================== */ 93 | /** 94 | * 1. Change the font styles in all browsers. 95 | * 2. Remove the margin in Firefox and Safari. 96 | */ 97 | button { 98 | font-family: inherit; 99 | /* 1 */ 100 | font-size: 100%; 101 | /* 1 */ 102 | line-height: 1.15; 103 | /* 1 */ 104 | margin: 0; 105 | /* 2 */ } 106 | 107 | /** 108 | * Show the overflow in IE. 109 | * 1. Show the overflow in Edge. 110 | */ 111 | button { 112 | /* 1 */ 113 | overflow: visible; } 114 | 115 | /** 116 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 117 | * 1. Remove the inheritance of text transform in Firefox. 118 | */ 119 | button { 120 | /* 1 */ 121 | text-transform: none; } 122 | 123 | /** 124 | * Correct the inability to style clickable types in iOS and Safari. 125 | */ 126 | button { 127 | -webkit-appearance: button; } 128 | 129 | /** 130 | * Remove the inner border and padding in Firefox. 131 | */ 132 | button::-moz-focus-inner { 133 | border-style: none; 134 | padding: 0; } 135 | 136 | /** 137 | * Restore the focus styles unset by the previous rule. 138 | */ 139 | button:-moz-focusring { 140 | outline: 1px dotted ButtonText; } 141 | 142 | /** 143 | * Correct the padding in Firefox. 144 | */ 145 | 146 | /** 147 | * 1. Correct the text wrapping in Edge and IE. 148 | * 2. Correct the color inheritance from `fieldset` elements in IE. 149 | * 3. Remove the padding so developers are not caught out when they zero out 150 | * `fieldset` elements in all browsers. 151 | */ 152 | 153 | /** 154 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 155 | */ 156 | 157 | /** 158 | * Remove the default vertical scrollbar in IE 10+. 159 | */ 160 | 161 | /** 162 | * 1. Add the correct box sizing in IE 10. 163 | * 2. Remove the padding in IE 10. 164 | */ 165 | 166 | /** 167 | * Correct the cursor style of increment and decrement buttons in Chrome. 168 | */ 169 | 170 | /** 171 | * 1. Correct the odd appearance in Chrome and Safari. 172 | * 2. Correct the outline style in Safari. 173 | */ 174 | 175 | /** 176 | * Remove the inner padding in Chrome and Safari on macOS. 177 | */ 178 | 179 | /** 180 | * 1. Correct the inability to style clickable types in iOS and Safari. 181 | * 2. Change font properties to `inherit` in Safari. 182 | */ 183 | ::-webkit-file-upload-button { 184 | -webkit-appearance: button; 185 | /* 1 */ 186 | font: inherit; 187 | /* 2 */ } 188 | 189 | /* Interactive 190 | ========================================================================== */ 191 | /* 192 | * Add the correct display in Edge, IE 10+, and Firefox. 193 | */ 194 | 195 | /* 196 | * Add the correct display in all browsers. 197 | */ 198 | 199 | /* Misc 200 | ========================================================================== */ 201 | /** 202 | * Add the correct display in IE 10+. 203 | */ 204 | 205 | /** 206 | * Add the correct display in IE 10. 207 | */ 208 | 209 | /* 210 | Set the global `box-sizing` state to `border-box`. 211 | 212 | css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 213 | paulirish.com/2012/box-sizing-border-box-ftw 214 | */ 215 | html { 216 | box-sizing: border-box; } 217 | 218 | *, *:before, *:after { 219 | box-sizing: inherit; } 220 | 221 | /* 222 | An additional reset that sits on top of Normalize.css. 223 | */ 224 | body, 225 | h2, 226 | p { 227 | margin: 0; 228 | padding: 0; 229 | border: 0; } 230 | 231 | /* 232 | Remove trailing margins from nested lists. 233 | */ 234 | 235 | /* 236 | Remove default table spacing. 237 | */ 238 | 239 | /* 240 | [1] Remove firefox blur on invalid elements 241 | */ 242 | 243 | /* 244 | Resets transparency on input placeholders 245 | */ 246 | ::-webkit-input-placeholder { 247 | opacity: 1; } 248 | 249 | ::-moz-placeholder { 250 | opacity: 1; } 251 | 252 | :-ms-input-placeholder { 253 | opacity: 1; } 254 | 255 | /* 256 | Disables Safari iOS default styles for disabled inputs 257 | */ 258 | 259 | /* 260 | Remove spinners/arrows for number input 261 | */ 262 | 263 | /* 264 | Remove default italics from address element 265 | */ 266 | 267 | /* 268 | Make button into blank element 269 | */ 270 | button { 271 | background-color: transparent; 272 | border: 0; 273 | padding: 0; } 274 | 275 | /* 276 | Set a global tabindex rule, so when non-focusable elements are made 277 | focusable, the intent is to make them interactive, so we add a pointer 278 | cursor on hover. 279 | */ 280 | [tabindex] { 281 | cursor: pointer; } 282 | 283 | /* 284 | Set basic styles for HTML top level element. 285 | */ 286 | /* 287 | [1] The `font-size` is calculated to exist in ems so the users browser 288 | font-size is respected if changed. 289 | */ 290 | html { 291 | font-family: sans-serif; 292 | font-size: 1em; 293 | /* [1] */ 294 | line-height: 1.5; 295 | min-height: 100%; 296 | overflow-y: scroll; 297 | color: #000000; } 298 | 299 | /* 300 | Basic styles for typography elements 301 | */ 302 | /* 303 | Keep headers identical and apply styles via component classes avoiding the 304 | trap of semantically requiring a specific header and then having to override 305 | styles because cosmetics aren't appropriate. 306 | 307 | http://csswizardry.com/2016/02/managing-typography-on-large-apps/ 308 | */ 309 | h2 { 310 | font-size: 1rem; } 311 | 312 | p { 313 | margin-bottom: 1.2em; } 314 | 315 | p:last-child { 316 | margin-bottom: 0; } 317 | 318 | /* 319 | Define consistent indentation lists. Also, add matching margin bottom so 320 | they can be mixed in with paragraphs. 321 | */ 322 | 323 | /* 324 | Boxes off content 325 | http://csswizardry.com/2011/10/the-island-object/ 326 | */ 327 | /* 328 | [1] So we can apply the `.o-box` class to naturally-inline elements. 329 | [2] If within a flex box, make sure it stretches full width by default. 330 | */ 331 | .o-box { 332 | display: block; 333 | /* [1] */ 334 | width: 100%; 335 | /* [2] */ } 336 | 337 | /* 338 | Generates variants in padding size using data from settings.spacing. 20% 339 | extra is added to the bottom of the box to better visually balance contents. 340 | */ 341 | 342 | .o-box--spacing-small { 343 | padding: 0.9375rem 0.9375rem 1.125rem 0.9375rem; } 344 | 345 | .o-box--spacing-regular { 346 | padding: 1.875rem 1.875rem 2.25rem 1.875rem; } 347 | 348 | /* 349 | Add these to a box with spacing to filter which sides have spacing. 350 | */ 351 | 352 | /* 353 | Constrains the content within a max-width. Typically used with 354 | o-layout and width utilities to form a 12 column grid system. 355 | */ 356 | .o-container { 357 | margin-right: auto; 358 | margin-left: auto; 359 | max-width: 73.125rem; 360 | padding-left: 1.25rem; 361 | padding-right: 1.25rem; 362 | width: 100%; } 363 | 364 | /* 365 | The layout object is used to construct a grid-like layout system, with each 366 | layout__item representing an individual column. Typically used with 367 | container object and width utilities to form a grid system. 368 | */ 369 | /* 370 | [1] Allows us to use the layout object on any type of element. 371 | [2] Makes layout fill all available space. Useful for nesting layouts within 372 | layouts. 373 | [3] We need to defensively reset any box-model properties. 374 | [4] Absorb amount equal to half of the gutter on either side to account for 375 | their spacing. 376 | [5] Removes bullet points if layout is a list 377 | */ 378 | .o-layout { 379 | align-items: flex-start; 380 | display: flex; 381 | /* [1] */ 382 | flex-wrap: wrap; 383 | flex-grow: 1; 384 | /* [2] */ 385 | margin: 0; 386 | /* [3] */ 387 | padding: 0; 388 | /* [3] */ 389 | margin-left: -rem(20px)/2; 390 | /* [4] */ 391 | margin-right: -rem(20px)/2; 392 | /* [4] */ 393 | list-style: none; 394 | /* [5] */ } 395 | 396 | /* 397 | [1] Required in order to combine fluid widths with fixed gutters. 398 | */ 399 | .o-layout__item { 400 | box-sizing: border-box; 401 | /* [1] */ 402 | padding-left: 0.625rem; 403 | padding-right: 0.625rem; 404 | vertical-align: top; 405 | width: 100%; 406 | max-width: 100%; 407 | flex-basis: 0; 408 | flex-grow: 1; } 409 | 410 | /* 411 | Flush removes the gutter between layout items. 412 | */ 413 | /* 414 | [1] Remove negative margins as we no longer have to absorb any paddings 415 | from columns 416 | */ 417 | 418 | /* 419 | Allows each layout item to size itself automatically on a single row by 420 | dividing the space equally between the total number of items. 421 | */ 422 | .o-layout--fit { 423 | flex-wrap: nowrap; } 424 | 425 | /* 426 | Makes each column have an equal height. Also includes modifiers for 427 | individual columns. 428 | */ 429 | 430 | /* 431 | With a fit-height modifier active, any child element 432 | with 'o-layout__fill' will expand to fill all available 433 | space created by everything being equal height. 434 | */ 435 | 436 | /* 437 | Standard button component. 438 | */ 439 | /* 440 | Easily assign colours to the button component without having to 441 | find/replace variables. 442 | */ 443 | /* 444 | [1] Remove anchor text-decoration (necessary when styling `a`s as buttons). 445 | [2] Font size duplicate of c-text-lead. 446 | [3] Focus styles for when the user tabs onto the button shouldn't be just a 447 | colour change as people with colour blindness may not see it. 448 | */ 449 | .c-button { 450 | align-items: center; 451 | background-color: #ba4252; 452 | border-radius: 0.625rem; 453 | border: 0.125rem solid transparent; 454 | color: #ffffff; 455 | cursor: pointer; 456 | display: inline-flex; 457 | font-size: 1.125rem; 458 | /* [2] */ 459 | font-weight: bold; 460 | justify-content: center; 461 | line-height: 2; 462 | padding: 0 1.25rem; 463 | text-decoration: none; 464 | /* [1] */ 465 | position: relative; 466 | transition: background-color 0.25s, border-color 0.25s, color 0.25s; 467 | min-height: 3.125rem; 468 | min-width: 3.125rem; } 469 | .c-button:hover { 470 | background-color: #943541; } 471 | .c-button:hover, .c-button:active, .c-button:focus { 472 | text-decoration: none; 473 | /* [1] */ 474 | outline: none; } 475 | .c-button:focus { 476 | background-color: #943541; 477 | box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25), 0 0 0.9375rem 0.1875rem rgba(186, 66, 82, 0.5); } 478 | 479 | @media (min-width: 48em) { 480 | .c-button { 481 | font-size: 1.375rem; 482 | /* [2] */ } } 483 | 484 | /* 485 | Decorated wrapper around expander object. Use if you require a premade 486 | expander, rather than creating your own using the expander object as a base. 487 | */ 488 | /* 489 | Easily assign colours to the button component without having to 490 | find/replace variables. 491 | */ 492 | .c-expander__header { 493 | border: 0rem solid #c4c4c4; 494 | border-radius: 10px; 495 | transition: border-radius 0.15s, background-color 0.25s; 496 | position: relative; 497 | overflow: hidden; 498 | background-color: #f5f5f5; 499 | border-width: 0.0625rem; } 500 | 501 | .c-expander__header-icon { 502 | width: 1.25rem; 503 | height: 1.25rem; 504 | position: relative; } 505 | .c-expander__header-icon:before, .c-expander__header-icon:after { 506 | content: ''; 507 | display: block; 508 | width: 0.125rem; 509 | height: 1.25rem; 510 | background-color: currentColor; 511 | margin: 0 auto; 512 | transition: transform 0.25s; } 513 | .c-expander__header-icon:after { 514 | width: 1.25rem; 515 | height: 0.125rem; 516 | position: absolute; 517 | bottom: 0.5625rem; } 518 | 519 | .c-expander.is-active .c-expander__header { 520 | background-color: #f5f5f5; } 521 | 522 | .c-expander.is-active .c-expander__header-icon:before { 523 | transform: rotate(90deg); } 524 | 525 | .c-expander__content { 526 | display: none; 527 | border: 0rem solid #c4c4c4; 528 | border-top: 0; 529 | border-bottom-left-radius: 0.625rem; 530 | border-bottom-right-radius: 0.625rem; } 531 | 532 | .c-expander.is-active .c-expander__content { 533 | display: block; } 534 | 535 | /* 536 | In order to separate our semantic decisions from our stylistic ones, we only 537 | define opinionated typographical styles against classes, NOT against 538 | typographic HTML elements. 539 | 540 | Example: Will prevent a case where we need to use a H3 because of how it 541 | looks, rather than because its the correct place to use it in the document. 542 | 543 | https://csswizardry.com/2016/02/managing-typography-on-large-apps/ 544 | 545 | Naming convention taken from the NATO phonetic alphabet: 546 | https://en.wikipedia.org/wiki/NATO_phonetic_alphabet 547 | */ 548 | /* 549 | Easily assign colours to the component without having to 550 | find/replace variables. 551 | */ 552 | 553 | .c-type-echo { 554 | font-size: 1.25rem; } 555 | 556 | @media (min-width: 48em) { 557 | .c-type-echo { 558 | font-size: 1.5rem; } } 559 | 560 | .u-align-center { 561 | text-align: center !important; } 562 | 563 | [class*='u-flex-'] { 564 | display: flex !important; } 565 | 566 | .u-flex-middle { 567 | align-items: center !important; } 568 | 569 | .u-width-grow { 570 | width: auto !important; 571 | flex-basis: auto !important; 572 | margin-left: 0 !important; 573 | /* [1] */ 574 | flex-grow: 1 !important; 575 | max-width: initial !important; } 576 | 577 | .u-width-shrink { 578 | width: auto !important; 579 | flex-basis: auto !important; 580 | margin-left: 0 !important; 581 | /* [1] */ 582 | flex-grow: 0 !important; 583 | max-width: initial !important; } 584 | -------------------------------------------------------------------------------- /dist/uncss-main.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevLuke/handlingunusedcss/99a03321f2446abb9c0c292755cb3e4192bdf82e/dist/uncss-main.css.gz -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "handlingunusedcsswithsassboilerplate", 3 | "version": "1.0.0", 4 | "description": "A boilerplate to follow along 'Handling unused CSS in SASS to improve performance' article", 5 | "scripts": { 6 | "clean": "rimraf dist/static/*.css", 7 | "watch": "onchange \"src/assets/scss/*.scss\" \"src/assets/scss/*/**.scss\" -- npm run build", 8 | "build": "npm run clean && node build/css.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/WebDevLuke/HandlingUnusedCSSWithSASSBoilerplate.git" 13 | }, 14 | "author": "Luke Harrison", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "dom-slider": "^1.5.3", 18 | "glob": "7.1.3", 19 | "node-sass": "4.11.0", 20 | "normalize.css": "8.0.1", 21 | "onchange": "5.2.0", 22 | "rimraf": "2.6.3", 23 | "sass-mq": "^5.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // BUTTON 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Standard button component. 7 | */ 8 | 9 | @include render('button') { 10 | 11 | // COMPONENT COLOURS 12 | //------------------------------------------------------------------------------------------------ 13 | 14 | /* 15 | Easily assign colours to the button component without having to 16 | find/replace variables. 17 | */ 18 | 19 | $component-button-color: #ba4252 !default; 20 | $component-button-hover-color: darken($component-button-color, 10%) !default; 21 | $component-button-border-color: #ffffff !default; 22 | 23 | 24 | // BLOCK & ELEMENTS 25 | //------------------------------------------------------------------------------------------------ 26 | 27 | /* 28 | [1] Remove anchor text-decoration (necessary when styling `a`s as buttons). 29 | [2] Font size duplicate of c-text-lead. 30 | [3] Focus styles for when the user tabs onto the button shouldn't be just a 31 | colour change as people with colour blindness may not see it. 32 | */ 33 | 34 | .c-button { 35 | align-items: center; 36 | background-color: $component-button-color; 37 | border-radius: rem(10px); 38 | border: rem(2px) solid transparent; 39 | color: #ffffff; 40 | cursor: pointer; 41 | display: inline-flex; 42 | font-size: rem(18px); /* [2] */ 43 | font-weight: bold; 44 | justify-content: center; 45 | line-height: 2; 46 | padding: 0 rem(20px); 47 | text-decoration: none; /* [1] */ 48 | position: relative; 49 | transition: background-color 0.25s, border-color 0.25s, color 0.25s; 50 | min-height: rem(50px); 51 | min-width: rem(50px); 52 | 53 | &:hover { 54 | background-color: $component-button-hover-color; 55 | } 56 | 57 | &:hover, 58 | &:active, 59 | &:focus { 60 | text-decoration: none; /* [1] */ 61 | outline: none; 62 | } 63 | 64 | &:focus { 65 | background-color: $component-button-hover-color; 66 | box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba($component-button-color, 0.5) /* [3] */ 67 | } 68 | } 69 | 70 | @include mq(md) { 71 | .c-button { 72 | font-size: rem(22px); /* [2] */ 73 | } 74 | } 75 | 76 | // End render 77 | } -------------------------------------------------------------------------------- /src/scss/components/_core.scss: -------------------------------------------------------------------------------- 1 | $layer: 'component'; 2 | 3 | @import 'button'; 4 | @import 'expander'; 5 | @import 'typography'; -------------------------------------------------------------------------------- /src/scss/components/_expander.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // EXPANDER 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Decorated wrapper around expander object. Use if you require a premade 7 | expander, rather than creating your own using the expander object as a base. 8 | */ 9 | 10 | @include render('expander') { 11 | 12 | // COMPONENT COLOURS 13 | //------------------------------------------------------------------------------------------------ 14 | 15 | /* 16 | Easily assign colours to the button component without having to 17 | find/replace variables. 18 | */ 19 | 20 | $component-expander-header-background-color: #f5f5f5 !default; 21 | $component-expander-accent-color: #ba4252 !default; 22 | $component-expander-border-color: #c4c4c4 !default; 23 | 24 | 25 | // BLOCK & ELEMENTS 26 | //------------------------------------------------------------------------------------------------ 27 | 28 | .c-expander__header { 29 | border: rem(0px) solid $component-expander-border-color; 30 | border-radius: 10px; 31 | transition: border-radius 0.15s, background-color 0.25s; 32 | position: relative; 33 | overflow: hidden; 34 | background-color: $component-expander-header-background-color; 35 | border-width: rem(1px); 36 | } 37 | 38 | .c-expander__header-icon { 39 | width: rem(20px); 40 | height: rem(20px); 41 | position: relative; 42 | &:before, 43 | &:after { 44 | content: ''; 45 | display: block; 46 | width: rem(2px); 47 | height: rem(20px); 48 | background-color: currentColor; 49 | margin: 0 auto; 50 | transition: transform 0.25s; 51 | } 52 | &:after { 53 | width: rem(20px); 54 | height: rem(2px); 55 | position: absolute; 56 | bottom: rem(9px); 57 | } 58 | } 59 | 60 | .c-expander.is-active { 61 | .c-expander__header { 62 | background-color: $component-expander-header-background-color; 63 | } 64 | 65 | .c-expander__header-icon:before { 66 | transform: rotate(90deg); 67 | } 68 | } 69 | 70 | .c-expander__content { 71 | display: none; 72 | border: rem(0px) solid $component-expander-border-color; 73 | border-top: 0; 74 | border-bottom-left-radius: rem(10px); 75 | border-bottom-right-radius: rem(10px); 76 | } 77 | 78 | .c-expander.is-active { 79 | .c-expander__content { 80 | display: block; 81 | } 82 | } 83 | 84 | 85 | // BORDER MODIFIER 86 | //------------------------------------------------------------------------------------------------ 87 | 88 | @include filter('c-expander--content-border') { 89 | .c-expander--content-border { 90 | .c-expander__content { 91 | border-width: rem(1px); 92 | } 93 | &.is-active, 94 | &.is-animating { 95 | .c-expander__header { 96 | border-bottom-right-radius: 0; 97 | border-bottom-left-radius: 0; 98 | } 99 | } 100 | } 101 | } 102 | 103 | // End render 104 | } -------------------------------------------------------------------------------- /src/scss/components/_typography.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // TYPOGRAPHY 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | In order to separate our semantic decisions from our stylistic ones, we only 7 | define opinionated typographical styles against classes, NOT against 8 | typographic HTML elements. 9 | 10 | Example: Will prevent a case where we need to use a H3 because of how it 11 | looks, rather than because its the correct place to use it in the document. 12 | 13 | https://csswizardry.com/2016/02/managing-typography-on-large-apps/ 14 | 15 | Naming convention taken from the NATO phonetic alphabet: 16 | https://en.wikipedia.org/wiki/NATO_phonetic_alphabet 17 | */ 18 | 19 | @include render('typography') { 20 | 21 | 22 | // COMPONENT COLOURS 23 | //------------------------------------------------------------------------------------------------ 24 | 25 | /* 26 | Easily assign colours to the component without having to 27 | find/replace variables. 28 | */ 29 | 30 | $component-typography-link-color: #ba4252 !default; 31 | $component-typography-smallprint-color: #999999 !default; 32 | $component-typography-focus-color: #5aa1ce !default; 33 | 34 | 35 | // BLOCK & ELEMENTS 36 | //------------------------------------------------------------------------------------------------ 37 | 38 | @include filter('c-type-alpha') { 39 | .c-type-alpha { 40 | font-size: rem(36px); 41 | } 42 | } 43 | 44 | @include filter('c-type-bravo') { 45 | .c-type-bravo { 46 | font-size: rem(29px); 47 | } 48 | } 49 | 50 | 51 | @include filter('c-type-charlie') { 52 | .c-type-charlie { 53 | font-size: rem(25px); 54 | } 55 | } 56 | 57 | @include filter('c-type-delta') { 58 | .c-type-delta { 59 | font-size: rem(22px); 60 | } 61 | } 62 | 63 | 64 | @include filter('c-type-echo') { 65 | .c-type-echo { 66 | font-size: rem(20px); 67 | } 68 | } 69 | 70 | @include filter('c-type-foxtrot') { 71 | .c-type-foxtrot { 72 | font-size: rem(18px); 73 | } 74 | } 75 | 76 | @include mq(md) { 77 | @include filter('c-type-alpha') { 78 | .c-type-alpha { 79 | font-size: rem(50px); 80 | } 81 | } 82 | 83 | @include filter('c-type-bravo') { 84 | .c-type-bravo { 85 | font-size: rem(40px); 86 | } 87 | } 88 | 89 | @include filter('c-type-charlie') { 90 | .c-type-charlie { 91 | font-size: rem(34px); 92 | } 93 | } 94 | 95 | @include filter('c-type-delta') { 96 | .c-type-delta { 97 | font-size: rem(28px); 98 | } 99 | } 100 | 101 | @include filter('c-type-echo') { 102 | .c-type-echo { 103 | font-size: rem(24px); 104 | } 105 | } 106 | 107 | @include filter('c-type-foxtrot') { 108 | .c-type-foxtrot { 109 | font-size: rem(22px); 110 | } 111 | } 112 | } 113 | 114 | // End render 115 | } -------------------------------------------------------------------------------- /src/scss/elements/_core.scss: -------------------------------------------------------------------------------- 1 | @import 'page'; 2 | @import 'typography'; -------------------------------------------------------------------------------- /src/scss/elements/_page.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // HTML STYLES 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Set basic styles for HTML top level element. 7 | */ 8 | 9 | /* 10 | [1] The `font-size` is calculated to exist in ems so the users browser 11 | font-size is respected if changed. 12 | */ 13 | 14 | html { 15 | font-family: sans-serif; 16 | font-size: (16px / 16px) * 1em; /* [1] */ 17 | line-height: 1.5; 18 | min-height: 100%; 19 | overflow-y: scroll; 20 | color: #000000; 21 | } -------------------------------------------------------------------------------- /src/scss/elements/_typography.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // TYPOGRAPHY 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Basic styles for typography elements 7 | */ 8 | 9 | 10 | // HEADINGS 11 | //------------------------------------------------------------------------------------------------ 12 | 13 | /* 14 | Keep headers identical and apply styles via component classes avoiding the 15 | trap of semantically requiring a specific header and then having to override 16 | styles because cosmetics aren't appropriate. 17 | 18 | http://csswizardry.com/2016/02/managing-typography-on-large-apps/ 19 | */ 20 | 21 | h1, h2, h3, h4, h5, h6 { 22 | font-size: 1rem; 23 | } 24 | 25 | 26 | // BODY 27 | //------------------------------------------------------------------------------------------------ 28 | 29 | p { 30 | margin-bottom: 1.2em; 31 | } 32 | 33 | p:last-child { 34 | margin-bottom: 0; 35 | } 36 | 37 | 38 | /* 39 | Define consistent indentation lists. Also, add matching margin bottom so 40 | they can be mixed in with paragraphs. 41 | */ 42 | 43 | dd, ol, ul { 44 | margin: 0 0 1.2em 1.2em; 45 | &:last-child { 46 | margin-bottom: 0; 47 | } 48 | } -------------------------------------------------------------------------------- /src/scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // BOX SIZING 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Set the global `box-sizing` state to `border-box`. 7 | 8 | css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 9 | paulirish.com/2012/box-sizing-border-box-ftw 10 | */ 11 | 12 | html { 13 | box-sizing: border-box; 14 | } 15 | 16 | *, *:before, *:after { 17 | box-sizing: inherit; 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/generic/_core.scss: -------------------------------------------------------------------------------- 1 | @import 'node_modules/normalize.css/normalize'; 2 | @import 'box-sizing'; 3 | @import 'reset'; 4 | @import 'tabindex'; -------------------------------------------------------------------------------- /src/scss/generic/_reset.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // RESET 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | An additional reset that sits on top of Normalize.css. 7 | */ 8 | 9 | body, 10 | h1, h2, h3, h4, h5, h6, 11 | blockquote, p, pre, 12 | dl, dd, ol, ul, 13 | figure, 14 | hr, 15 | fieldset, legend { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | } 20 | 21 | 22 | /* 23 | Remove trailing margins from nested lists. 24 | */ 25 | 26 | li > { 27 | ol, 28 | ul { 29 | margin-bottom: 0; 30 | } 31 | } 32 | 33 | 34 | /* 35 | Remove default table spacing. 36 | */ 37 | 38 | table { 39 | border-collapse: collapse; 40 | border-spacing: 0; 41 | } 42 | 43 | /* 44 | [1] Remove firefox blur on invalid elements 45 | */ 46 | 47 | input:invalid, 48 | select:invalid, 49 | textarea:invalid { 50 | box-shadow: none; /* [1] */ 51 | } 52 | 53 | /* 54 | Resets transparency on input placeholders 55 | */ 56 | 57 | ::-webkit-input-placeholder { 58 | opacity: 1; 59 | } 60 | 61 | ::-moz-placeholder { 62 | opacity: 1; 63 | } 64 | 65 | :-ms-input-placeholder { 66 | opacity: 1; 67 | } 68 | 69 | /* 70 | Disables Safari iOS default styles for disabled inputs 71 | */ 72 | input:disabled, 73 | textarea:disabled { 74 | opacity: 1; 75 | } 76 | 77 | /* 78 | Remove spinners/arrows for number input 79 | */ 80 | 81 | input[type='number'] { 82 | -moz-appearance: textfield; 83 | } 84 | 85 | input::-webkit-outer-spin-button, 86 | input::-webkit-inner-spin-button { 87 | -webkit-appearance: none; 88 | } 89 | 90 | /* 91 | Remove default italics from address element 92 | */ 93 | 94 | address { 95 | font-style: normal; 96 | } 97 | 98 | /* 99 | Make button into blank element 100 | */ 101 | button { 102 | background-color: transparent; 103 | border: 0; 104 | padding: 0; 105 | } -------------------------------------------------------------------------------- /src/scss/generic/_tabindex.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // TABINDEX 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Set a global tabindex rule, so when non-focusable elements are made 7 | focusable, the intent is to make them interactive, so we add a pointer 8 | cursor on hover. 9 | */ 10 | 11 | [tabindex] { 12 | cursor: pointer; 13 | } -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // IMPORT PARTIALS 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | $enable-all-classes: false; 6 | 7 | @import 'settings/core'; 8 | @import 'tools/core'; 9 | @import 'generic/core'; 10 | @import 'elements/core'; 11 | @import 'objects/core'; 12 | @import 'components/core'; 13 | @import 'utilities/core'; -------------------------------------------------------------------------------- /src/scss/objects/_box.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // BOX OBJECT 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Boxes off content 7 | http://csswizardry.com/2011/10/the-island-object/ 8 | */ 9 | 10 | @include render('box') { 11 | 12 | // BLOCK & ELEMENTS 13 | //------------------------------------------------------------------------------------------------ 14 | 15 | /* 16 | [1] So we can apply the `.o-box` class to naturally-inline elements. 17 | [2] If within a flex box, make sure it stretches full width by default. 18 | */ 19 | 20 | .o-box { 21 | display: block; /* [1] */ 22 | width: 100%; /* [2] */ 23 | } 24 | 25 | 26 | // SPACING MODIFIERS 27 | //------------------------------------------------------------------------------------------------ 28 | 29 | /* 30 | Generates variants in padding size using data from settings.spacing. 20% 31 | extra is added to the bottom of the box to better visually balance contents. 32 | */ 33 | 34 | // Generate using settings.spacing 35 | // Example: o-box--spacing-tiny 36 | @each $sp-name, $sp-value in $spacing { 37 | @include filter('o-box--spacing-#{$sp-name}') { 38 | .o-box--spacing-#{$sp-name} { 39 | padding: rem($sp-value) rem($sp-value) rem($sp-value + ($sp-value * 0.2)) rem($sp-value); 40 | } 41 | } 42 | } 43 | 44 | // Create responsive variants using settings.breakpoints 45 | // Changes padding when breakpoint is hit 46 | // Example: o-box--spacing-tiny@md 47 | @each $bp-name, $bp-value in $mq-breakpoints { 48 | @include mq(#{$bp-name}) { 49 | @each $sp-name, $sp-value in $spacing { 50 | @include filter('o-box--spacing-#{$sp-name}@#{$bp-name}') { 51 | .o-box--spacing-#{$sp-name}\@#{$bp-name} { 52 | padding: rem($sp-value) rem($sp-value) rem($sp-value + ($sp-value * 0.2)) rem($sp-value); 53 | } 54 | } 55 | } 56 | } 57 | } 58 | 59 | 60 | // SPACING FILTERS 61 | //------------------------------------------------------------------------------------------------ 62 | 63 | /* 64 | Add these to a box with spacing to filter which sides have spacing. 65 | */ 66 | 67 | @include filter('o-box--spacing-disable-left', 'o-box--spacing-horizontal') { 68 | .o-box--spacing-disable-left, 69 | .o-box--spacing-horizontal { 70 | padding-left: 0; 71 | } 72 | } 73 | 74 | @include filter('o-box--spacing-disable-right', 'o-box--spacing-horizontal') { 75 | .o-box--spacing-disable-right, 76 | .o-box--spacing-horizontal { 77 | padding-right: 0; 78 | } 79 | } 80 | 81 | @include filter('o-box--spacing-disable-top', 'o-box--spacing-vertical') { 82 | .o-box--spacing-disable-top, 83 | .o-box--spacing-vertical { 84 | padding-top: 0; 85 | } 86 | } 87 | 88 | @include filter('o-box--spacing-disable-bottom', 'o-box--spacing-vertical') { 89 | .o-box--spacing-disable-bottom, 90 | .o-box--spacing-vertical { 91 | padding-bottom: 0; 92 | } 93 | } 94 | 95 | 96 | // End render 97 | } -------------------------------------------------------------------------------- /src/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // CONTAINER OBJECT 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Constrains the content within a max-width. Typically used with 7 | o-layout and width utilities to form a 12 column grid system. 8 | */ 9 | 10 | @include render('container') { 11 | 12 | 13 | // BLOCK & ELEMENTS 14 | //------------------------------------------------------------------------------------------------ 15 | 16 | .o-container { 17 | margin-right: auto; 18 | margin-left: auto; 19 | max-width: rem(1170px); 20 | padding-left: rem(20px); 21 | padding-right: rem(20px); 22 | width: 100%; 23 | } 24 | 25 | // End render 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/objects/_core.scss: -------------------------------------------------------------------------------- 1 | $layer: 'object'; 2 | 3 | @import 'box'; 4 | @import 'container'; 5 | @import 'layout'; -------------------------------------------------------------------------------- /src/scss/objects/_layout.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // LAYOUT OBJECT 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | The layout object is used to construct a grid-like layout system, with each 7 | layout__item representing an individual column. Typically used with 8 | container object and width utilities to form a grid system. 9 | */ 10 | 11 | @include render('layout') { 12 | 13 | 14 | // BLOCK & ELEMENTS 15 | //------------------------------------------------------------------------------------------------ 16 | 17 | /* 18 | [1] Allows us to use the layout object on any type of element. 19 | [2] Makes layout fill all available space. Useful for nesting layouts within 20 | layouts. 21 | [3] We need to defensively reset any box-model properties. 22 | [4] Absorb amount equal to half of the gutter on either side to account for 23 | their spacing. 24 | [5] Removes bullet points if layout is a list 25 | */ 26 | 27 | .o-layout { 28 | align-items: flex-start; 29 | display: flex; /* [1] */ 30 | flex-wrap: wrap; 31 | flex-grow: 1; /* [2] */ 32 | margin: 0; /* [3] */ 33 | padding: 0; /* [3] */ 34 | margin-left: -rem(20px) / 2; /* [4] */ 35 | margin-right: -rem(20px) / 2; /* [4] */ 36 | list-style: none; /* [5] */ 37 | } 38 | 39 | /* 40 | [1] Required in order to combine fluid widths with fixed gutters. 41 | */ 42 | 43 | .o-layout__item { 44 | box-sizing: border-box; /* [1] */ 45 | padding-left: rem(20px) / 2; 46 | padding-right: rem(20px) / 2; 47 | vertical-align: top; 48 | width: 100%; 49 | max-width: 100%; 50 | flex-basis: 0; 51 | flex-grow: 1; 52 | } 53 | 54 | 55 | // FLUSH MODIFIER 56 | //------------------------------------------------------------------------------------------------ 57 | 58 | /* 59 | Flush removes the gutter between layout items. 60 | */ 61 | 62 | /* 63 | [1] Remove negative margins as we no longer have to absorb any paddings 64 | from columns 65 | */ 66 | 67 | @include filter('o-layout--flush') { 68 | .o-layout--flush { 69 | margin-left: 0; /* [1] */ 70 | margin-right: 0; /* [1] */ 71 | & > .o-layout__item { 72 | padding-left: 0; 73 | padding-right: 0; 74 | } 75 | } 76 | } 77 | 78 | @include filter('o-layout__item--flush') { 79 | .o-layout__item--flush { 80 | &:not(:first-child) { 81 | padding-left: 0; 82 | } 83 | &:not(:last-child) { 84 | padding-right: 0; 85 | } 86 | } 87 | } 88 | 89 | 90 | 91 | // FIT MODIFIER 92 | //------------------------------------------------------------------------------------------------ 93 | 94 | /* 95 | Allows each layout item to size itself automatically on a single row by 96 | dividing the space equally between the total number of items. 97 | */ 98 | 99 | @include filter('o-layout--fit') { 100 | .o-layout--fit { 101 | flex-wrap: nowrap; 102 | } 103 | } 104 | 105 | 106 | 107 | // EQUAL HEIGHT MODIFIERS 108 | //------------------------------------------------------------------------------------------------ 109 | 110 | /* 111 | Makes each column have an equal height. Also includes modifiers for 112 | individual columns. 113 | */ 114 | 115 | @include filter('o-layout--fit-height') { 116 | .o-layout--fit-height { 117 | align-items: stretch; 118 | } 119 | } 120 | 121 | @include filter('o-layout__item--fit-height') { 122 | .o-layout__item--fit-height { 123 | align-self: stretch; 124 | } 125 | } 126 | 127 | 128 | /* 129 | With a fit-height modifier active, any child element 130 | with 'o-layout__fill' will expand to fill all available 131 | space created by everything being equal height. 132 | */ 133 | 134 | @include filter('o-layout--fit-height', 'o-layout__item--fit-height') { 135 | .o-layout--fit-height, 136 | .o-layout__item--fit-height { 137 | .o-layout__fill { 138 | display: flex; 139 | flex-grow: 1; 140 | flex-direction: column; 141 | height: 100%; 142 | } 143 | } 144 | } 145 | 146 | // End render 147 | } -------------------------------------------------------------------------------- /src/scss/settings/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // BREAKPOINTS 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | $mq-breakpoints: ( 6 | 'sm': 375px, 7 | 'sm2': 425px, 8 | 'sm3': 550px, 9 | 'md': 768px, 10 | 'md2': 840px, 11 | 'md3': 925px, 12 | 'lg': 1024px, 13 | 'lg2': 1280px, 14 | 'lg3': 1440px 15 | ) !default; 16 | -------------------------------------------------------------------------------- /src/scss/settings/_core.scss: -------------------------------------------------------------------------------- 1 | @import 'breakpoints'; 2 | @import 'imports'; 3 | @import 'spacing'; 4 | 5 | @import 'dependencies'; -------------------------------------------------------------------------------- /src/scss/settings/_dependencies.scss: -------------------------------------------------------------------------------- 1 | $dependencies: ( 2 | expander: ( 3 | object: ( 4 | box: ( 5 | 'o-box--spacing-small' 6 | ), 7 | layout: ( 8 | 'o-layout--fit' 9 | ) 10 | ), 11 | component: ( 12 | button: true, 13 | typography: ( 14 | 'c-type-echo' 15 | ) 16 | ), 17 | utility: ( 18 | alignments: ( 19 | 'u-flex-middle', 20 | 'u-align-center' 21 | ), 22 | widths: ( 23 | 'u-width-grow', 24 | 'u-width-shrink' 25 | ) 26 | ) 27 | ) 28 | ); 29 | 30 | @mixin dependency-setup() { 31 | $components: map-get($imports, component); 32 | @each $componentKey, $componentValue in $dependencies { 33 | @if(index($components, $componentKey)) { 34 | @each $layerKey, $layerValue in $componentValue { 35 | @each $partKey, $partValue in $layerValue { 36 | @if not index(map-get($imports, $layerKey), $partKey) { 37 | $imports: map-merge($imports, ( 38 | $layerKey: append(map-get($imports, $layerKey), '#{$partKey}') 39 | )) !global; 40 | } 41 | @each $class in $partValue { 42 | $global-filter: append($global-filter, '#{$class}', 'comma') !global; 43 | } 44 | } 45 | } 46 | } 47 | } 48 | } 49 | 50 | @include dependency-setup(); -------------------------------------------------------------------------------- /src/scss/settings/_imports.scss: -------------------------------------------------------------------------------- 1 | $imports: ( 2 | object: ( 3 | 'box', 4 | 'container' 5 | // 'layout' 6 | ), 7 | component: ( 8 | // 'button', 9 | 'expander' 10 | // 'typography' 11 | ), 12 | utility: ( 13 | // 'alignments', 14 | // 'widths' 15 | ) 16 | ); 17 | 18 | $global-filter: ( 19 | 'o-box--spacing-regular' 20 | ); -------------------------------------------------------------------------------- /src/scss/settings/_spacing.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // SPACING UNITS 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | Here we define spacing variants. These are used to generate spacing 7 | variants for many object and utility classes to give you an easy way of 8 | spacing out content. Typically, if a component requires more precise 9 | spacing, this CSS should be defined in the component CSS, not here. 10 | */ 11 | 12 | $spacing: ( 13 | 'none': 0px, 14 | 'micro': 5px, 15 | 'tiny': 10px, 16 | 'small': 15px, 17 | 'regular': 30px, 18 | 'large': 50px, 19 | 'huge': 75px 20 | ) !default; -------------------------------------------------------------------------------- /src/scss/tools/_core.scss: -------------------------------------------------------------------------------- 1 | @import 'node_modules/sass-mq/mq'; 2 | @import 'rem'; 3 | @import 'render'; 4 | @import 'filter'; -------------------------------------------------------------------------------- /src/scss/tools/_filter.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // FILTER 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | @mixin filter($class...) { 6 | @if($enable-all-classes) { 7 | @content; 8 | } 9 | @else if(type-of($class) == 'arglist') { 10 | @each $item in $class { 11 | @if(index($global-filter, $item)) { 12 | @content; 13 | } 14 | } 15 | } 16 | @else if(index($global-filter, $class)) { 17 | @content; 18 | } 19 | } -------------------------------------------------------------------------------- /src/scss/tools/_rem.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // REM FUNCTION 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | /* 6 | A function to convert any px value into its rem equivalent 7 | 8 | .myElement { 9 | padding: rem(16px); 10 | } 11 | */ 12 | 13 | @function rem($value) { 14 | @if (type-of($value) == number) { 15 | @if (unit($value) != 'px') { 16 | @error "'#{$value}' needs to be a pixel value."; 17 | } 18 | } 19 | @else { 20 | @error "'#{$value}' needs to be a number."; 21 | } 22 | 23 | @return $value / 16px * 1rem; 24 | } 25 | -------------------------------------------------------------------------------- /src/scss/tools/_render.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // RENDER 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | $layer: null !default; 6 | @mixin render($name) { 7 | @if($enable-all-classes or index(map-get($imports, $layer), $name)) { 8 | @content; 9 | } 10 | } -------------------------------------------------------------------------------- /src/scss/utilities/_alignments.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // ALIGNMENTS 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | @include render('alignments') { 6 | 7 | 8 | // TEXT 9 | //------------------------------------------------------------------------------------------------ 10 | 11 | @include filter('u-align-left') { 12 | .u-align-left { 13 | text-align: left !important; 14 | } 15 | } 16 | 17 | @include filter('u-align-center') { 18 | .u-align-center { 19 | text-align: center !important; 20 | } 21 | } 22 | 23 | @include filter('u-align-right') { 24 | .u-align-right { 25 | text-align: right !important; 26 | } 27 | } 28 | 29 | // Changes alignment when breakpoint is hit 30 | // Example: .u-align-left@md 31 | @each $bp-name, $bp-value in $mq-breakpoints { 32 | @include mq(#{$bp-name}) { 33 | @include filter('u-align-left@#{$bp-name}') { 34 | .u-align-left\@#{$bp-name} { 35 | text-align: left !important; 36 | } 37 | } 38 | 39 | @include filter('u-align-center@#{$bp-name}') { 40 | .u-align-center\@#{$bp-name} { 41 | text-align: center !important; 42 | } 43 | } 44 | 45 | @include filter('u-align-right@#{$bp-name}') { 46 | .u-align-right\@#{$bp-name} { 47 | text-align: right !important; 48 | } 49 | } 50 | } 51 | } 52 | 53 | 54 | // FLEX ALIGNMENTS 55 | //------------------------------------------------------------------------------------------------ 56 | 57 | [class*='u-flex-'] { 58 | display: flex !important; 59 | } 60 | 61 | // Flex equivalents 62 | @include filter('u-flex-middle', 'u-flex-center-all') { 63 | .u-flex-middle, 64 | .u-flex-center-all { 65 | align-items: center !important; 66 | } 67 | } 68 | 69 | @include filter('u-flex-center', 'u-flex-center-all') { 70 | .u-flex-center, 71 | .u-flex-center-all { 72 | justify-content: center !important; 73 | } 74 | } 75 | 76 | @include filter('u-flex-left', 'u-flex-justify-start') { 77 | .u-flex-justify-start, 78 | .u-flex-left { 79 | justify-content: flex-start !important; 80 | } 81 | } 82 | 83 | @include filter('u-flex-right', 'u-flex-justify-end') { 84 | .u-flex-justify-end, 85 | .u-flex-right { 86 | justify-content: flex-end !important; 87 | } 88 | } 89 | 90 | @include filter('u-flex-top', 'u-flex-align-start') { 91 | .u-flex-align-start, 92 | .u-flex-top { 93 | align-items: flex-start !important; 94 | } 95 | } 96 | 97 | @include filter('u-flex-bottom', 'u-flex-align-end') { 98 | .u-flex-align-end, 99 | .u-flex-bottom { 100 | align-items: flex-end !important; 101 | } 102 | } 103 | 104 | // End render 105 | } -------------------------------------------------------------------------------- /src/scss/utilities/_core.scss: -------------------------------------------------------------------------------- 1 | $layer: 'utility'; 2 | 3 | @import 'alignments'; 4 | @import 'widths'; -------------------------------------------------------------------------------- /src/scss/utilities/_widths.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------ 2 | // WIDTHS 3 | //------------------------------------------------------------------------------------------------ 4 | 5 | $utility-widths-sets: 12 !default; 6 | 7 | // WIDTHS MIXIN 8 | //------------------------------------------------------------------------------------------------ 9 | 10 | @mixin create-widths($width-sets, $breakpoint-suffix: null, $breakpoint-key: null) { 11 | 12 | $breakpoint-label: ''; 13 | @if($breakpoint-suffix) { 14 | $breakpoint-label: '@#{$breakpoint-key}'; 15 | } 16 | 17 | @for $i from 1 through $width-sets { 18 | @include filter('u-width-#{$i}\/#{$width-sets}#{$breakpoint-suffix}#{$breakpoint-key}') { 19 | .u-width-#{$i}\/#{$width-sets}#{$breakpoint-suffix}#{$breakpoint-key} { 20 | width: ($i / $width-sets) * 100% !important; 21 | max-width: ($i / $width-sets) * 100% !important; 22 | flex-basis: ($i / $width-sets) * 100% !important; 23 | margin-left: 0 !important; /* [1] */ 24 | flex-grow: 1 !important; 25 | } 26 | } 27 | } 28 | 29 | @include filter('u-width-auto#{$breakpoint-suffix}#{$breakpoint-key}') { 30 | .u-width-auto#{$breakpoint-suffix}#{$breakpoint-key} { 31 | width: auto !important; 32 | flex-basis: 0 !important; 33 | margin-left: 0 !important; /* [1] */ 34 | flex-grow: 1 !important; 35 | max-width: initial !important; 36 | } 37 | } 38 | 39 | @include filter('u-width-grow#{$breakpoint-suffix}#{$breakpoint-key}') { 40 | .u-width-grow#{$breakpoint-suffix}#{$breakpoint-key} { 41 | width: auto !important; 42 | flex-basis: auto !important; 43 | margin-left: 0 !important; /* [1] */ 44 | flex-grow: 1 !important; 45 | max-width: initial !important; 46 | } 47 | } 48 | 49 | @include filter('u-width-shrink#{$breakpoint-suffix}#{$breakpoint-key}') { 50 | .u-width-shrink#{$breakpoint-suffix}#{$breakpoint-key} { 51 | width: auto !important; 52 | flex-basis: auto !important; 53 | margin-left: 0 !important; /* [1] */ 54 | flex-grow: 0 !important; 55 | max-width: initial !important; 56 | } 57 | } 58 | } 59 | 60 | @include render('widths') { 61 | 62 | // GENERATE STANDARD WIDTHS 63 | //------------------------------------------------------------------------------------------------ 64 | 65 | // Example: .u-width-1/3 66 | @include create-widths($utility-widths-sets); 67 | 68 | 69 | // GENERATE RESPONSIVE WIDTHS 70 | //------------------------------------------------------------------------------------------------ 71 | 72 | // Create responsive variants using settings.breakpoints 73 | // Changes width when breakpoint is hit 74 | // Example: .u-width-1/3@md 75 | 76 | @each $bp-name, $bp-value in $mq-breakpoints { 77 | @include mq(#{$bp-name}) { 78 | @include create-widths($utility-widths-sets, \@, #{$bp-name}); 79 | } 80 | } 81 | 82 | // End render 83 | } 84 | --------------------------------------------------------------------------------