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)