Containers

General Description #

Containers in the MIZ framework play a crucial role in structuring and organizing page elements. These containers allow you to divide different sections of the page in an orderly and manageable way. By using containers, you can create more complex and structured designs that improve the readability and efficiency of your code.

Basic Container Classes #

• section: The section class is used for <section> tags.
• container: The container class is used for the outermost <div> tag within a section.
• block: The block class is used for the outermost <div> tag within a container.
• div: The div class is used for <div> tags within a block.

Using Containers in Design #

Using containers in MIZ helps you logically and systematically divide different sections of the page. For example, a typical page structure can be organized as follows:

                    
HTML

                    <section class="section">
  <div class="container">
    <div class="block">
      <div class="div">
        <!-- Content -->
      </div>
    </div>
  </div>
</section>
                

Custom Settings #

To customize containers, you can use the relevant configuration files in the MIZ framework. By changing the values in these files, you can adjust the size, spacing, and other features of containers according to your specific needs.

Practical Examples #

Example 1: Using Containers to Structure a Section

                    
HTML

                    <div class="container">
    <div class="block">
      <div class="div">
        <h1>Title</h1>
        <p>Description text</p>
      </div>
    </div>
  </div>
</section>
                

Example 2: Structuring a Page with Multiple Sections

        
HTML

        <section class="section">
    <div class="container">
        <div class="block">
            <div class="div">
                <h1>First Section</h1>
                <p>Description text for the first section</p>
            </div>
        </div>
    </div>
</section>
<section class="section">
  <div class="container">
    <div class="block">
      <div class="div">
        <h1>Second Section</h1>
        <p>Description text for the second section</p>
      </div>
    </div>
  </div>
</section>
            

Using containers in this way allows you to easily manage and change the structure of your page.