Containers

Containers are the most basic layout element in Kognifai Design System. They have fluid-width (meaning they strive to be 100% wide all the time). They also add a default padding on the left and right side so we ensures a bit of breathing space between our content and the viewport edges.

While containers can be nested, most layouts do not require a nested container. If you think about your page as a hierarchy of boxes, the container is usually used outside your grid. See grid system for more details.

A bit simplified, it can look like this in HTML:

<div class="kx-container">
    <div class="kx-row">
        <div class="kx-col">
            <div>Component</div>
        </div>
        <div class="kx-col">
            <div>Component</div>
        </div>
        <div class="kx-col">
            <div>Component</div>
        </div>
    </div>
</div>

Container Width

To understand the maximum width of containers, we need to be aware of the box sizing it uses. In CSS we usually define box-sizing with either:

• content-box: It’s the default box-sizing, and gives you the default CSS box-sizing behaviour. If you set an element’s width to 100px, then the element’s content box will be 100 px wide, and the width of any border or padding will be added to the final rendered width.
• border-box: It tells the browser to account for any borders and padding in the value your specify for width and height. If you set at element’s width to 100 px, that 100 px will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it easier to size elements.

A kx-container always uses content-box as it’s box sizing. This way we can easily adjust the outside padding of a container without affecting it’s maximum width.

To calculate the total width we can use this table:

The class-names used to control max-width are modifiers, so they should always be used together with the base-class kx-container. Modifiers for container widths corresponds to out responsive breakpoints.

<div class="kx-container kx-container--tab-l">
    <!-- Container will stretch but never become wider than "large tablet" -->
</div>

Container Alignment

Use spacing utilities to align the container left, center or right.

• kx-mr--auto (aligns container to the left)
• kx-mx--auto (aligns container to the center)
• kx-ml--auto (aligns container to the right)

<div class="kx-container kx-container--tab-m kx-mr--auto">
    <!-- Container will stretch but never become wider than "medium tablet" -->
</div>

<div class="kx-container kx-container--tab-m kx-mx--auto">
    <!-- Container will stretch but never become wider than "medium tablet" -->
</div>

<div class="kx-container kx-container--tab-m kx-ml--auto">
    <!-- Container will stretch but never become wider than "medium tablet" -->
</div>

To test how containers look in a page, please have a look at the template layout. Try also to open it as a standalone page and resize your browser.