Skip to main content

Grid System

The Atlas Grid system is a fully responsive, robust, 12 column layout system with five default breakpoints. It’s fundamental to everything we design, and the geometric foundation of all high-level layouts.

Glossary

Columns

There are 12 columns in the responsive grid system. Column widths change with the size of the grid.

Gutters

Gutters are the gaps between the columns. Gutter widths are fixed values (16px, 24px, etc.) based on breakpoints.

Grid margins

Grid margins are the outer margins of the grid. They can be the same width as the gutters or greater.

Layout regions

Areas of the layout that contain the content. Layout regions can span over any number of columns and resize with the grid. Layout components can be used as a region, such as Tile and Panel.

Grid Types

Fluid

Fluid Atlas Grid

The fluid layout does not impose any width restrictions to page containers, so elements expand across the screen to fill all available space. By default the grid will make use of fluid width columns. It will calculate margins and gutters first, then the column width will adjust to fill any remaining space.

Use fluid grid layouts for any type of dashboards with multiple Panels, large data tables, or large lists of structured content.

Fixed

Fixed Atlas Grid

To prevent the grid from scaling, a maximum page container width can be set. At that point the grid will become fixed, with known values for column size. Fixed grids are always centered and the outer margin grows/shrinks when the window is resized.

Use fixed grid layouts for large amounts of text, linear tasks, and forms.

Breakpoints

Breakpoints allow for the layout to change on different screen sizes, so that the experience is always optimised for the device and browser width the user’s viewing it on. Breakpoints are defined as min-width attributes. This means that screen sizes in between two defined breakpoint dimensions will inherit all dimensions of the breakpoint of smaller size. Column widths are fluid and equate to 8.33% width of the grid.

BreakpointMin. WidthGuttersMargin Left/RightWidth FluidWidth Fixed
x-small-8px16px100%100%
small480px12px16px100%100%
medium720px16px24px100%100%
large1200px24pxauto100%1080px
x-large1400px24pxauto100%1272px

Responsive Gutters

The gutter width depends on the current breakpoint. This allows the grid to maintain a visual balance on larger and smaller viewports.

Margins

Grid Margins

Grid margins are the outer margins of the grid layout. Margins are turned on by default, but are totally optional, except for fixed grid layouts (where the margin always equals window width - 1076px / 2). Do not use margins, when the grid layout should go from edge to edge, which often applies to nested grids.

Layout Regions

Layout Regions

Layout regions are regions defined by the designer and allow for responsive layouts. Widths are defined by the number of columns they span at each breakpoint, which allows for layouts to change and optimize for any screen size. The margin between rows should always match the current gutter width (changes based on breakpoints). Complex responsive designs should always be specced out for all breakpoints, either with separate designs, or in written form for the developers to apply the correct column spans to regions.

Layout regions do not have any internal spacing, but need to comply with our spacing guidelines. At minimum, they are equal in height to the components composed within them.

Columns

Columns

Layout regions can span any number of columns and are separated by the grid gutter. Layouts can change at any of the designated breakpoints.

The page content does not always need to span across exactly 12 columns; it can occupy a smaller region in the center of the page. When using offset columns, consider using the fixed grid variant instead.

Fixed Elements

Fixed Sidebar Element

Fixed Elements, such as the sidebar navigation will offset the grid by the width of the component. The responsive grid typically fills 100% of the viewport. When a fixed element is present, the grid fills 100%, minus the width of the fixed component. For example, on a screen with a collapsed left sidebar, the responsive grid will be 100% - 72 px, with the offset on the left to account for the sidebar navigation panel.

Best Practices

  • Keep layouts simple and prevent extensive grid nesting (maximum nesting should be 3 levels).
  • Maximum line length should span up to eight columns, which is the ideal size for all content types. Do not go over this size for normal text.
  • Don’t overuse the grid: layout regions should be the only elements that align to grid columns, while the content within layout regions can be, but doesn’t have to be aligned to columns.

Examples

Fluid Grid applied to a responsive Dashboard

Dashboard Medium

Breakpoint: medium; all Panels are rendered in full width.

Dashboard Large

Breakpoint: large; all Panels are rendered in full width, but consider using 6 column layout regions for Panels that contain large scale graphs, or table with a lot of data.

Dashboard Extra Large

Breakpoint: extra large; some Panels can make use 6 column layout regions, or less. Consider using the full 12 columns for Panels that contain a lot of data and would otherwise require the user to scroll horizontally.

Fixed grid used on a Wizard

Wizard Medium

Breakpoint: medium

Wizard Large

Breakpoint: large

Wizard Extra Large

Breakpoint: extra large