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 #

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
• $w-list: To customize class names for width, use the $w-list variable in miz/sass/kernel/responsive/layouts/_dims.scss
• $conf-height: The configuration variable for height is $conf-height, located in miz/sass/config/_dims.scss
• $h-list: To customize class names for height, use the $h-list variable in miz/sass/kernel/responsive/layouts/_dims.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.

Documentation and 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
);
                  
SCSS

                

Also, by using the count setting, users can specify the number of classes they want. For example, if the count value is 50, the classes will be incremented from 0 by 2 until reaching 100.

Advanced Configuration #

For the count setting, if a user sets the value to 50, the classes will be generated as follows: from 0 to 100 incremented by 2. The MIZ framework uses the formula (count / 100) to determine the number of classes.