Variables – Yourstyle Plus

CSS variables

In this section we will explain the most useful CSS variables to setup in the customizer settings.

Global variables

// 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);
}

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

}

// 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
}

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

}

Header variables

// 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);
}

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

}

Grid & Gutter variables

// 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;
}

// 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;

}

Font size / weight & Title variables

Examples of Font Sizes

// 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;
}

// 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;

}

Container variables

Examples of container components

// 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 ;
}

// 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 ;

}

Spacing variables

Examples of spacings

// 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;
}

// 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;

}

Button Modifiers

// Example button

1	// Example button

[code]Button text here[/code]

Color

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

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

Size, type & align

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

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

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

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

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

Winkelwagen

CSS variables

Global variables

Header variables

Grid & Gutter variables

Font size / weight & Title variables

Container variables

Spacing variables

Button Modifiers

Color

Size, type & align

Text Utilities

Color

Align

Background

Color

Size

Position

Icon

Color

Size

Flex

Flex

Horizontal Align

Vertical Align

Spacing

Padding General

Padding Examples

More

Border Radius