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.

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

Now, let’s move to utility classes part:

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

  2. Go to our classes area, ( selectors) and go through all the category of classes to understand as they are self explanatory.

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