Debug
.debug-red
.debug-green
.debug-blue
Containers
.container-small
.container
.container-large
Flex
Direction
Parent :
.flex
Parent :
.flex-column
Justify-content (jc)
Parent :
.flex .jc-space-between
Parent :
.flex .jc-space-around
Parent :
.flex .jc-space-evenly
Parent :
.flex .jc-center
Parent :
.flex .jc-start
Parent :
.flex .jc-end
Same examples with
flex-column. We used 6 .flex-column containers inside
a .flex one for display purposes.
Align-items (ai)
Parent :
.flex
Parent :
.flex .ai-center
Parent :
.flex .ai-start
Parent :
.flex .ai-end
Parent :
.flex .ai-baseline
Flex-length
.flex-one-quarter
.flex-one-third
.flex-one-half
.flex-two-thirds
.flex-three-quarters
.flex-full
.flex-one-fifth
.flex-two-fifths
.flex-three-fifths
.flex-four-fifths
Grid
All columns are contained into a
.row parent
Columns
.col s1
.col s2
.col s3
.col s4
.col s5
.col s6
.col s7
.col s8
.col s9
.col s10
.col s11
.col s12
Offset
.col s3
.col s3 offset-s1
.col s3 offset-s2
.col s3 offset-s3
.col s3 offset-s4
.col s3 offset-s5
.col s3 offset-s6
.col s3 offset-s7
.col s3 offset-s8
.col s3 offset-s9
.col s3
.col s4 offset-s1
.col s3 offset-s1
Responsive design
-
Mobile Devices (<= 600px) :
.s -
Tablet Devices (> 600px) :
.m -
Desktop Devices (> 992px) :
.l -
Large Desktop Devices (> 1200px) :
.xl
Full width on all devices
.col s12
Full width on mobile devices and half width beyond
.col s12 m6
Shadows
.depth-1
.depth-2
.depth-3
.depth-4
.depth-5
Margin & Padding
Default values :
xs:
5px
s:
10px
m:
20px
l:
40px
-
.margin-[left|top|right|bottom|vertical|horizontal]-[xs|s|m|l] -
.margin-[xs|m|l] -
.padding-[left|top|right|bottom|vertical|horizontal]-[xs|s|m|l] -
.padding-[xs|m|l]
Tygraphy
-
Header 1 - 4.6rem (46px)
-
Header 2 - 3.6rem (36px)
-
Header 3 - 2.8rem (28px)
-
Header 4 - 2.2rem (22px)
-
Header 5 - 1.8rem (18px)
-
Header 6 - 1.6rem (16px)
- regular
- em
- strong
- small
-
.underline: Underline -
.light: Light text (font-weight: 300) -
.thin: Thin text (font-weight: 100)
-
.truncate: Truncate a text with ellipsis
Utilities
-
.min-100-vh: Set a min height of 100vh (100% of the viewport height) for an element -
.full-height: 100% height -
.full-width: 100% width -
.responsive-img-w: 100% min width for a image (fill content) -
.responsive-video-w: 100% min width for a video (fill content) -
.responsive-img-h: 100% min height for a image (fill content) -
.responsive-video-h: 100% min height for a video (fill content) -
.hide -
.hide-s-only -
.hide-s-and-down -
.hide-m-only -
.hide-m-and-down -
.hide-m-and-up -
.hide-l-only -
.hide-xl-only
Modal
-
.overlay: Full screen overlay -
.modal: Horizontally centered content