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 and Boxed Layouts #

The MIZ framework supports both wide and boxed layouts. You can configure these layouts in the configuration files. The wide layout stretches the container to the full width of the viewport, while the boxed layout restricts the container to a fixed width, centered on the page.

To change the configuration, update the layout settings in your configuration file:

            
Config

            
layout: 
  type: 'wide' # or 'boxed'
  width: '1200px' # applicable for boxed layout
            
        

Example of a page with colored sections, header, and footer in both layouts:

            
HTML

            
<header class="header">Header Content</header>
<section class="section bg-primary">
  <div class="container">
    <h1>Wide Section</h1>
    <p>This is a wide section.</p>
  </div>
</section>
<section class="section bg-secondary">
  <div class="container boxed">
    <h1>Boxed Section</h1>
    <p>This is a boxed section.</p>
  </div>
</section>
<footer class="footer">Footer Content</footer>
            
        

In the example above, the first section is wide, and the second section is boxed, demonstrating how you can design a complete page using both layouts.

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.