AutomaticCSS Styling Guide

* This page is a work in progress. There are many other classes that the framework provides with regards to many aspects of CSS that you would do manually. Ideally, we want to use as many AutomaticCSS classes as possible because they are created to be automatically responsive.

CLICK HERE TO VIEW ALL CLASSES PROVIDED WITHIN THE FRAMEWORK

Global Colors

These colors can be changed within the AutomaticCSS plugin under Colors. You can click the button below to get there faster.

Color Settings

Primary
var(--primary)

Secondary
var(--secondary)

Accent
var(--accent)

Base
var(--base)

Heading Sizes

All heading sizes are set according to the sizing provided by the framework. You can use the accompanying --text classes to set the sizing of either a certain heading or text. 

You can also hook into these text sizing classes by using var(--text-[size]) to create a custom class.

Heading One (--text-xxl)

Heading Two (--text-xl)

Heading Three (--text-l)

Heading Four (--text-m)

Heading Five (--text-s)
Heading Six (--text-xs)

Button Classes

These button classes don't natively provide a border radius. If you want to assign a specific radius to the buttons, simply go to the Advanced Settings > Border > Border Radius > Set Unit To None > Use var(--radius-[size]) to assign a radius.

btn--xxlbtn--xlbtn--lbtn--mbtn--sbtn--xs

Owl Spacing

Owl spacing automatically adds margin between items within a container so you don't have to set them manually for every element.

owl--xxl

This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.

owl--xl

This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.

owl--l

This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.

owl--m

This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.

owl--s

This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.

owl--xs

This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.
This is a block of text. Double-click this text to edit it.

Padding

You can use the pad class to add all-around padding to a container.

pad--xxl

This is a block of text. Double-click this text to edit it.

pad--xl

This is a block of text. Double-click this text to edit it.

pad--l

This is a block of text. Double-click this text to edit it.

pad--m

This is a block of text. Double-click this text to edit it.

pad--s

This is a block of text. Double-click this text to edit it.

pad--xs

This is a block of text. Double-click this text to edit it.

pad--none

This is a block of text. Double-click this text to edit it.

Border Radius

You can use the rounded--[size] class to set the border radius of an element. If you want to use this class for buttons, you need to set the Border Radius for the button within the Advanced Settings > Border > Border Radius > Set Unit To None > Use var(--radius-[size])

rounded--circle

This is a block of text. Double-click this text to edit it.

rounded--xxl

This is a block of text. Double-click this text to edit it.

rounded--xl

This is a block of text. Double-click this text to edit it.

rounded--l

This is a block of text. Double-click this text to edit it.

rounded--m

This is a block of text. Double-click this text to edit it.

rounded--s

This is a block of text. Double-click this text to edit it.

rounded--xs

This is a block of text. Double-click this text to edit it.

Section Padding

pad-section--xxl

pad-section--xl

pad-section--l

pad-section--m

pad-section--xs

pad-section--none