This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Design System documentation

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

Grid & layout

Use containers, grids and whitespace to build a structure and hierarchy on the page.

Usage

Page width

The default maximum page width is 1170px (73.125rem), but go wider if the content requires it.

Use a grid to lay out your content. To prevent long lines of text, content should sit in a column which is two-thirds of the page width.

Long lines reduce legibility, so all lines of text should be no longer than 70 to 80 characters.

Screen size

Design for small screens first using a single column layout.

Optimise for different screen sizes, but don’t make assumptions about specific devices.

See our responsive guidelines for further content on building mobile first responsive layouts.

Layout considerations

  • Know and understand how the information on the page will be used
  • organise content in terms of priority and group related content together
  • always consider how your layout will be shown on small screen devices
  • only exceed the maximum container width when your content requires it
  • keep the layout consistent when developing similar pages.

Containers

  • Containers have a maximum width (1170px or 73.125rem) and are centrally aligned horizontally
  • use the --full modifier to fill the available screen width when your content requires it
  • extend it in SASS via the %container placeholder for building custom components
  • don’t nest containers
  • add vertical spacing classes to containers to add margins and padding.

Container class example 


<div class="container mb-d">
    This is a container with a margin bottom
</div>
<div class="container container--full">
    This is a full width container
</div>

Container placeholder example 


.layout {
    @extend %container;

    &__body {
        @include grid;
    }
}

Grid system

We use a grid to structure our designs. Our grid is a mobile-first, responsive, fluid system based on a 12 column layout:

  • wrap grids in a .container to take care of maximum width and fluidity
  • grids fill the available space within their parent container
  • the grid is based on a fluid, responsive 12 column grid
  • grid items sit directly within grids
  • use .grid for grids and data-g for grid items
  • grids can be nested within infinitely nested
  • use mixins for generating layouts or components with semantic class names.

Grid items

Use the data-g attribute to create grid items:

  • specify how many of the 12 columns to span, e.g. data-g="3" or data-g="one-quarter" for spanning three of the twelve columns
  • there are also more human readable names like one-half, two-thirds, three-quarters etc, eg. data-g="two-thirds"
  • use breakpoint:columns to override the column width from a breakpoint e.g. data-g="6 md:3" or data-g="12 md:one-third"
  • grid item widths are mobile-first
  • if there are more than 12 items within a grid, the items simply wrap onto the next line.

Whole

Example

1 whole
1 whole

Source


<div class="grid">
    <div data-g="12"><div class="grid-example-item">1 whole</div></div>
    <div data-g="one-whole"><div class="grid-example-item">1 whole</div></div>
</div>

Halves

Example

1/2
1/2

Source


<div class="grid">
    <div data-g="6"><div class="grid-example-item">1/2</div></div>
    <div data-g="one-half"><div class="grid-example-item">1/2</div></div>
</div>

Thirds

Example

1/3
2/3

Source


<div class="grid">
    <div data-g="4"><div class="grid-example-item">1/3</div></div>
    <div data-g="two-thirds"><div class="grid-example-item">2/3</div></div>
</div>

Quarters

Example

1/4
1/4
1/4
1/4
1/4
1/4
2/4
1/4
3/4

Source


<div class="grid">
    <div data-g="3"><div class="grid-example-item">1/4</div></div>
    <div data-g="3"><div class="grid-example-item">1/4</div></div>
    <div data-g="3"><div class="grid-example-item">1/4</div></div>
    <div data-g="3"><div class="grid-example-item">1/4</div></div>

    <div data-g="one-quarter"><div class="grid-example-item">1/4</div></div>
    <div data-g="one-quarter"><div class="grid-example-item">1/4</div></div>
    <div data-g="two-quarters"><div class="grid-example-item">2/4</div></div>

    <div data-g="one-quarter"><div class="grid-example-item">1/4</div></div>
    <div data-g="three-quarters"><div class="grid-example-item">3/4</div></div>
</div>

Fifths

Example

1/5
2/5
2/5
2/5
3/5
1/5
4/5

