Flex Grid - ZUI Documentation

Summary

A flexbox grid system which makes it possible to create responsive pages.

Order of classes

In order to make your application response you must define all four category of classes (xs, sm, md, lg). You have to make this explicit so that you have to think about how your application looks like on smaller devices.

There are no attributes defined for this pattern.

Name	Description
`zui-grid-container`	The class that defines a grid container.
`zui-grid-container-fluid`	The class that defines a fluid grid container.
`zui-grid-row`	The class that defines a row in the fluid grid.
`zui-grid-row-reverse`	The class that defines a row in the fluid grid which is reversed.
`zui-grid-xs-column-*`	A column in the flex grid where the star represents a number from 1 to 12. This size is only applied on extra small screens.
`zui-grid-sm-column-*`	A column in the flex grid where the star represents a number from 1 to 12. This size is only applied on small screens.
`zui-grid-md-column-*`	A column in the flex grid where the star represents a number from 1 to 12. This size is only applied on medium screens.
`zui-grid-lg-column-*`	A column in the flex grid where the star represents a number from 1 to 12. This size is only applied on large screens.
`zui-grid-xs-push-*`	Pushed the column to the left or right depending on whether or not the column is in a reversed row. This class is only active on extra small screens.
`zui-grid-sm-push-*`	Pushed the column to the left or right depending on whether or not the column is in a reversed row. This class is only active on small screens.
`zui-grid-md-push-*`	Pushed the column to the left or right depending on whether or not the column is in a reversed row. This class is only active on medium screens.
`zui-grid-lg-push-*`	Pushed the column to the left or right depending on whether or not the column is in a reversed row. This class is only active on large screens.

Name	Description
`zui-order`	A mixin that sets the order on a flex element.
`zui-flexbox`	A mixin that sets the flex display mode on an element.
`zui-flex`	A mixin that sets the flex mode on an element.
`zui-flex-wrap`	A mixin that sets the flex-wrap mode on an element.
`zui-flexgrid-cell`	A mixin that defines a cell in the flexgrid.
`zui-flexgrid-cells`	A mixin that defines a row of cells in the flexgrid.

Name	Description
`zui-flexgrid-class-container`	The name of the class used to define a flexgrid container.
`zui-flexgrid-class-container-fluid`	The name of the class used to define a fluid flexgrid container.
`zui-flexgrid-class-row`	The name of the class used to define a row in a flexgrid container.
`zui-flexgrid-class-row-reverse`	The name of the class used to define a row in a flexgrid container.
`zui-flexgrid-class-xs-column`	The prefix of the class used to define an extra small size column in a flexgrid container.
`zui-flexgrid-class-xs-push`	The prefix of the class used to push an element in an extra small size column in a flexgrid container.
`zui-flexgrid-class-sm-column`	The prefix of the class used to define a small size column in a flexgrid container.
`zui-flexgrid-class-sm-push`	The prefix of the class used to push an element in a small size column in a flexgrid container.
`zui-flexgrid-class-md-column`	The prefix of the class used to define a medium size column in a flexgrid container.
`zui-flexgrid-class-md-push`	The prefix of the class used to push an element in a mediumn size column in a flexgrid container.
`zui-flexgrid-class-lg-column`	The prefix of the class used to define a large size column in a flexgrid container.
`zui-flexgrid-class-lg-push`	The prefix of the class used to push an element in a large size column in a flexgrid container.
`zui-flexgrid-column-count`	The amount of columns to use in the grid.
`zui-flexgrid-media-query-xs`	The media query used to match extra small screens.
`zui-flexgrid-media-query-sm`	The media query used to match small screens.
`zui-flexgrid-media-query-md`	The media query used to match medium screens.
`zui-flexgrid-media-query-lg`	The media query used to match large screens.

Example

Markup

<div class="zui-docs-flexgrid">
    <div class="zui-grid-container">
        <div class="zui-grid-row">
            <div class="zui-grid-xs-column-12 zui-grid-md-column-4 zui-grid-lg-column-6">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
            <div class="zui-grid-xs-column-12 zui-grid-md-column-4 zui-grid-lg-column-6">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
            <div class="zui-grid-xs-column-12 zui-grid-md-column-4 zui-grid-lg-column-12">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
        </div>

        <div class="zui-grid-row-reverse">
            <div class="zui-grid-lg-column-3 zui-grid-lg-push-3">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
            <div class="zui-grid-lg-column-3">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
            <div class="zui-grid-lg-column-3">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
        </div>

        <div class="zui-grid-row">
            <div class="zui-grid-lg-column-4">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
            <div class="zui-grid-lg-column-4">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
            <div class="zui-grid-lg-column-4">
                <div class="zui-docs-flexgrid-column"></div>
            </div>
        </div>
    </div>
</div>