Step by step guide to understand, use & modify Monster design system
Install the framework
Activate the plugin
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)
If you check in the Oxygen editor -> Manage -> settings -> Global colors, you can notice a new set of colors.
Colors and their role:
Primary is the primary color we use through out the website, for buttons, headings, important elements, some backgrounds, etc.
Dark is the darkest color in the set, Used for headings.
Paragraph is the color which we use for paragraph text, not for headings.
Border is for border
Placeholder is for any element that needs to be little highlighted, where primary, secondary colors are overkill.
Background is a default background color through out the website,
Secondary is a secondary color which might be useful to highlight a few areas where primary is not suitable.
Light is exactly opposite of dark, and light is used for headings on high contrast backgrounds, mostly for primary or secondary color background areas.
Parapgraph alt is an alternative paragraph color which can be used on high contrast backgrounds.
Same way, border alt, placeholder alt are also can be used on high contrast background areas, like primary, secondary, or black backgrounds.
background alt is an alternative background to divide each block in a page.
Black and white are global colors and can be used whenever it is necessary.
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.
Our design system Global colors & Ids:
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.
icons category - These classes can be modified only if you apply them for icons.
To edit these utility classes, you need to disable the module merge and utility class locking in OxyMonster framework modules area.
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:
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.