Responsive Design

Haze uses a series of rows, and columns to layout and align content. The grid system is built with flexbox and is fully responsive. Below is an example with a two equal-width columns across all devices and viewport widths, using the row and col classes.

    <div class="container text-center">
        <div class="row">
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
    </div>

The grid system can adapt across six default breakpoints, resulting in 7 device sizes. The default grid tiers are as follows:

More information on the brakpoints will be provided in the Layout/ Breakpoints section.

Containers are used to center the content horizontally.

• The class .container-fluid will spread the entire width of the viewport on all devices, disregarding the breakpoints.
• The class .container will add a horizontal padding in order to center the content in a fixed width for each breakpoint.
• The class .container-{breakpoint} will spread the entire width of the viewport until the specified breakpoint.

    <div class="container-fluid">
        <div class="container">
            <p class="text-center">Content</p>
        </div>
    </div>

More information on the containers will be provided in the Layout/ Containers section.

The grid system supports six breakpoints. These are based on the min-width media querries; Thus, they affect that specific breakpoint and all the above. For instance, the .col-lg-6 class applies to both the .col-lg class as well as the .col-xl and .col-xl classes.

You have the flexibility to create diverse layouts using the 12 available columns per row. Each column class specifies the number of template columns it spans. For example, .col-4 spans four columns. The column widths are set in percentages, ensuring consistent relative sizing across different screen sizes.

    <div class="container text-center">
        <div class="row">
            <div class="col-5">Column</div>
            <div class="col-7">Column</div>
        </div>
        <div class="row">
            <div class="col-7">Column</div>
            <div class="col-5">Column</div>
        </div>
    </div>

More information on the rows and columns, their intended use and customization, will be provided in the Layout/ Rows & Columns section.

Each column has horizontal padding (called a gutter) for controlling the space between them. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with .gx-* classes, vertical gutters with .gy-*, or all gutters with .g-* classes.

    <div class="container text-center">
        <div class="row">
            <div class="col gx-1">.gx-1</div>
            <div class="col gx-3">.gx-3</div>
            <div class="col gx-5">.gx-5</div>
        </div>
    </div>

More information on the gutters will be provided in the Layout/ Gutters section.