A layout is a structural template that supports consistency across applications by defining visual grids, spacing, and sections
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.
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.
The layout is composed by 4 main sections:
Holds the current application's main navigation with main icon on the top.
It may be collapsed to the left.
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.
Access to quicklinks and help/support sections.
It may be collapsed to the right.
Uses the horizontal grid and can be of infinite length.
The main content section uses a 12 columns grid and expands vertically.
The body content may have 3 different layouts:
Takes 100% of the available width. Use it only for displaying records list, card groups or dashboards.
The available width is split in half. Useful for displaying content with no clear hierarchy.
Content ranges from 66% to 75% of the available width, use an optional sidebar on the right for displaying controls or related information.
Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects.
On small screens (
Horizontal Tabbed Layout
Use only when you have less than 5 sections. Each tab content is treated as main content.
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.