Guide to Customizing Colors in MIZ

The MIZ framework offers extensive customization options for colors, allowing developers to define their own color palettes and easily use them in their projects. This guide explains how to customize colors using SCSS files.

Color Variables #

To customize colors in MIZ, there are several key variables:

1. color-palette: The color palette that you define.
2. backgrounds: Variable for background colors.
3. colors: Variable for text colors.
4. borders: Variable for border colors.

Creating Classes #

Using the color palette you have defined, you can create various CSS classes:

• For backgrounds: bg-<name>-color
• For colors: <name>-color
• For borders: border-<name>-color

Customization Methods #

The file for customizing colors is located at: MIZ/SASS/CONFIG/_COLORS.SCSS

Users can customize the color palette according to their needs and add the colors they want to use for backgrounds, borders, and text into the relevant variables.

To use the colors within the palette, users can utilize the ready-made classes. For example, if a user has a color named primary and wants to use it as a text color, the class would be:

Another method is to use it in a CSS file by utilizing the get-color(desired-color) function.

Colors #

Advanced Configuration #

Color configuration can be done according to the user's own color palette. Users can define various colors for different purposes and use them throughout the project.

                    
SCSS

                    
$backgrounds:(primary,code,secondary,section,card,button,menu,field,warning,success,danger,disabled,information,unCommon,specific,background,footer);
$colors:(icon,text,specific,primary,footer-text,footer-link,header-text,header-title-text,link-sidebar-text);
$borders:(border,primary);

$color-palette:(
    primary:#A11D1D,
    on-primary: #c97d7d,
    primary-light: #c97d7d8a,
    primary-dark: #FFFFFF,
    on-primary-light: #a11d1d2b,
    secondary: #FFFFFF,
    on-secondary: #495057,
    secondary-light: #FFFFFF,
)
                    
                

Tips and Best Practices #

• If a user wants to use a ready-made class, they must add the desired color name to the backgrounds, colors, or borders variables. Otherwise, they can only use the color within their own CSS files.
• Defining a comprehensive and suitable color palette can increase coherence and consistency in design.
• Using the get-color function can simplify and streamline coding.

Examples #

                    

                    
HTML

                    
<p class="all-border-large w-15 bg-footer-color on-primary-color p-2 txt-center">Example element color</p>
                    
                

                    

                    
HTML

                    
<p class="bg-primary-color on-primary-color w-50 txt-center all-border-small p-2">Example element background-color , color</p>
                    
                

                    

                    
HTML

                    
<p class="bg-on-primary-color primary-color border-primary-color border-width-4 border-solid w-100 txt-center all-border-small p-2">Example element background-color , color , border-color</p>