🍰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
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
Animation Speed
Animation speed variables allow you to store a set of timings for your animation, e.g. transition effects.
Code
Last updated