Grids

Overview

Indigo provides a responsive grid system based on the Bootstrap framework. As in Bootstrap, Indigo’s grid system consists of twelve columns. Developers can specify the number of columns an element will span and whether that number should change depending on screen width. Grids may also be nested within other grids.

Example

The following example creates two rows of elements. The first row consists of three evenly sized elements and the second row consists of two differently sized elements. The number at the end of the class name corresponds to the column size. For example: indi-col-xs-4 spans 4 columns. If the sum of the columns in a row is less than 12, then there will be a space at the right end of the row equal to the number of columns remaining. If the sum is greater than 12, any elements on the right with column counts that bring the sum above 12 will be moved to the next line.

The rows will be the same length as each other and the elements will maintain their proportions no matter the width of the screen. This is because the elements are using the “xs” column style and no others. See the next section, Responsive Design, for more details on column sizes.

Responsive Design

The grid system has built in responsive behavior and is designed to be mobile first with 3 breakpoints.

• xs = All viewport widths.
• sm = Viewport width above 768px wide.
• md = Viewport width above 992px wide.
• lg = Viewport width above 1200px wide

The following example creates three rows of elements. The first row’s elements will be stacked when the viewport width falls below 768px and will otherwise be equally sized, displayed horizontally.

Resize your browser viewport to see the responsive behavior of this example:

The next example will have equal sized columns of 4 if the viewport width is less than 1200px. And when the viewport is above 1200px wide the first two columns will change to be 3 columns wide each and the last column will be 6 columns wide.

Resize your browser viewport to see the responsive behavior of this example:

The next example contains two evenly sized elements side by side when the viewport is less than 992px wide, and stacked above 992px wide. This demonstrates the grid system’s behavior when specifying class names for different breakpoints. If the a class name for a column below a given threshold is not defined, it will stack.

Resize your browser viewport to see the responsive behavior of this example:

Nested Grids

Grids can be nested within the column elements of other grids. The following example shows a row with two columns where the second column contains another grid of two rows, each with three columns.

Nested grids behave in exactly the same way as any other grid. When nesting a grid, it is important to take into consideration the default gutter width of 30px, which may take up a lot of space.

Offset Columns

There may be cases where some of the columns in a grid should be empty. Rather than creating empty elements spanning these columns, the grid system offers classes for offsetting a given element by some number of columns.

In this example, the row specifies two elements where the element on the right is always offset by two columns, regardless of the number of columns the element on the left spans.

Spacing

The margins and padding of row and column elements can be overridden, but come with default values. The following example illustrates a row with two evenly sized elements. The margin values are defined by the row class and the padding values are defined by the column classes.

Rows have left and right margins of -15px and columns have left and right padding of 15px. These values are maintained regardless of screen width.

Class Names