General
This is how the universal box sizing with Inheritance looks like.
This border-box reset is the most flexibility reset to date.
For more reading, check out the box-sizing
article over att css-tricks.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
Variables
These are all the component specific variables that can be used for customization.
| Name | Value |
|---|---|
| @fractions | 1, 2, 3, 4, 5, 6 |
| @skin-primary | #546e7a |
| @skin-primary-light | lighten(@skin-primary, 15%) |
| @skin-primary-dark | darken(@skin-primary, 15%) |
| @skin-secondary | #90a4ae |
| @skin-secondary-light | lighten(@skin-secondary, 15%) |
| @skin-secondary-dark | darken(@skin-secondary, 15%) |
| @skin-background | @skin-gray-50 |
| @skin-surface | mix(@skin-white, @skin-primary, 95%) |
| @skin-error | #f44336 |
| @skin-info | #50b2ce |
| @skin-success | #36a73b |
| @skin-warning | #e9ac5e |
| @skin-warn | #e9ac5e |
| @skin-on-primary | contrast(@skin-primary) |
| @skin-on-primary-light | contrast(@skin-primary-light) |
| @skin-on-primary-dark | contrast(@skin-primary-dark) |
| @skin-on-secondary | contrast(@skin-secondary) |
| @skin-on-secondary-light | contrast(@skin-secondary-light) |
| @skin-on-secondary-dark | contrast(@skin-secondary-dark) |
| @skin-on-background | contrast(@skin-background) |
| @skin-on-surface | contrast(@skin-surface) |
| @skin-on-error | contrast(@skin-error) |
| @skin-on-info | contrast(@skin-info) |
| @skin-on-success | contrast(@skin-success) |
| @skin-on-warning | contrast(@skin-warning) |
| @skin-primary-bg | @skin-white |
| @skin-secondary-bg | @skin-black |
| @skin-text-primary-on-background | @skin-black |
| @skin-text-secondary-on-background | @skin-gray-700 |
| @skin-text-hint-on-background | @skin-gray-500 |
| @skin-text-disabled-on-background | @skin-gray-400 |
| @skin-text-icon-on-background | @skin-gray-500 |
| @skin-text-primary-on-light | @skin-black |
| @skin-text-secondary-on-light | @skin-gray-700 |
| @skin-text-hint-on-light | @skin-gray-500 |
| @skin-text-disabled-on-light | @skin-gray-400 |
| @skin-text-icon-on-light | @skin-gray-500 |
| @skin-text-primary-on-dark | @skin-white |
| @skin-text-secondary-on-dark | @skin-gray-200 |
| @skin-text-hint-on-dark | @skin-gray-400 |
| @skin-text-disabled-on-dark | @skin-gray-500 |
| @skin-text-icon-on-dark | @skin-white |
| @skin-border-primary | @skin-gray-400 |
| @skin-black | #000 |
| @skin-white | #fff |
| @skin-gray-50 | #fafafa |
| @skin-gray-100 | #f5f5f5 |
| @skin-gray-200 | #eee |
| @skin-gray-300 | #e0e0e0 |
| @skin-gray-400 | #bdbdbd |
| @skin-gray-500 | #9e9e9e |
| @skin-gray-600 | #757575 |
| @skin-gray-700 | #616161 |
| @skin-gray-800 | #424242 |
| @skin-gray-900 | #212121 |
| @space-base | 4px |
| @space-0 | 0 |
| @space-1 | @space-base / @space-base |
| @space-2 | @space-base / 2 |
| @space-4 | @space-base |
| @space-8 | @space-base * 2 |
| @space-12 | @space-base * 3 |
| @space-16 | @space-base * 4 |
| @space-20 | @space-base * 5 |
| @space-24 | @space-base * 6 |
| @space-28 | @space-base * 7 |
| @space-32 | @space-base * 8 |
| @space-36 | @space-base * 9 |
| @space-40 | @space-base * 10 |
| @space-44 | @space-base * 11 |
| @space-48 | @space-base * 12 |
| @space-52 | @space-base * 13 |
| @space-56 | @space-base * 14 |
| @space-60 | @space-base * 15 |
| @space-64 | @space-base * 16 |
| @space-68 | @space-base * 17 |
| @space-72 | @space-base * 18 |
| @space-76 | @space-base * 19 |
| @space-80 | @space-base * 20 |
| @space-84 | @space-base * 21 |
| @space-88 | @space-base * 22 |
| @space-92 | @space-base * 23 |
| @space-96 | @space-base * 24 |
| @space-100 | @space-base * 25 |
| @space-104 | @space-base * 26 |
| @space-x | @space-4 |
| @space-x0 | 0 |
| @space-x1 | @space-x |
| @space-x2 | @space-x * 2 |
| @space-x3 | @space-x * 3 |
| @space-x4 | @space-x * 4 |
| @space-x5 | @space-x * 5 |
| @space-x6 | @space-x * 6 |
| @space-x7 | @space-x * 7 |
| @space-x8 | @space-x * 8 |
| @space-x9 | @space-x * 9 |
| @space-x10 | @space-x * 10 |
| @space-x11 | @space-x * 11 |
| @space-x12 | @space-x * 12 |
| @space-x13 | @space-x * 13 |
| @space-x14 | @space-x * 14 |
| @space-x15 | @space-x * 15 |
| @space-x16 | @space-x * 16 |
| @space-x17 | @space-x * 17 |
| @space-x18 | @space-x * 18 |
| @space-x19 | @space-x * 19 |
| @space-x20 | @space-x * 20 |
| @z-index-global | |
| @font-url | https://fonts.googleapis.com/css?family=Roboto:300,400,500 |
| @font-family | "Roboto", sans-serif |
| @font-size-base | @space-16 |
| @font-size-xxsmall | 0.625rem |
| @font-size-xsmall | 0.75rem |
| @font-size-small | 0.8125rem |
| @font-size-medium | 0.875rem |
| @font-size-large | 1rem |
| @font-size-larger | 1.25rem |
| @font-size-xlarge | 1.5rem |
| @font-size-xxlarge | 2.125rem |
| @font-size-xxxlarge | 3rem |
| @font-size-enormous | 3.75rem |
| @font-size-colossal | 6rem |
| @font-size-h1 | @font-size-colossal |
| @font-size-h2 | @font-size-enormous |
| @font-size-h3 | @font-size-xxxlarge |
| @font-size-h4 | @font-size-xxlarge |
| @font-size-h5 | @font-size-xlarge |
| @font-size-h6 | @font-size-larger |
| @line-height-normal | normal |
| @line-height-base | 1 |
| @line-height-secondary | 1.5 |
| @font-weight-light | 300 |
| @font-weight-normal | 400 |
| @font-weight-medium | 500 |
| @screen-sm | 600px |
| @screen-sm-down | @screen-sm - 1 |
| @screen-md | 768px |
| @screen-md-down | @screen-md - 1 |
| @screen-lg | 1024px |
| @screen-lg-down | @screen-lg - 1 |
| @screen-xl | 1280px |
| @screen-xl-down | @screen-xl - 1 |
| @screen-sizes | sm, md, lg, xl |
| @border-width | @space-1 |
| @border-width-0 | @space-0 |
| @border-width-2 | @space-2 |
| @border-width-4 | @space-4 |
| @border-style | solid |
| @border-color | @skin-gray-400 |
| @border-radius-none | @space-0 |
| @border-radius-sm | @space-2 |
| @border-radius | @space-4 |
| @border-radius-lg | @space-8 |
| @border-radius-rounded | 50px |
| @opacity-100 | 1 |
| @opacity-80 | 0.8 |
| @opacity-60 | 0.6 |
| @opacity-40 | 0.4 |
| @opacity-20 | 0.2 |
| @opacity-0 | 0 |
| @transition-duration-default | 0.2s |
| @transition-duration-slower | 0.3s |
| @transition-duration-slowest | 0.4s |
| @transition-property | all |
| @transition-timing | ease-in-out |
| @transition-base | @transition-property @transition-duration-default @transition-timing |
| @shadow-z0 | 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12) |
| @shadow-z1 | 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12) |
| @shadow-z2 | 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) |
| @shadow-z3 | 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) |
| @shadow-z4 | 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) |
| @shadow-z5 | 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12) |
| @shadow-z6 | 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12) |
| @shadow-z7 | 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14), 0 2px 16px 1px rgba(0, 0, 0, 0.12) |
| @shadow-z8 | 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) |
| @shadow-z9 | 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12) |
| @shadow-z10 | 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14), 0 4px 18px 3px rgba(0, 0, 0, 0.12) |
| @shadow-z11 | 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14), 0 4px 20px 3px rgba(0, 0, 0, 0.12) |
| @shadow-z12 | 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12) |
| @shadow-z13 | 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12) |
| @shadow-z14 | 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12) |
| @shadow-z15 | 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14), 0 6px 28px 5px rgba(0, 0, 0, 0.12) |
| @shadow-z16 | 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12) |
| @shadow-z17 | 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14), 0 6px 32px 5px rgba(0, 0, 0, 0.12) |
| @shadow-z18 | 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14), 0 7px 34px 6px rgba(0, 0, 0, 0.12) |
| @shadow-z19 | 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14), 0 7px 36px 6px rgba(0, 0, 0, 0.12) |
| @shadow-z20 | 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14), 0 8px 38px 7px rgba(0, 0, 0, 0.12) |
| @shadow-z21 | 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14), 0 8px 40px 7px rgba(0, 0, 0, 0.12) |
| @shadow-z22 | 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14), 0 8px 42px 7px rgba(0, 0, 0, 0.12) |
| @shadow-z23 | 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14), 0 9px 44px 8px rgba(0, 0, 0, 0.12) |
| @shadow-z24 | 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12) |