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 FRAMEWORKGlobal Colors
These colors can be changed within the AutomaticCSS plugin under Colors. You can click the button below to get there faster.
Color SettingsPrimary
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--xsOwl 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.
