SAVE $120 - Special Black Friday Combo Offer -> Buy OxyMade + OxyMonster Lifetime for just $229 BUY IT NOW
OxyMade

Monster Design System

Monster design system video explanation.

Step by step guide to understand, use & modify Monster design system

  1. Install the framework
  2. Activate the plugin
  3. Install the base framework with colors and global styles.( select both checkboxes and explain that you are going to start with a blank design without using any design kit)
  4. If you check in the Oxygen editor -> Manage -> settings -> Global colors, you can notice a new set of colors.
  5. Colors and their role:
    1. Primary is the primary color we use through out the website, for buttons, headings, important elements, some backgrounds, etc.
    2. Dark is the darkest color in the set, Used for headings.
    3. Paragraph is the color which we use for paragraph text, not for headings.
    4. Border is for border
    5. Placeholder is for any element that needs to be little highlighted, where primary, secondary colors are overkill.
    6. Background is a default background color through out the website,
    7. Secondary is a secondary color which might be useful to highlight a few areas where primary is not suitable.
    8. Light is exactly opposite of dark, and light is used for headings on high contrast backgrounds, mostly for primary or secondary color background areas.
    9. Parapgraph alt is an alternative paragraph color which can be used on high contrast backgrounds.
    10. Same way, border alt, placeholder alt are also can be used on high contrast background areas, like primary, secondary, or black backgrounds.
    11. background alt is an alternative background to divide each block in a page.
    12. Black and white are global colors and can be used whenever it is necessary.
  6. 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.
  7. Go to our classes area, ( selectors) and go through all the category of classes to understand as they are self explanatory.
  8. 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.

Our design system Global colors & Ids:

Monster design system global colors

ID 1 = Primary color
ID 2 = Dark color
ID 3 = Paragraph color
ID 4 = Border color
ID 5 = Placeholder Color
ID 6 background Color
ID 7 = Secondary Color
ID 8 = Light Color
ID 9 = Paragraph Alternative Color
ID 10 = Border Alternative Color
ID 11 = Placeholder Alternative Color
ID 12 = Background Alternative Color
ID 13 = Tertiary Color
ID 14 = Black Color
ID 15 = White Color

We are using following color classes to design our blocks/templates:
You can see all the below classes in your manage -> selectors area.

  1. colors category
    1. color-primary
    2. color-dark
    3. color-paragraph
    4. color-secondary
    5. color-tertiary
    6. color-light
    7. color-paragraph-alt
  2. backgroundColor category
    1. bg
    2. bg-tertiary
    3. bg-secondary
    4. bg-primary
    5. bg-alt
    6. bg-white
    7. bg-black
    8. bg-placeholder
    9. bg-placeholder-alt
  3. borderColor category
    1. border-color
    2. border-color-alt
    3. border-color-tertiary
    4. border-color-secondary
    5. border-color-primary
  4. icons category - These classes can be modified only if you apply them for icons.
    1. icon-sm-primary
    2. icon-md-primary
    3. icon-lg-primary
    4. icon-xl-primary
    5. icon-sm-dark
    6. icon-lg-dark
    7. icon-sm-light
    8. icon-lg-light
    9. icon-xl-light
    10. icon-2xl-light
    11. icon-solid-sm-light
    12. icon-sold-md-light
    13. icon-solid-lg-primary

To edit these utility classes, you need to disable the module merge and utility class locking in OxyMonster framework modules area.

Disabling merge & utility classes locking to modify utility classes.

If any of the colors you see in your website Global colors editor are different, they might not work as they should if you use the color classes we have in our framework. So to match the ids with the color classes/selectors, better to check the global colors editor and compare the ids if they are perfect.

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

You can check all the color related classes here:

Monster design system color classes

Colors, BackgroundColor, BorderColor are the categories we have our color related classes.

If you see the class color property, you can see that we are using color id in the color input, which takes the color from the id that color is related to. This is the reason you need to match the colors & ids as we have in our design system.

How to change color classes with changed global colors:

Sometimes, changing color ids might not be the perfect for your setup, in that case, you can simply open the color selector and click on color and select the new color.

Changing color classes

Happy building sites with the Monster 😍

© 2020 OxyMade. All rights reserved.
Top crossmenu