CSS variables
In this section we will explain the most useful CSS variables to setup in the customizer settings.
Global variables
[code]
// All components use the framework Global settings
// Global
:root {
–global-font-size: 1rem;
–global-font-weight: 400;
–global-line-height: 1.8;
–global-transition: 0.3s;
–global-radius: 4px;
–global-spacing: 3rem;
–global-letter-spacing: 0.3px;
–global-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
}
[/code]
[code]
// All components use the framework Global settings
// Global colors
:root {
–body-color: #fff;
–text-color: #000;
–text-color-hover: #252525;
–text-color-font: var(–font-bg-dark);
–link-color: #1a0dab;
–link-color-hover: #4ba3e7;
–link-color-font: var(–font-bg-dark);
–color-1: #412458;
–color-1-hover: #522d70;
–color-1-font: var(–font-bg-dark);
–color-2: #4ba3e7;
–color-2-hover: #3e86be;
–color-2-font: var(–font-bg-dark);
–color-3: #32bcad;
–color-3-hover: #50d1c3;
–color-3-font: var(–font-bg-dark);
–color-4: #f79952;
–color-4-hover: #f9b683;
–color-4-font: var(–font-bg-dark);
–color-5: #da2f5a;
–color-5-hover: #e25a7c;
–color-5-font: var(–font-bg-dark);
–color-6: #412458;
–color-6-hover: #522d70;
–color-6-font: var(–font-bg-dark);
–color-7: #4ba3e7;
–color-7-hover: #3e86be;
–color-7-font: var(–font-bg-dark);
–color-8: #32bcad;
–color-8-hover: #50d1c3;
–color-8-font: var(–font-bg-dark);
–color-9: #f79952;
–color-9-hover: #f9b683;
–color-9-font: var(–font-bg-dark);
–color-0: #da2f5a;
–color-0-hover: #e25a7c;
–color-0-font: var(–font-bg-dark);
–font-bg-dark: #fff;
–font-bg-light: #000;
–gray-1: #f8f9fa;
–gray-2: #dee2e6;
–gray-3: #adb5bd;
–gray-4: #495057;
–gray-5: #212529;
–color-arrow: "ffffff";
–color-bullet: #fff
}
[/code]
Header variables
[code]
// All components use the framework Global settings
// Site Header navigation
:root {
–site-logo-padding: 20px 0;
–header-border-bottom: 0 1px 2px rgba(0, 0, 0, 0.2);
–navigation-link-font-size: var(–global-font-size);
–navigation-link-font-weight: var(–global-font-weight);
–navigation-link-padding: 10px;
–navigation-link-color: var(–header-text-color);
–navigation-link-color-hover: var(–header-text-color-hover);
–navigation-link-color-current: var(–color-1);
–navigation-link-disabled-color: #777;
–navigation-dropdown-link-color: var(–color-1);
–navigation-dropdown-link-color-hover: var(–color-1);
–navigation-dropdown-link-padding-right: 24px;
–navigation-button-padding: 0 10px;
–navigation-button-margin: auto;
}
// Mobile navigation
:root {
–mobile-menu-width: 30%;
–mobile-menu-text-color: #fff;
–mobile-menu-text-color-h: #fff;
–mobile-menu-toggle-open: var(–color-1);
–mobile-menu-toggle-close: #fff;
–mobile-menu-item-chevron: #fff;
–mobile-menu-background: var(–color-1);
}
[/code]
Grid & Gutter variables
[code]
// container gutters use the framework spacings
// Spacings
:root {
–grid-gutter-width: 32px;
–grid-breakpoint-xs: 0;
–grid-breakpoint-sm: 576px;
–grid-breakpoint-md: 768px;
–grid-breakpoint-lg: 992px;
–grid-breakpoint-xl: 1200px;
}
[/code]
Font size / weight & Title variables
[code]
// All components use the framework Global settings
// Global
:root {
–font-size-xs: 0.75rem;
–font-size-sm: 0.875rem;
–font-size-md: 1rem;
–font-size-lg: 1.125rem;
–font-size-xl: 1.25rem;
–font-size-xxl: 1.5rem;
–font-size-2xl: 2rem;
–font-size-large: 3rem;
–font-size-larger: 4rem;
–font-size-largest: 4.5rem;
–font-weight-lighter: 200;
–font-weight-light: 300;
–font-weight-normal: 400;
–font-weight-medium: 500;
–font-weight-semi-bold: 600;
–font-weight-bold: 700;
–font-weight-bolder: 900;
–font-size-h1: clamp(24px, 3.2vw, 34px);
–font-size-h2: clamp(22px, 2.5vw, 28px);
–font-size-h3: clamp(20px, 2.5vw, 22px);
–font-size-h4: clamp(18px, 2.5vw, 20px);
–font-size-h5: clamp(16px, 2.5vw, 18px);
–font-size-h6: clamp(14px, 2.5vw, 16px);
–font-size-h1-line-height: 1.2;
–font-size-h2-line-height: 1.2;
–font-size-h3-line-height: 1.2;
–font-size-h4-line-height: 1.2;
–font-size-h5-line-height: 1.2;
–font-size-h6-line-height: 1.2;
}
[/code]
Container variables
[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]
Spacing variables
[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;
–spacing-3xl: 160px;
}
[/code]
Button Modifiers
[code]
// Example button
<a class="c-button">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