Grid system

A grid is used to harmonize negative space in a layout.

Short description

Our application interface is based on a 12-column grid, with the exception for mobile where a 4-column grid is used to reduce complexity.

Columns, margins and gutters depend on the actual width of a browser's viewport, to adapt content to any possible screen size with set UI breakpoints. 

Behaviour

The sizing of the grid is closely connected to the density scaling of 32/24/16px depending on screen width and set breakpoints. The sidemenu is set to a fixed width of 256px and excluded from the grid.

Desktop wide

From 1440px width and above, gutters are set to 32px. The sidemenu and content area are scrollable within individually whilst the application bar and footer are fixed at the top and bottom respectively. Zone 3 content is placed adjacent to the Zone 2 for better usage of the available width. At 1920px the notification pane becomes sticky on the right of the viewport.

Desktop & Tablet landscape

Both margin and gutter are upped to 24px between a browser width of 1024px to 1439px. The sidemenu is removed from the application bar and is visible on the left side. The application bar and footer are now sticky in their corresponding locations.

Tablet portrait

From 768px up to 1023px, margin and gutter are set to 16px. Notifications and user profile are split and shown individually. The sidemenu is still divided in tabs residing in the application bar which is fixed at the top whilst the footer is still stacked in the bottom of all content.

Mobile

Margin is set to 0px and gutter to 16px. The sidemenu and application bar are converted to a tab bar where each area is grouped into a single point of entry. Notifications and user profile are merged and presented as a single tab. All items are stacked upon each other and not sticky.

This component does not have code yet.

Would you like to contribute? It's not difficult but please contact us for instructions on how to upload:

designlibrary@seb.se.

Thanks! :)

Desktop wide - extended

  • 12 columns
  • 32 px gutter
  • 32 px margin
  • Sidemenu & notifications panel excluded from grid
  • 1920 px - *

Grid - desktop wide - extended

Desktop wide

  • 12 columns
  • 32 px gutter
  • 32 px margin
  • Sidemenu excluded from grid
  • 1440 px - 1919 px

Grid - desktop wide

 

Tablet landscape (& desktop)

  • 12 columns
  • 24 px gutter
  • 24 px margin
  • Sidemenu excluded from grid
  • 1024 px - 1439 px

Grid - tablet landscape & desktop 

Tablet portrait

  • 12 columns
  • 16 px gutter
  • 16 px margin
  • 768 px - 1023 px

Grid - tablet portrait

 

Mobile

  • 4 columns (12 columns)
  • 16 px gutter
  • 0 px margin
  • Tab bar (no sidemenu)
  • 320 px-767 px

Grid - mobile