Source


<div class="grid">
    <div data-g="one-fifth"><div class="grid-example-item">1/5</div></div>
    <div data-g="two-fifths"><div class="grid-example-item">2/5</div></div>
    <div data-g="two-fifths"><div class="grid-example-item">2/5</div></div>

    <div data-g="two-fifths"><div class="grid-example-item">2/5</div></div>
    <div data-g="three-fifths"><div class="grid-example-item">3/5</div></div>

    <div data-g="one-fifth"><div class="grid-example-item">1/5</div></div>
    <div data-g="four-fifths"><div class="grid-example-item">4/5</div></div>
</div>

Nested grids

  • Grids can be nested infinitely

Example

1/2
1/2
1/2
1/2
1/2
1/2
1/2
1/2

Source


<div class="grid">
    <div data-g="one-half">
        <div class="grid-example-item">
            <div>1/2</div>
            <div class="grid">
                <div data-g="one-half">
                    <div class="grid-example-item">1/2</div>
                </div>
                <div data-g="one-half">
                    <div class="grid-example-item">
                        <div>1/2</div>
                        <div class="grid">
                            <div data-g="one-half">
                                <div class="grid-example-item">1/2</div>
                            </div>
                            <div data-g="one-half">
                                <div class="grid-example-item">1/2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-g="one-half">
        <div class="grid-example-item">
            <div>1/2</div>
            <div class="grid">
                <div data-g="one-half">
                    <div class="grid-example-item">1/2</div>
                </div>
                <div data-g="one-half">
                    <div class="grid-example-item">1/2</div>
                </div>
            </div>
        </div>
    </div>
</div>

Responsive grids

  • grids are mobile first
  • use xs:, sm:, md:, lg: and xl: for different screen size
  • use our breakpoints.

Example

*
*
*
*
*

Source


<div class="grid">
    <div data-g="12 sm:6 md:4 lg:one-third">
        <div class="grid-example-item">*</div>
    </div>
    <div data-g="12 sm:6 md:4 lg:one-third">
        <div class="grid-example-item">*</div>
    </div>
    <div data-g="12 sm:6 md:4 lg:one-third">
        <div class="grid-example-item">*</div>
    </div>
    <div data-g="12 sm:6 md:4 lg:one-third">
        <div class="grid-example-item">*</div>
    </div>
    <div data-g="12 sm:6 md:4 lg:one-third">
        <div class="grid-example-item">*</div>
    </div>
</div>

More about responsive design

Other grid features

Use BEM modifiers for grids features. Use grid features when needed to suit the presentation of content.

Reversed

The .grid--rev modifier renders the grid it in the opposite order to the source order. This is useful for stacking things in the correct order on mobile devices.

Example

first in the source
second in the source

Source


<div class="grid grid--rev">
    <div data-g="one-half">
        <div class="grid-example-item">first in the source</div>
    </div>
    <div data-g="one-half">
        <div class="grid-example-item">second in the source</div>
    </div>
</div>

Gutterlesss

Remove the gutter between grid items with the .grid--gutterless modifier. Generally used for small components nested within other grids, or when you need to closely relate two pieces of information.

Example

something
else

Source


<div class="grid grid--gutterless">
    <div data-g="one-quarter push:one-quarter">
        <div class="grid-example-item">something</div>
    </div>
    <div data-g="one-quarter push:one-quarter">
        <div class="grid-example-item">else</div>
    </div>
</div>

Compact

Use smaller gutters between grid items with the .grid--compact modifier

Example

1/4
1/4
1/4
1/4

Source


<div class="grid grid--compact">
    <div data-g="one-quarter">
        <div class="grid-example-item">1/4</div>
    </div>
    <div data-g="one-quarter">
        <div class="grid-example-item">1/4</div>
    </div>
    <div data-g="one-quarter">
        <div class="grid-example-item">1/4</div>
    </div>
    <div data-g="one-quarter">
        <div class="grid-example-item">1/4</div>
    </div>
</div>

Loose

