First of all, thank you for purchasing the Core design set by OxyNinja.
In order to start using the design set, you will need to do two simple things:
Add the obtained API key to your Oxygen Builder installation.
Copy the API key you received with your purchase.
Log in to your WordPress dashboard with Oxygen Builder installed, go to Oxygen -> Settings -> Library -> Enable 3rd party design sets and add the API key
Download the OxyNinja plugin from your purchase confirmation or members area.
Install the plugin
Go to any page or create a new one, and open the Oxygen Builder.
The modal screen appears and asks you, if you want to import selectors & stylesheets. Confirm (the page will save automatically so wait a few seconds before you leave that page)
Delete the plugin and regenerate CSS from Oxygen settings. Done. All selectors and stylesheets should be imported now.
You can add new sections to your pages easily by editing any page in Oxygen Builder and clicking ADD -> Library -> Design Sets -> Core
So, let’s jump right in.
I opted for simple class naming for ease of use and to actually make it really fast to work with. Let’s take a look at example class for basic explanation:
This class is for icon element, to display ACCENT color and M size of the icon.
You can see several parts of the class:
c = This is a prefix that is required to avoid conflicts with your existing classes if you decide to install core on the existing website. It’s included on all classes
icon =Keyword of a class.
accent =Color. You can choose from “accent”, “accent-alt”, “light”, “light-alt”, “dark”, “dark-alt”. These are all connected to their appropriate global colors in Oxygen settings.
m = This is the size. Most classes include S, M, L, XL. Some classes also include XS or XXL.
When you see a class like this, you can change classes by altering these values so you will still have consistent settings across the whole website. Let’s see how easy it is.
I decided to not use Flex for columns classes but CSS grid instead. Why? Because it’s freaking amazing! You’ll see why in a minute.
Here are some benefits:
Perfect gaps between columns without using paddings or margins, and without leaving an awkward gap on the side of the columns container.
Easy setup of columns by adding proper classes only to parent div container (you do not need to add percentage width to child elements)
Option to create advanced Grid layouts
Don’t worry, you can still use Flex columns, or column helper element from Oxygen Builder as you are used to. But in addition, you can utilize the power of the CSS Grid functionality if you decide to use classes defined in Core.
So, how does it work?
To create columns, add DIV to your section (section is not necessary but it has set the page width). You will apply all classes for setting up columns to this DIV.
Let’s say you want 4 columns on desktop.
Add this class to your DIV.
This will automatically create a 4 columns grid from any elements that are inside.
Then you may want to make it 2 columns on tablet. Here comes the breakpoints classes.
s = Mobile (up to 480px)
m = Mobile (up to 768px)
l = Tablet (up to 992px)
xl = Smaller desktop (up to 1400px)
So, the correct class in this case would be c-columns-l-2
To display only one column on smaller breakpoint you will use c-columns-s-1
You may also want to add a gap between columns. Again, there are several sizes (s, m, l, xl, xxl).
Add c-columns-gap-m to add a medium-sized gap.
How to align columns?
This is the great part. You can actually use alignment from Oxygen UI when you select row (stack child items horizontally), then apply alignment or stretch.
All columns classes
Special columns for desktop
3 parts to 2 parts
2 parts to 3 parts
1 part to 2 parts
2 parts to 1 part
3 parts to 1 part
1 part to 3 parts
2 columns that are measured automatically. Useful for row layout with icon and text.
Grow columns by row or columns
Grow column to second column
Grow column to second row
Margins & Paddings
Colors & Backgrounds
You can use a class to apply a background color or gradient to any sections or div.
To style a heading, add two classes. One with the size of the heading and second with a color.
To style a text paragraph, add two classes. One with the size of the text and second with a color.
To create a button, add a combination of these classes. You need a class with a style (colors, borders, shadows, hover,..) plus class with a size (text size and padding). Additionally I created a consistent class with transition which I add to buttons.
In the case of icons, there is size and color in same class so you only need to apply one.
There are three basic styles of cards. They do not contain any padding, so you can also apply a padding class as explained above.
SVG Shape Dividers
To add a shape divider to your page, select one from “Showcase” category in a library. There are few classes over the divider.
These shapes are made to be put in between of sections, but you can also use absolute positioning on bottom of the section (don’t forget to put “relative” position on section where you put the divider)
Note: You may need to check the stylesheet named “shape-dividers” after first import, because it may import colors by different IDs, so just change the color IDs for global colors in the stylesheet. You can find correct color IDs in Global Colors settings.
.c-shape-divider – this one is required to set the width, and will come defined with every shape divider.
.c-shape-size-… – This is the size (height) of the shape dividers. You can choose from s, m, l, xl, xxl.
.c-shape-accent – This is the color class. Define the color of the shape (bottom part). You can add .bg-… class to define the opposite part of the shape divider (background color).
Avatars / Portraits
There are classes for avatars / portraits useful for testimonials, reviews, authors, etc. There are separated again by sizes. It can be used for a background image or a normal image.
Here are also a few additional classes to help you style other elements.
Border radius. Useful for images, etc.
Default shadow. Also useful for images or any other content.
I used Fluent Forms for all forms in the set. If you use a section with the form included, you need to have Fluent Forms plugin installed and change the ID of the form in the Code Block within the imported section.
Let me know if you’re missing any kind of information in this documentation and I will add it promptly.
Thanks again for buying the product and enjoy building! I am here to help you at any time.
Made with love using Oxygen Builder and Core framework by OxyNinja.com