Homepage
Blog
Support / Contact
My Account
April 30, 2020

CORE: Documentation & Cheat Sheet

CORE: Documentation & Cheat Sheet
Download a cheat sheet PDF to print or save for later!

First of all, thank you for purchasing the Core design set & framework by OxyNinja.

How to install WooCore

After the purchase, go to your account and download the OxyNinja plugin and the license key. You can install the OxyNinja plugin into your WP dashboard.

NOTE: Now, whether you want to use Core or WooCore design set, you will use only one central plugin. Download the newest version from your member area.

  • Go to Plugins → Add New and install the downloaded plugin
  • Go to Oxygen → Settings → Library → Tick “Enable 3rd Party Design Sets” and Add the license key downloaded with your purchase.
  • Now, open any page (new or existing) in Oxygen Builder. After the builder loads in your browser, you shall see a modal asking you to import selectors & stylesheets. Confirm and wait until the page saves on the background.

Note: You can trigger the import manually from Oxygen Builder → Manage → OxyNinja Import. Use this if the modal didn’t appear automatically or if you want to load new classes after an update.

More Plugin Features

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.

Requirements

  1. Oxygen Builder
  2. OxyNinja Plugin
  3. Minimal PHP Version 7

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.

Basic Rules

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:

c-icon-accent-m

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.

Columns

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.

c-columns-4

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.

Breakpoints

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

Gaps

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

DesktopLaptopTabletMobile LandscapeMobile PortraitColumn Gaps
c-columns-6c-columns-xl-5c-columns-l-4c-columns-m-3c-columns-s-2c-columns-gap-s
c-columns-5c-columns-xl-4c-columns-l-3c-columns-m-2c-columns-s-1c-columns-gap-m
c-columns-4c-columns-xl-3c-columns-l-2c-columns-m-1c-columns-gap-l
c-columns-3c-columns-xl-2c-columns-l-1c-columns-gap-xl
c-columns-2c-columns-xl-1c-columns-gap-xxl

Special columns for desktop

Columns classesRatio
c-columns-3-23 parts to 2 parts
c-columns-2-32 parts to 3 parts
c-columns-1-21 part to 2 parts
c-columns-2-12 parts to 1 part
c-columns-3-13 parts to 1 part
c-columns-1-31 part to 3 parts
c-columns-2-auto2 columns that are measured automatically. Useful for row layout with icon and text.

Grow columns by row or columns

ClassFunction
c-column-growGrow column to second column
c-row-growGrow column to second row

Margins & Paddings

Margin bottomMargin rightPadding
c-margin-bottom-xsc-margin-right-xsc-padding-xs
c-margin-bottom-sc-margin-right-sc-padding-s
c-margin-bottom-mc-margin-right-mc-padding-m
c-margin-bottom-lc-margin-right-lc-padding-l
c-margin-bottom-xlc-margin-right-xlc-padding-xl

Colors & Backgrounds

You can use a class to apply a background color or gradient to any sections or div. 

Backgrounds
c-bg-accent
c-bg-accent-alt
c-bg-light
c-bg-light-alt
c-bg-dark
c-bg-dark-alt
c-bg-gradient

Headings

To style a heading, add two classes. One with the size of the heading and second with a color.

Heading SizesHeading Colors
c-h1-fatc-heading-light
c-h1c-heading-dark
c-h2c-heading-accent
c-h3
c-h4
c-h5
c-h6

Text

To style a text paragraph, add two classes. One with the size of the text and second with a color.

Text SizesText Colors
c-text-sc-text-light
c-text-mc-text-dark
c-text-lc-text-accent
c-text-xl

Buttons

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 SizesButton StyleTransition
c-btn-sc-btn-mainc-transition
c-btn-mc-btn-alt
c-btn-lc-btn-transparent
c-btn-xl

Icons

In the case of icons, there is size and color in same class so you only need to apply one.

Accent IconsLight IconsDark Icons
c-icon-accent-sc-icon-light-sc-icon-dark-s
c-icon-accent-mc-icon-light-mc-icon-dark-m
c-icon-accent-lc-icon-light-lc-icon-dark-l

Cards

There are three basic styles of cards. They do not contain any padding, so you can also apply a padding class as explained above.

Cards
c-card-accent
c-card-dark
c-card-light

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).

Shape SizeShape ColorBackgroud color
c-shape-size-sc-shape-accentc-bg-accent
c-shape-size-mc-shape-accent-altc-bg-accent-alt
c-shape-size-lc-shape-lightc-bg-light
c-shape-size-xlc-shape-light-altc-bg-light-alt
c-shape-size-xxlc-shape-darkc-bg-dark
c-shape-dark-altc-bg-dark-at

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.

Avatars
c-avatar-xs
c-avatar-s
c-avatar-m
c-avatar-l
c-avatar-xl
c-avatar-full

Additional Classes

Here are also a few additional classes to help you style other elements. 

CardsExplanation
c-roundedBorder radius. Useful for images, etc.
c-shadowDefault shadow. Also useful for images or any other content.

Forms

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.

What are you missing?

Request Form
CORE
A popular Core framework & design set made for Oxygen Builder
Purchase Core
Core Documentation
Changelog
Live Sections
WOOCORE
The biggest WooCommerce design set for Oxygen Builder
Purchase WooCore
WooCore Documentation
Live Demo
close