Containers & Row gutter spacing
[code]
// containers
:root {
–container-max-width-fluid: 1700px ;
–container-max-width-xxl: 1680px ;
–container-max-width-xl: 1500px ;
–container-max-width-lg: 1320px ;
–container-max-width-md: 1140px;
–container-max-width-sm: 960px ;
}
[/code]
c-no-container
c-container-fluid
c-container-widest { max-width: 1680px }
c-container-wider { max-width:1500px }
c-container-wide { max-width:1320px }
c-container (standard size) { max-width:1140px }
c-container–small { max-width:960px }
[code]
// container gutters use the framework spacings
// Spacings
:root {
–spacing-none: 0;
–spacing-xs: 8px;
–spacing-sm: 12px;
–spacing-md: 16px;
–spacing-lg: 32px;
–spacing-xl: 64px;
–spacing-xl: 96px;
}
[/code]
c-row–no-gutter
c-row–no-gutter
c-row–no-gutter
c-row–xs-gutter
c-row–xs-gutter
c-row–xs-gutter
c-row–sm-gutter
c-row–sm-gutter
c-row–sm-gutter
c-row–md-gutter
c-row–md-gutter
c-row–md-gutter
c-row–lg-gutter
c-row–lg-gutter
c-row–lg-gutter
c-row–xl-gutter
c-row–xl-gutter
c-row–xl-gutter
c-row–xxl-gutter
c-row–xxl-gutter
c-row–xxl-gutter
Button Modifiers
[code]
// Example button
<a class="c-button c-button–lg c-button–color-5 c-button–pill c-button–center u-mb-4">Button text</a>
[/code]
Color
[code]
// Example button color classes
c-button–color-1
c-button–color-2
c-button–color-3
c-button–color-4
c-button–color-5
c-button–color-6
c-button–color-7
c-button–color-8
c-button–color-9
c-button–color-0
[/code]
Size, type & align
[code]
// Example button size classes
c-button–sm
c-button–lg
// Example button type classes
c-button–full
c-button–pill
// Example button align classes
c-button–center
c-button–right
[/code]
Text Utilities
Color
- u-text-color-body
- u-text-color-white
- u-text-color-black
- u-text-color-1
- u-text-color-2
- u-text-color-3
- u-text-color-4
- u-text-color-5
- u-text-color-6
- u-text-color-7
- u-text-color-8
- u-text-color-9
- u-text-color-0
- u-text-color-gray-1
- u-text-color-gray-2
- u-text-color-gray-3
- u-text-color-gray-4
- u-text-color-gray-5
Align
- u-text-left
- u-text-center
- u-text-right
Background
Color
- u-background-color-body
- u-background-color-white
- u-background-color-black
- u-background-color-1
- u-background-color-2
- u-background-color-3
- u-background-color-4
- u-background-color-5
- u-background-color-6
- u-background-color-7
- u-background-color-8
- u-background-color-9
- u-background-color-0
- u-background-color-gray-1
- u-background-color-gray-2
- u-background-color-gray-3
- u-background-color-gray-4
- u-background-color-gray-5
Size
- u-background-no-repeat
- u-background-cover
- u-background-contain
Position
- u-background-pos-center
- u-background-pos-top-center
- u-background-pos-top-right
- u-background-pos-bottom-left
- u-background-pos-bottom-center
- u-background-pos-bottom-right
Icon
Color
- icon–color-1
- icon–color-2
- icon–color-3
- icon–color-4
- icon–color-5
- icon–color-6
- icon–color-7
- icon–color-8
- icon–color-9
- icon–color-0
- icon–color-body
- icon–color-white
- icon–color-black
Size
- icon–xs
- icon–sm
- icon–md
- icon–lg
- icon–xl
- icon–xxl
Flex
Flex
- u-flex-row
- u-flex-column
- u-flex-row-reverse
- u-flex-column-reverse
- u-flex-wrap
- u-flex-nowrap
- u-flex-wrap-reverse
- u-flex-fill
- u-flex-grow-0
- u-flex-grow-1
- u-flex-shrink-0
- u-flex-shrink-1
Horizontal Align
- u-justify-content-start
- u-justify-content-end
- u-justify-content-center
- u-justify-content-between
- u-justify-content-around
Vertical Align
- u-align-items-start
- u-align-items-end
- u-align-items-center
- u-align-items-baseline
- u-align-items-stretch
- u-align-content-start
- u-align-content-end
- u-align-content-center
- u-align-content-between
- u-align-content-around
- u-align-content-stretch
- u-align-self-auto
- u-align-self-start
- u-align-self-end
- u-align-self-center
- u-align-self-baseline
- u-align-self-stretch
Spacing
Padding General
- u-padding-flush
- u-padding-2xs
- u-padding-xxs
- u-padding-xs
- u-padding-sm
- u-padding-md
- u-padding-lg
- u-padding-xl
- u-padding-xxl
- u-padding-2xl
Padding Examples
- u-padding-vertical-xs
- u-padding-top-sm
- u-padding-right-md
- u-padding-bottom-lg
- u-padding-left-xl
- u-padding-horizontal-xxl
More
Border Radius
- u-border-radius-flush (0px)
- u-border-radius (4px (Global Radius))
- u-border-radius-sm (3px)
- u-border-radius-md (4px)
- u-border-radius-lg (8px)
- u-border-radius-xl (16px)
USED CLASSES: u-p-2 u-p-md-4 u-p-lg-6 u-p-xl-6 u-m-2 u-m-md-3 u-m-lg-4 u-m-xl-6 u-text-center u-border-radius-xl u-text-xl-2xl u-text-lg-xl u-text-md-lg u-text-sm-md u-text-sm-xs