Col Method One

Overview #

In the MIZ framework, there are two methods for creating Cols and organizing content in a Col layout. In this section, we will examine the first method, which is done using the col classes. This method allows you to divide columns into various sections as specified by the user.

Basic Col Classes Using col #

In the first method, Col creation is done using the col classes. For instance, if you set the number of columns to 12, the MIZ framework will create col classes from 1 to 12. This allows you to place content flexibly on the page.

How to Use #

To use the col classes in MIZ, follow these steps:

1. Define Rows: First, define a row using the row class.
2. Add Columns: Then place your columns within the rows using the col-1 to col-12 classes.

Practical Examples #

Example 1: Dividing the Page into Three Equal Columns

                    

                    
HTML

                    <div class="container row">
    <div class="col-4 bg-primary-color">
        <p class="txt-center">4 of 12</p>
    </div>
    <div class="col-4 bg-on-primary-color">
        <p class="txt-center">4 of 12</p>
    </div>
    <div class="col-4 bg-primary-color">
        <p class="txt-center">4 of 12</p>
    </div>
</div>

Example 2: Dividing the Page into Two Columns with Different Proportions

                    

                    
HTML

                    <div class="w-100 container flex-row justify-content-center align-items-center">
    <div class="col-4 p-2 bg-primary-color txt-center">
        First column content
    </div>
    <div class="col-4 p-2 bg-on-primary-color txt-center">
        Second column content
    </div>
    <div class="col-4 p-2 bg-border-secondary-color txt-center">
        Third column content
    </div>
</div>

Example 3: Dividing the Page into Two Columns with Different Proportions

                    

                    
HTML

                    <div class="w-100 row">
    <div class="col-2 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        2 of 12
    </div>
    <div class="col-2 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        2 of 12
    </div>
    <div class="col-2 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        2 of 12
    </div>
    <div class="col-2 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        2 of 12
    </div>
    <div class="col-2 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        2 of 12
    </div>
    <div class="col-2 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        2 of 12
    </div>
</div>
<div class="w-100 row">
    <div class="col-4 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        4 of 12
    </div>
    <div class="col-4 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        4 of 12
    </div>
    <div class="col-4 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        4 of 12
    </div>
</div>
<div class="w-100 row">
    <div class="col-12 py-2 border-width-1 border-solid border-color bg-primary-color txt-center">
        12 of 12
    </div>
</div>

Customizing the Col #

You can adjust the number of columns and the size of each column according to your specific needs. To do this, simply use the appropriate col classes with the correct numbers to properly place your content on the page.

The number of columns is controlled by the $conf-cols variable in miz/sass/config/_dims.scss

Key Points #

• Flexibility: Using the col classes, you can easily create responsive designs that display well on any screen size.
• Ease of Use: The col classes are very simple to use, allowing you to create various Cols without complex coding.