{{ price(itemPrices[licenseId]['promo_price']) }}
{{ price(itemPrices[licenseId]['price']) }}
{{ __('Free') }}

OxyNinja for Oxygen Builder

Ends in

Download OxyNinja for Oxygen Builder

Demo Link : https://oxyninja.com/help/core-documentation/

Summary from Demo
Username or Email
Remember Me

Lost Password?
CORE is a lightweight responsive and modern CSS framework created exclusively for Oxygen Builder.
It’s our flagship product and is used on all our current and future design sets. It helps you to achieve consistent results fast workflow and professional look even without strong design skills.
While there are many different CSS frameworks on the market Core is made in Oxygen using Oxygen native elements and is fully customizable using the UI.
When it comes to the customisation you are free to edit all classes to your taste and work with it as a tool that helps you improve the workflow.
Import selectors and CSS Grid stylesheet using OxyNinja plugin as explained in our quick start guide.
Note: If you encounter any bugs or issues always check if you are using the up to date version of plugins as we do not offer support for outdated plugins.
In Oxygen you can take advantage of auto-complete feature so adding classes is fast and easy. It will give you suggestions so if you write only columns you will already see bunch of them.
This is a great feature because you do not have to remember all classes at all. They have a logical naming so if you want a gap between columns just write “gap” in the class field and gap classes will pop up.
Each class has its specific purpose and should be used for such.
Eg. a class c-padding-m will give you a medium sized padding. If you want to have a bigger padding it’s a good approach to remove c-padding-m class and add c-padding-l class before changing padding values.
Read more tips & tricks on using Core Framework
Extensive integration of CSS grid is built into Core framework and is a fundamental in creating columns and all kind of grids in Core.
We have utility classes for columns column sizing (span) and column positioning (start).
S – XL is used in CSS grid classes for breakpoint indication.
To create a basic set of several columns add a DIV and include a base columns class and a responsive version to set your layout.
Here’s a bunch of classes for other types of columns.
Using a span class you can grow the column or row in the grid to a given number of cells. Calibrate it on smaller devices by adding breakpoint option to the class.
Reposition columns / rows in the grid completely on any breakpoint. Great for as simple task as reversing columns / rows order or completely reordering columns and rows in a complicated grid on smaller devices.
Read also our full tutorial on using SPAN & START classes when building grids.
There is a bunch of classes for paddings margins and gaps which you will use frequently.
All spacing classes has sizes from XS to XXL which are using identical value and are completely responsive based on VMIN value. So if you use c-padding-m and c-margin-bottom-m both classes will make a same medium sized space which makes the whole website look incredibly consistent.
They are using only one value on desktop which scales down with the screen size.
This grid shows the real size of all paddings from XXL to XS.
TIP: Learn using the same patterns when building layouts. Eg. use c-margin-bottom-m every time when you are separating H2 heading from columns or paragraph below.
For a heading use appropriate class like c-h1 for H1 heading and include a color class like c-heading-light for a light color of the heading. For a text choose a size like c-text-m and a color c-text-dark.
If you import a section with light heading from a design set but want to use a dark one instead change the class to c-heading-dark.
TIP: Pay attention to which class you are actually editing. If our class lock icon is green it indicates that you are editing a class.
Align your layouts quickly with these straightforward classes.
Here are main classes for 3 types of buttons and links. They have a default style but I recommend to edit them to what you like. By using only these classes you will get a consistent result across a whole site.
A Button / Link can be a “text link” or a DIV element and will typically include 3 classes. One for a style second for a size and a transition if required.
Here are our main and alt buttons from OxyNinja site.
All colors are paired to their matching colors in Oxygen global settings. It’s a recommended to change colors there instead of changing them inside of classes.
There are three basic styles of cards. They do not contain any padding so you can also apply a padding class as explained above or add a padding directly to the class if you intend to use only one size.
While you can build the card look with classes as explained above a separate class is useful so you can apply more design into one class (visual look hover :before or :after … ) that is only related to the card design.
Here is a bunch of handy classes that you will use frequently they are very straightforward.
There are three main sizes of icons in three theme styles.
Several classes for avatars / portraits useful for testimonials reviews authors etc. From XS to XL size.
Works on normal image or on div with a background image.
OxyNinja Core framework includes also a set of classes with hover effects 3D tilting or blurred backgrounds.
These hover effects are using transform property to move the element on hover. You can use it on buttons cards icons images and anything else.
This box used c-3d-left class
This box used c-3d-right class
You can blur the background behind the object by adding only one class to create that fancy effect of looking through frosted glass.
It may be great for boxes with opacity over an image background sticky headers etc. You can combine it with a background color with some opacity.

No comments found.
Login to post a comment
This item has not received any review yet.
Login to review this item
No Questions / Answers added yet.
Item details
Version 3.4.1
Category WordPress Plugins
Similar items
Oxy Extras Other Plugins
Recently viewed items

Cookies allows to display items in order you are interested in. By continuing to use our website, you accept our use of cookies, Privacy policy and terms & conditions.