How to use Microthemer and Oxygen together

Get Microthemer: themeover.com
Try the Oxygen demo: livedemo.themeover.com/setting-up-demo-site/?cr…

An introduction to Microthemer (a WordPress CSS editor) and it's integration with Oxygen builder. Includes practical tips on using CSS grid and CSS variables simplify responsive design.

SAMPLE VARIABLE CODE

Copy any paste the following into Microthemer:

For the 'All Devices' tab:

:root {
/* Colors */
--primary-color: red;
--secondary-color: blue;
/* Font family */
--font-family-1: 'Arial';
--font-family-2: 'Georgia';
/* Font size */
--font-size-1: 1rem;
--font-size-2: 1.2rem;
--font-size-3: 1.44rem;
--font-size-4: 1.728rem;
--font-size-5: 2rem;
--font-size-6: 2.4rem;
/* Spacing */
--spacing-0: 0;
--spacing-1: 0.5rem;
--spacing-2: 1rem;
--spacing-3: 2rem;
--spacing-4: 3rem;
}

For e.g. 'Tablet & Phone' tab:

:root {
/* Font size */
--font-size-1: 0.8rem;
--font-size-2: 1rem;
--font-size-3: 1.2rem;
--font-size-4: 1.4rem;
--font-size-5: 1.6rem;
--font-size-6: 1.8rem;
/* Spacing */
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1.5rem;
}

That should help you get started. When referencing variables in the Microthemer UI fields, you use the following syntax:

var(--font-family-1)

Or

var(--font-size-4)

Or

var(--spacing-3)

Etc.

Further reading: madebymike.com.au/writing/using-css-variables/