Customizing Sizes in MIZ

The MIZ framework offers extensive options for customizing sizes, including width and height. This guide explains how to customize sizes using SCSS variables.

Variables & File Structure #

In MIZ, the following variables are used for size customization:

• $conf-width: The configuration variable for width is $conf-width, located in miz/sass/config/_dims.scss
• $conf-height: The configuration variable for height is $conf-height, located in miz/sass/config/_dims.scss

Examples #

By using the responsive setting, users can specify whether they want to use the classes responsively. For example, if a user has a container that should be 100% wide on desktop and 50% wide on mobile, they can configure it as follows:

                  $conf-width: (
  count: 50,
  responsive: true
);
$conf-height: (
  count: 50,
  responsive: true
);
                  
SCSS

                

Customization Methods #

To customize width and height, you can use the $conf-width and $conf-height variables. These variables include two main settings:

1. count: A number that specifies the number of classes.
2. responsive: A value that determines whether the classes should be used responsively (true / false) .

Users can customize these settings according to their needs.