Including the Layout extension

The NICE UI library has a set of pre-defined layouts that have been designed to best convey information in a clean and readable format.

To include the layouts extension you need to include the following link in your HTML5 document <head>.

<!-- Layouts -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.layouts.css">

Combined

You will also get the layouts extension within the basic combined bundle.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.css">

The basic page layout

A basic document should follow the basic structure provided by the appropriate HTML elements body, header, footer and main

<body>
  <header role="banner">...</header>

  <main class="layout" role="main">
  ...
  </main>

  <footer role="contentinfo">...</footer>
</body>

Columns

As mentioned in our typography section on establishing a baseline the NICE UI library uses a baseline grid of 24px. This basic unit of measurement also extends to the horizontal grid giving us a consistent space between elements. This standard unit provides us with column widths of 72px on large screen devices when we use a 12 column grid. This gives us a maximum site width of 1176px which includes two gutters of 24px resulting in a maximum content width of 1128px. Visit Grid Calculator to see this in action.

Based on typical breakpoints, we have set our maximum site widths for each major breakpoint as follows:

Two column layouts

If within this basic page layout you wish to include related content or site navigation then you will also need to read about using the basic two column layout.

Advanced layout patterns

Narrow screen devices

Helpers