Use larger gutters between grid items with the .grid--loose modifier. A loose grid is generally used for layouts and container components.

Example

1/5
3/5
1/5

Source


<div class="grid grid--loose">
    <div data-g="one-fifth">
        <div class="grid-example-item">1/5</div>
    </div>
    <div data-g="three-fifths">
        <div class="grid-example-item">3/5</div>
    </div>
    <div data-g="one-fifth">
        <div class="grid-example-item">1/5</div>
    </div>
</div>

Right aligned grids with the .grid--right modifier

Example

right
right

Source


<div class="grid grid--right">
    <div data-g="one-quarter">
        <div class="grid-example-item">right</div>
    </div>
    <div data-g="one-quarter">
        <div class="grid-example-item">right</div>
    </div>
</div>

Centered

Centrally aligned grids with the .grid--center modifier

Example

centered
centered

Source


<div class="grid grid--center">
    <div data-g="one-quarter">
        <div class="grid-example-item">centered</div>
    </div>
    <div data-g="one-quarter">
        <div class="grid-example-item">centered</div>
    </div>
</div>

Push/pull

Pull grid items left with pull:X or push them right with push:X

Example

pull
push

Source


<div class="grid grid--center">
    <div data-g="3 pull:1">
        <div class="grid-example-item">pull</div>
    </div>
    <div data-g="3 push:1">
        <div class="grid-example-item">push</div>
    </div>
</div>

Or push/pull on certain screen sizes:

Example

pull from md
push from md

Source


<div class="grid grid--center">
    <div data-g="6 md:3 md:pull:1">
        <div class="grid-example-item">pull from md</div>
    </div>
    <div data-g="6 md:3 md:push:1">
        <div class="grid-example-item">push from md</div>
    </div>
</div>

Middle

Vertically align grid items to the middle with the .grid--middle modifier

Example

deep
grid
middle

Source


<div class="grid grid--middle">
    <div data-g="6">
        <div class="grid-example-item">deep<br/>grid</div>
    </div>
    <div data-g="6">
        <div class="grid-example-item">middle</div>
    </div>
</div>

Bottom

Vertically align grid items to the bottom with the .grid--bottom modifier

Example

deep
grid
bottom

Source


<div class="grid grid--bottom">
    <div data-g="6">
        <div class="grid-example-item">deep<br/>grid</div>
    </div>
    <div data-g="6">
        <div class="grid-example-item">bottom</div>
    </div>
</div>

Debug

Debug grids in development with an outline with the .grid--debug modifier

Example

debug
debug

Source


<div class="grid grid--debug">
    <div data-g="6">
        <div class="grid-example-item">debug</div>
    </div>
    <div data-g="6">
        <div class="grid-example-item">debug</div>
    </div>
</div>

Or debug all grids in an ancestor with the .debug-grid class (apply to the body to debug all grids):

Example

debug
debug
debug
debug

Source


<div class="debug-grid">
    <div class="grid">
        <div data-g="6">
            <div class="grid-example-item">debug</div>
        </div>
        <div data-g="6">
            <div class="grid-example-item">debug</div>
        </div>
    </div>
    <div class="grid grid--center">
        <div data-g="3">
            <div class="grid-example-item">debug</div>
        </div>
        <div data-g="3">
            <div class="grid-example-item">debug</div>
        </div>
    </div>
</div>

Semantic

Use grid mixins for creating semantic class names for grid-based layouts. This replaces the default grid selectors with classes like sidebar or article-body.

Semantic example 


.layout {
    @include grid;

    &__sidebar {
        @include grid-item(12, $md: 3, $lg: 4);
    }

    &__body {
        @include grid-item(12, $md: 9, $lg: 8);
    }
}

Grid item docs

Media queries

Use media queries to build custom responsive layouts:

Media queries example 


.test {
    &__item {
        float: left;
        width: 100%;

        @include mq($from: md) {
            width: percentage(1 / 3);
        }

        @include mq($from: lg) {
            width: 25%;
        }
    }
}

More about media queries

Edit on GitHub