MIZ Framework Customization Guide

This document provides a comprehensive guide to customizing and configuring the MIZ framework, including colors, paths, reset styles, services, and responsive behavior.

To apply the changes, you can download the ready-to-use configuration file and use it accordingly.

Color Settings #

MIZ allows you to define custom color palettes and automatically generate ready-to-use color utility classes. Three main SCSS variables control color generation:

• $backgrounds – background colors
• $colors – text colors
• $borders – border colors

To generate a utility class, the color name must exist in the related variable. For example, if primary is defined in $backgrounds, the class .bg-primary-color will be generated.

Defining Color Palettes

    

        
SCSS

    
    $light-color-palette: (
    primary: #1a73e8,
    on-primary: #ffffff,
    primary-light: #e8f0fe,
    primary-dark: #174ea6
);

$dark-color-palette: (
    primary: #8ab4f8,
    on-primary: #202124
);

$color-palette: (
    default: $light-color-palette,
    colors: (
        light-palette: $light-color-palette,
        dark-palette: $dark-color-palette
    )
); 

With this structure you can define multiple themes (such as light and dark). MIZ dynamically generates CSS classes from these palettes.

Using Colors in SCSS

    

        
SCSS

    
    .my-button {
    background-color: get-color(primary);
    color: get-color(on-primary);
    border: 1px solid get-color(border);
} 

HTML Examples

    

        
HTML

    
    

        
Sample text
    
    <p class="on-primary-color bg-primary-color p-2">Sample text</p>

Paths Configuration #

MIZ allows you to configure project folder paths using SCSS variables. These settings are defined in miz/sass/config/_path.scss.

    

        
SCSS

    
    $assets-path: '../';
$media-path: '#{$assets-path}media/';
$images-path: '#{$media-path}images/';
$videos-path: '#{$media-path}videos/';
$audios-path: '#{$media-path}audios/';
$fonts-path: '#{$assets-path}fonts/';
$css-path: '#{$assets-path}css/';
$js-path: '#{$assets-path}js/';
$vendors-path: '#{$assets-path}vendors/'; 

You can use helper functions like get-image() to automatically resolve asset paths:

    

        
SCSS

    
    background-image: url(get-image("background-hero.webp"));

CSS Reset #

The _reset.scss file contains base reset styles. The variable $reset controls whether these styles are applied.

    

        
SCSS

    
    body, p, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol, li { padding: 0; margin: 0; list-style: none; }
a { text-decoration: none; color: black; }
button { border: none; } 

Size & Utility System #

The utility system generates helper classes for border radius, opacity, aspect ratio, z-index, and border width.

Border Radius

    

        
SCSS

    
    $border-radius: (
    small: 5px,
    normal: 10px,
    large: 25px,
    full: 1000px
    none: 0px,
); 

Opacity

Opacity classes are generated using a factor value, producing classes like .opacity-5 → opacity: 0.5.

Responsive System #

Breakpoints are defined in _responsive.scss. All configuration variables with responsive: true generate breakpoint-specific classes.

    

        
SCSS

    
    $break-points: (
    xxl: 1920px,
    xl: 1280px,
    lg: 1024px,
    md: 767px,
    sm: 478px
);

Bricks Builder #

You can seamlessly integrate MIZ into your project built with Bricks Builder. To connect MIZ, simply download the framework package, generate the final CSS output, and import it into Bricks using the Style Manager. Once imported, all utility classes and CSS variables will be available directly inside your builder environment.

After downloading the ZIP file, extract it and configure your desired settings (such as breakpoints, spacing, typography, and utilities). Then generate the final CSS build file. This compiled CSS file is the one you will import into Bricks Builder.

Whenever you update your MIZ configuration, simply generate a new build and replace the previous CSS file inside Bricks to keep everything synchronized.

Summary #

MIZ provides a powerful and flexible configuration system. By adjusting SCSS variables you can control colors, spacing, utilities, and responsive behavior while keeping your project consistent and maintainable.