Design System overview

First look of our OxyMade design system

OxyMade CSS Framework is the Oxygen CSS Framework with ready to use utility classes based on Tailwind CSS syntax with a few optimized extra classes to create websites easily.

This article is gonna describe the structure of the framework and show you how it works.

We are using following color classes to design our blocks/templates:

You can see all the below classes in your manage -> selectors area.

All these below color classes are linked to our global color vars.

colors classes

These classes can be used on foreground elements like text.

color-primary
color-dark
color-paragraph
color-secondary
color-tertiary
color-light
color-paragraph-alt

background color classes

These classes can be used for element backgrounds.

bg
bg-tertiary
bg-secondary
bg-primary
bg-alt
bg-white
bg-black
bg-placeholder
bg-placeholder-alt

border color classes

These classes can be used for border colors.

border-color
border-color-alt
border-color-tertiary
border-color-secondary
border-color-primary

icons classes

These classes can be modified only if you apply them for icons.

icon-sm-primary
icon-md-primary
icon-lg-primary
icon-xl-primary
icon-sm-dark
icon-lg-dark
icon-sm-light
icon-lg-light
icon-xl-light
icon-2xl-light
icon-solid-sm-light
icon-sold-md-light
icon-solid-lg-primary

💡

To edit these utility classes, you need to disable the module merge and utility class locking in OxyMade framework modules area. You will learn it in the next steps.

Now, let’s move to utility classes part:

If you check the Global settings -> Headings, there are a few sizes imported with the framework, they are mostly the perfect heading sizes for any purpose. And in the selectors area, you can even check there are H1, H2, H3, H4, H5, H6 classes, which can be used to display mobile responsive text sizes for your headings.
You need to use/add these classes along with the regular headings in the Oxygen editor.
Go to our classes area, ( selectors) and go through all the category of classes to understand as they are self explanatory.
For paddings, margins, gap categories, you can see number of utility classes we have for all sizes. We have p-1, p-2, p-3 like that and there, each p-1 is 4 pixel padding, p-2 is 8 pixel padding, p-6 = 24 pixel padding as we are using 4 point system. Same applies for margin, gap as well.

We have many color related classes in our framework, which can dramatically speed up your website building experience.