Grid and layout

Grid and layout

A layout is a structural template that supports consistency across applications by defining visual grids, spacing, and sections

Grid

We're using Bootstrap as a starting point for our styling, it includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Check the Grid System for details.


1
1
1
1
1
1
1
1
1
1
1
1
8
4
4
4
4
6
6

Vertical rhythm

The Baseline Grid uses horizontal alignments to arrange typography. The bottom of each line of text sits at equal vertical increments.

Vertical Rhythm is the relation between the structural height and spacing of vertically stacked elements. Just like a horizontal grid achieves harmony by restricting the layout to a set of predefined unit sizes, the vertical rhythm solidifies the structure by offering consistent, predictable measures as the user scrolls down the content.

To keep the layout in rhythm, use the "soft grid" method by setting multiples of 8 to define padding, margin and increments between both block and inline elements.


Application layout

The layout is composed by 4 main sections:


1 Navigator
Holds the current application's main navigation with main icon on the top.
It may be collapsed to the left.

2 Header
Contains page title, breadcrumbs, page actions module, app switcher, user account and the navigator toggle button.
Optionally it may contain a search module or quick links for common operations.

3 Quicklinks
Access to quicklinks and help/support sections.
It may be collapsed to the right.

4 Main content
Uses the horizontal grid and can be of infinite length.

Page Layout

Main content

The main content section uses a 12 columns grid and expands vertically.

The body content may have 3 different layouts:


Full width


Full width

Takes 100% of the available width. Use it only for displaying records list, card groups or dashboards.

2 Columns


Two columns

The available width is split in half. Useful for displaying content with no clear hierarchy.

Sidebar


Sidebar

Content ranges from 66% to 75% of the available width, use an optional sidebar on the right for displaying controls or related information.

Tabbed content

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects.

On small screens ( <768px) the tabs are replaced by a select.


Horizontal Tabbed Layout


Horizontal tabbed layout

Use only when you have less than 5 sections. Each tab content is treated as main content.

Vertical Tabbed Layout


Vertical tabbed layout

The width is divided in two columns, the first one (~180px) is used for the tabs, the second for the tab content.