🍰Custom Properties

Custom Properties is a core WP Rig feature, and the WP Rig toolkit extends its usage by adding new useful scenarios.

Typography

Typography is a perfect place to manage your typography variables and make them systemized. Although it may be new for non-designers, font sizes have predefined rules, so there is no need to invent your own. All you need from a code side is to select the right ratio, and the rest of font sizes will be calculated automatically. The variable system for font sizes is pretty straightforward. The basic variable is "--font-size-r" (regular), and then it goes bigger (l,xl,2xl etc.) and smaller (s,xs,2xs etc.).

Code

/* Typography */
--global-font-family: "Arial", sans-serif;
--highlight-font-family: "Times New Roman", sans-serif;

/* * Select Font Scale:
 #1.067 - Minor Second,
 #1.125 - Major Second,
 #1.2   - Minor Third,
 #1.25  - Major Third,
 #1.333 - Perfect Fourth,
 #1.414 - Augmented Fourth,
 #1.5   - Perfect Fifth,
 #1.618 - Golden Ratio
 */
--global-font-scale: 1.333;

/* Custom font sizes */
--font-size-6xl: calc(var(--font-size-5xl) * var(--global-font-scale));
--font-size-5xl: calc(var(--font-size-4xl) * var(--global-font-scale));
--font-size-4xl: calc(var(--font-size-3xl) * var(--global-font-scale));
--font-size-3xl: calc(var(--font-size-2xl) * var(--global-font-scale));
--font-size-2xl: calc(var(--font-size-xl) * var(--global-font-scale));
--font-size-xl: calc(var(--font-size-l) * var(--global-font-scale));
--font-size-l: calc(var(--font-size-r) * var(--global-font-scale));
--font-size-r: var(--global-font-size);
--font-size-s: calc(var(--font-size-r) / var(--global-font-scale));
--font-size-xs: calc(var(--font-size-s) / var(--global-font-scale));
--font-size-2xs: calc(var(--font-size-xs) / var(--global-font-scale));

Gutenberg

Gutenberg is present present due to compatibility reasons, but there is no native support for WP Rig Toolkit at the current moment.

Colors

Colors variables contain all your colors and gradients.

Code

/*----------------------------
# Typography
----------------------------*/
--global-font-family: "Arial", sans-serif;
--highlight-font-family: "Times New Roman", sans-serif;

/* * Select Font Scale:
 #1.067 - Minor Second,
 #1.125 - Major Second,
 #1.2   - Minor Third,
 #1.25  - Major Third,
 #1.333 - Perfect Fourth,
 #1.414 - Augmented Fourth,
 #1.5   - Perfect Fifth,
 #1.618 - Golden Ratio
 */
--global-font-scale: 1.333;

/* Custom font sizes */
--font-size-6xl: calc(var(--font-size-5xl) * var(--global-font-scale));
--font-size-5xl: calc(var(--font-size-4xl) * var(--global-font-scale));
--font-size-4xl: calc(var(--font-size-3xl) * var(--global-font-scale));
--font-size-3xl: calc(var(--font-size-2xl) * var(--global-font-scale));
--font-size-2xl: calc(var(--font-size-xl) * var(--global-font-scale));
--font-size-xl: calc(var(--font-size-l) * var(--global-font-scale));
--font-size-l: calc(var(--font-size-r) * var(--global-font-scale));
--font-size-r: var(--global-font-size);
--font-size-s: calc(var(--font-size-r) / var(--global-font-scale));
--font-size-xs: calc(var(--font-size-s) / var(--global-font-scale));
--font-size-2xs: calc(var(--font-size-xs) / var(--global-font-scale));

Elements Colors

Element colors are core WP Rig values, which can also be good for general styles like link colors.

Spacing

Spacing is a set of variables that should be the same as your Spacing System. The idea is to have all your spacings unified so no more garbage styles like (11px, 13px, 2.45em, etc., alongside each other).

Code

/*----------------------------
# Spacing
----------------------------*/
--spacing-5xs: 0.2rem;
--spacing-4xs: 0.4rem;
--spacing-3xs: 0.8rem;
--spacing-2xs: 1.2rem;
--spacing-xs: 1.6rem;
--spacing-s: 2rem;
--spacing-m: 2.4rem;
--spacing-l: 3.2rem;
--spacing-xl: 4rem;
--spacing-2xl: 5.6rem;
--spacing-3xl: 7.2rem;
--spacing-4xl: 8.8rem;
--spacing-5xl: 12rem;

Animation Speed

Animation speed variables allow you to store a set of timings for your animation, e.g. transition effects.

Code

/*----------------------------
# Animation Speed
----------------------------*/
--animation-speed: 0.5s;
--animation-speed--fast: 0.25s;