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