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.

Container Classes and Design #

• 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 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>
        

Wide Class #

You can use the .wide class on a section to remove left and right paddings and make the content span the full width of the page. This is especially useful when you want to display banners, images, or other elements without side margins.

Here is the CSS definition for the .wide class:

          
CSS

          .section.wide {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
        

Example usage in HTML:

          
HTML

          <section class="section wide">
  <div class="container">
    <h1>Full-width Content</h1>
    <p>This section spans the full width of the page.</p>
  </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.