Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Grid system & spacing

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

Guidelines

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.

Spacing

Above: Spacing and typographic size details in a form/wizard

Above: Spacing details in a form/wizard

Above: Spacing details in a form/wizard

What is rem?

Specification

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 

Subsections

Page last updated

Feedback

Was this page helpful?