Layout

In the MIZ framework, the Display section allows you to control how elements are displayed. With a variety of customizable classes, you can easily manage the display of elements, including hiding, showing, and setting the display type (block, inline, flex, grid).

File Structure #

The file for layout settings is located at: miz/sass/config/responsive/_layouts.scss

Basic Display Classes #

In MIZ, the basic classes for setting the display type of elements are as follows:

• d-none: display: none;

• d-block: display: block;

• d-inline: display: inline;

• d-inline-block: display: inline-block;

• d-flex: display: flex;

• d-grid: display: grid;

Custom Settings #

To customize display classes,

You can refer to the file miz/sass/config/_responsive.scss in the $conf-display variable. If its value is false, responsive mode is disabled, and if it is true, responsive mode is enabled.

                    

                    
HTML

                    <div class="w-100 d-flex justify-content-center align-items-center">
    <div class="d-inline p-2 border-box hover-color bg-primary-color">d-inline</div>
    <div class="d-block p-2 border-box hover-color bg-on-primary-color">d-block</div>
    <div class="d-inline-block p-2 border-box hover-color bg-primary-color">d-inline-block</div>
    <div class="d-none p-2 border-box hover-color bg-on-primary-color">d-none</div>
</div>
                

                    

                    
HTML

                    <div class="w-100 d-flex justify-content-center align-items-center">
    <div class="d-flex gap-1 primary-color border-1 border-solid mr-3 p-2 ">
        <p> HELLO </p>
        <p> MIZ </p>
    </div>
    <div class="d-grid g-2 border-box hover-color bg-on-primary-color p-2">
        <p> HELLO </p>
        <p> MIZ </p>
    </div>
</div>