First of all, thank you for purchasing the Core design set & framework by OxyNinja.
Copy / Paste – This feature works for Core customers only. If you have the plugin installed and Core design set API key added in Oxygen builder settings, you can copy and paste Core sections from the demo page. Just click the “copy” button on the demo page, go back to Oxygen and click the Ninja logo left from Structure button.
Manual Import – If you ever want to trigger the import manually, you can do so from Manage → OxyNinja → Start Import. This will not overwrite your existing stylesheets but will add missing ones.
Class Reset – Did you make a change that you want to revert to default state? Go to Manage → OxyNinja → Class Reset and include the name of the class. This will revert the class to its default values.
At this point, everything is installed and you are all set.
Don’t stop reading here, please.
Note: If you encounter any bugs or issues, always check if you are using the newest version of plugins, as we do not offer support for outdated plugins.
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:
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.
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.
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.
|Desktop||Laptop||Tablet||Mobile Landscape||Mobile Portrait||Column Gaps|
|c-columns-3-2||3 parts to 2 parts|
|c-columns-2-3||2 parts to 3 parts|
|c-columns-1-2||1 part to 2 parts|
|c-columns-2-1||2 parts to 1 part|
|c-columns-3-1||3 parts to 1 part|
|c-columns-1-3||1 part to 3 parts|
|c-columns-2-auto||2 columns that are measured automatically. Useful for row layout with icon and text.|
|c-column-grow||Grow column to second column|
|c-row-grow||Grow column to second row|
|Margin bottom||Margin right||Padding|
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.
|Heading Sizes||Heading Colors|
To style a text paragraph, add two classes. One with the size of the text and second with a color.
|Text Sizes||Text Colors|
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.
|Buttons Sizes||Button Style||Transition|
In the case of icons, there is size and color in same class so you only need to apply one.
|Accent Icons||Light Icons||Dark Icons|
There are three basic styles of cards. They do not contain any padding, so you can also apply a padding class as explained above.
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.
|c-rounded||Border radius. Useful for images, etc.|
|c-shadow||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.