“Grid” Design Component

Design: zeplin.

The IxDF UI Kit grid system provides a structure for consistent page layouts, as well as for optimizing how content is displayed on different viewport sizes. The responsive grid system is fluid on small to medium viewport sizes and fixed on large sizes.

Grid Breakpoints

Name	Viewport size range
Small	767px and below
Medium	768px to 1055px
Large	1056px and above

Grid on Small Viewport

For small viewports (767px and below), the grid takes the whole screen minus the fixed 16px margins on both sides of the column.

Grid on Medium Viewport

Medium viewports between 768px and 1055px have a flexible 12-column grid. The grid is based on fixed-width gutters and margins, and flexible-width columns. Margins are fixed at 16px, gutters are fixed at 24px and columns take up the remaining space.

Grid on Large Viewport

On large viewports (1056px and above), the IxDF UI Kit uses a fixed grid system. Columns are fixed at 56px, gutters are fixed at 32px and margins take up the remaining space.

Usage

To be able to use grid spacing as defined above we have created 2 classes that can be combined to achieve the required functionality.

<div class="gridContainer">
    <div class="gridContent">Actual Page Content</div>
</div>

To use the 12 column grid, just add the grid row and columns to the grid content.

<div class="gridContainer">
    <div class="gridContent">
        <div class="row">
            <div class="col-md-4">
                4 Column wide content
            </div>
            <div class="col-md-4">
                4 Column wide content
            </div>
            <div class="col-md-4">
                4 Column wide content
            </div>
        </div>
    </div>
</div>