April 30, 2020

Core Design Set Documentation

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:

  1. Add the obtained API key to your Oxygen Builder installation.
    1. Copy the API key you received with your purchase.
    2. 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
  2. Download the OxyNinja plugin from your purchase confirmation or members area.
    1. Install the plugin
    2. Go to any page or create a new one, and open the Oxygen Builder.
    3. 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)
    4. 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.

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?

Example of creating columns as explained below

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

Example of using margins and 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.

Made with love using Oxygen Builder and Core framework by OxyNinja.com

Copyright © 2020 OxyNinja.com
user