Grids

Overview

Indigo's grid system consists of twelve columns for desktop screens, eight for tablet screens, and four for mobile screens. Developers can specify the number of columns an element will span and whether that number should change depending on screen width. Grids can also be nested within other grids.

Design and Layout

The layout grid consists of three elements:

Columns: The areas where content aligns. Column sizes adjust based on the container size.

Gutter: The fixed space between columns, which remains the same regardless of container size changes.

Margin: The space between the outer columns and the container, which also remains the same regardless of container size changes.

Usage

The following example creates two rows of elements:

• The first row consists of three evenly sized elements.
• The second row consists of two differently sized elements.

The number at the end of the class name indicates the column size. For example: indi-col-xs-4 spans four columns.

• If there are fewer than 12 columns in a row, there will be a space at the right end of the row equal to the remaining columns.
• If there are more than 12 columns in a row, any elements on the right causing the total to exceed 12 will move to the next line.

Breakpoints

In the Indigo Design System, breakpoints are critical points where the layout grid adjusts to the container's width. These thresholds ensure our interfaces remain visually consistent and user-friendly across various device sizes. When a container crosses a breakpoint, it seamlessly shifts to an appropriate grid, reflecting our commitment to responsive design.

Fixed-Width Content

Content Width Specification: Content can be assigned a fixed width independent of other elements, matching the gutter width of its parent. This setup ensures adjacent content adheres to the outer grid, ideal for components like side-navs.

Grid Utilization for Content Positioning: Positioning content within cells requires specific layout grids chosen based on container size and breakpoints. For example, am 820 px container uses the 'Tablet - no margins' grid to align with the base grid's outer margins, leveraging the 'no margins' variant for sub grids.

Dos and Don'ts

Do

• Do align components, tiles, and type (outside of a container), to the columns.

Don't

• Don't take type off the column structure to achieve alignment.

Do

• Do align content to the columns.

Don't

• Don't align content to the gutters, which are reserved for spacing between content blocks.

Do

• Do keep intrinsic width components at their default width even if they do not span the columns.

Don't

• Don't stretch intrinsic width components to fill a grid. Not every piece of content needs to span the columns.

Class Names

Installation

Props