Invert Classes

Introduction

The site utilises 2 overall colour palettes, known as "primary" and "secondary". All colour classes use the American spelling of "color".

The below flexboxes demonstrate the 4 colour themes available to apply to any parent flexbox.

The first parent flexbox has no class - this is the default colour theme. The second, third and fourth parent flexboxes have an inversion class applied to them: invert-primary-dark, invert-secondary-light and invert-secondary-dark. These classes carry a variety of rules to "re-skin" the flexbox and everything inside it, akin to how Shopify themes often provide simple colour scheme options for entire sections.

The final flexbox demonstrates invert-primary-light, which is the same as base styles. This class allows for a flexbox inside another inverted class to be returned to base styles.