The $break-points Variable in the MIZ Framework

Definition of $break-points

The $break-points variable is located in the miz/sass/config/_responsive.scss file and contains breakpoint values for creating responsive designs. The structure of this variable is as follows:

        

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

Adding New Values to $break-points

To add a new value to $break-points, you can simply append a new key-value pair to the variable. For example:

            

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

Generating Responsive Classes

When you add a new value to $break-points, the system automatically generates the corresponding responsive classes. For example, by adding es: 250px, the following classes are created:

            

                
CSS
                
            
            .d-es-block {
    display: block;
}

.d-es-none {
    display: none;
}
        

$header-space-horizontally Variable in MIZ Framework

Definition of $header-space-horizontally

The $header-space-horizontally variable is used to define the horizontal padding (left and right) for the header class at different screen sizes. The number of values in this variable must exactly match the number of breakpoints in the $break-points variable.

Example of Variable Definition

            

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

$header-space-horizontally: (81px, 70px, 50px, 17px, 16px);
        

Generated CSS Output

            

                
CSS
                
            
            .header {
    padding-left: 81px;
    padding-right: 81px;
}

@media screen and (max-width: 1280px) {
    .header {
        padding-left: 70px;
        padding-right: 70px;
    }
}

@media screen and (max-width: 1024px) {
    .header {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media screen and (max-width: 767px) {
    .header {
        padding-left: 17px;
        padding-right: 17px;
    }
}

@media screen and (max-width: 478px) {
    .header {
        padding-left: 16px;
        padding-right: 16px;
    }
}
        

Important Notes

Ensure the following when using $header-space-horizontally:

• The number of values in $header-space-horizontally must match the number of breakpoints in $break-points.
• The generated CSS automatically adjusts the horizontal padding for the header class based on screen size.

$boxed-space-horizontally & $boxed-space-vertically Variables in MIZ Framework

Definition of $boxed-space-horizontally & $boxed-space-vertically

The $boxed-space-horizontally and $boxed-space-vertically variables define the horizontal and vertical padding for the .section class at different screen sizes. The number of values in both variables must exactly match the number of breakpoints in the $break-points variable.

Example of Variable Definitions

            

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

$header-space-horizontally: (81px, 70px, 50px, 17px, 16px);
$boxed-space-horizontally: (81px, 70px, 50px, 17px, 16px);
$boxed-space-vertically: (5rem, 4.5rem, 4rem, 3rem, 3rem);
        

Generated CSS Output

            

                
CSS
                
            
            .section {
    padding-left: 81px;
    padding-right: 81px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media screen and (max-width: 1280px) {
    .section {
        padding-left: 70px;
        padding-right: 70px;
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .section {
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media screen and (max-width: 767px) {
    .section {
        padding-left: 17px;
        padding-right: 17px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media screen and (max-width: 478px) {
    .section {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}
        

Important Notes

Ensure the following when using $boxed-space-horizontally and $boxed-space-vertically:

• The number of values in $boxed-space-horizontally and $boxed-space-vertically must match the number of breakpoints in $break-points.
• The generated CSS automatically adjusts the padding for the .section class based on screen size.

Documentation for $conf-gaps Variable

The $conf-gaps variable is used to generate CSS classes related to the gap property. This variable is flexible and allows you to generate both responsive and non-responsive classes, depending on the value of its responsive property.

Properties of $conf-gaps

• count: Specifies the total number of classes to be generated. For example, if count is 20, classes from gap-0 to gap-19 will be created.
• unit: Defines the unit of measurement for the gap property, such as rem, px, or %.
• factor: Defines the increment step for the gap values. For example, with a factor of 0.5, the values will increase by 0.5rem for each subsequent class.
• responsive:
  • If true, classes will be generated for each breakpoint defined in $break-points, creating responsive variations (e.g., gap-xl-0, gap-lg-1).
  • If false, only standard, non-responsive classes (e.g., gap-0, gap-1) will be generated.

Example: CSS Output

Non-Responsive Classes (responsive: false)

            

                
SCSS
                
            
            .gap-0 {
    gap: 0rem;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}
        

Responsive Classes (responsive: true)

            

                
SCSS
                
            
            .gap-xxl-0 {
    gap: 0rem;
}

.gap-xxl-1 {
    gap: 0.5rem;
}

.gap-xxl-2 {
    gap: 1rem;
}

@media screen and (max-width: 1280px) {
    .gap-xl-0 {
        gap: 0rem;
    }
    .gap-xl-1 {
        gap: 0.5rem;
    }
    .gap-xl-2 {
        gap: 1rem;
    }
}

@media screen and (max-width: 1024px) {
    .gap-lg-0 {
        gap: 0rem;
    }
    .gap-lg-1 {
        gap: 0.5rem;
    }
    .gap-lg-2 {
        gap: 1rem;
    }
}
        

Let me know if this HTML structure works for you or if any changes are needed!