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) |