Responsive & Spacing in MIZ

This section explains breakpoints, header & boxed spacing, and configuration variables for responsive classes in the MIZ framework.

Breakpoints #

The $break-points variable defines screen widths for responsive classes.

            
SCSS

            // miz/sass/config/_responsive.scss

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

Rules:

• Only variables with responsive: true generate classes for each breakpoint.

• If count: 0, no classes are generated and the property is unavailable.

• You can add new breakpoints (e.g., es: 320px) and they will be used for responsive variables.

Example: $conf-width with custom breakpoints

            
SCSS

            // miz/sass/config/_responsive.scss

$break-points: (
    big: 1600px,
    medium: 1200px,
    small: 600px 
);
$conf-width: (
    count: 5,
    responsive: true
);

Generated CSS Output:

            
CSS

            .w-big-0 {
    width: 0%;
}
.w-big-1 {
    width: 25%;
}
.w-big-2 {
    width: 50%;
}
.w-big-3 {
    width: 75%;
}
.w-big-4 {
    width: 100%;
} 
@media screen and (max-width: 1200px) {
    .w-medium-0 {
        width: 0%;
    }
    .w-medium-1 {
        width: 25%;
    }
    .w-medium-2 {
        width: 50%;
    }
    .w-medium-3 {
        width: 75%;
    }
    .w-medium-4 {
        width: 100%;
    }
} 
@media screen and (max-width: 600px) {
    .w-small-0 {
        width: 0%;
    }
    .w-small-1 {
        width: 25%;
    }
    .w-small-2 {
        width: 50%;
    }
    .w-small-3 {
        width: 75%;
    }
    .w-small-4 {
        width: 100%;
    }
}

Header Space #

Horizontal

            
SCSS

            $header-space-horizontally: (81px, 70px, 50px, 25px, 20px);
        

Generated CSS with variables:

            
CSS

            .header {
    --padding-left: 81px;
    --padding-right: 81px;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
}
@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: 25px;
        --padding-right: 25px;
    }
}
@media screen and (max-width: 478px) {
    .header {
        --padding-left: 20px;
        --padding-right: 20px;
    }
}
        

Vertical

            
SCSS

            $header-space-vertically: (5rem, 4.5rem, 4rem, 3rem, 3rem);
        

Generated CSS with variables:

            
CSS

            .header {
    --padding-top: 5rem;
    --padding-bottom: 5rem;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
}
@media screen and (max-width: 1280px) {
    .header {
        --padding-top: 4.5rem;
        --padding-bottom: 4.5rem;
    }
}
@media screen and (max-width: 1024px) {
    .header {
        --padding-top: 4rem;
        --padding-bottom: 4rem;
    }
}
@media screen and (max-width: 767px) {
    .header {
        --padding-top: 3rem;
        --padding-bottom: 3rem;
    }
}
@media screen and (max-width: 478px) {
    .header {
        --padding-top: 3rem;
        --padding-bottom: 3rem;
    }
}
        

Important: Number of values in $header-space-horizontally and $header-space-vertically must match the number of breakpoints.

Boxed Space #

            
SCSS

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

Generated CSS with variables:

            
CSS

            .section {
    --padding-left: 81px;
    --padding-right: 81px;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
}
@media screen and (max-width: 1280px) {
    .section {
        --padding-left: 70px;
        --padding-right: 70px;
    }
}
@media screen and (max-width: 1024px) {
    .section {
        --padding-left: 50px;
        --padding-right: 50px;
    }
}
@media screen and (max-width: 767px) {
    .section {
        --padding-left: 25px;
        --padding-right: 25px;
    }
}
@media screen and (max-width: 478px) {
    .section {
        --padding-left: 20px;
        --padding-right: 20px;
    }
}
.section {
    --padding-top: 5rem;
    --padding-bottom: 5rem;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
}
@media screen and (max-width: 1280px) {
    .section {
        --padding-top: 4.5rem;
        --padding-bottom: 4.5rem;
    }
}
@media screen and (max-width: 1024px) {
    .section {
        --padding-top: 4rem;
        --padding-bottom: 4rem;
    }
}
@media screen and (max-width: 767px) {
    .section {
        --padding-top: 3rem;
        --padding-bottom: 3rem;
    }
}
@media screen and (max-width: 478px) {
    .section {
        --padding-top: 3rem;
        --padding-bottom: 3rem;
    }
}
        

Number of values must match breakpoints.

Configuration Variables (conf-*) #

- responsive: true → Classes generated for each breakpoint.

- responsive: false → Only standard classes, no breakpoints.

- count = 0 → No classes generated.

Example: $conf-gaps

            
SCSS

            $conf-gaps: (count: 5, unit: rem, factor: 0.5, responsive: true);
        

Generated CSS with custom breakpoints:

            
CSS

            .gap-large-0 {
    gap: 0rem;
}
.gap-large-1 {
    gap: 0.5rem;
}
.gap-large-2 {
    gap: 1rem;
}
.gap-large-3 {
    gap: 1.5rem;
}
.gap-large-4 {
    gap: 2rem;
}
@media screen and (max-width: 1000px) {
    .gap-medium-0 {
        gap: 0rem;
    }
    .gap-medium-1 {
        gap: 0.5rem;
    }
    .gap-medium-2 {
        gap: 1rem;
    }
    .gap-medium-3 {
        gap: 1.5rem;
    }
    .gap-medium-4 {
        gap: 2rem;
    }
}
@media screen and (max-width: 600px) {
    .gap-small-0 {
        gap: 0rem;
    }
    .gap-small-1 {
        gap: 0.5rem;
    }
    .gap-small-2 {
        gap: 1rem;
    }
    .gap-small-3 {
        gap: 1.5rem;
    }
    .gap-small-4 {
        gap: 2rem;
    }
}
        

Only variables with responsive: true use breakpoints; variables with count: 0 generate nothing.