NICE Design System home

Responsive

Introduction

Responsive design is a combinations of flexible grids, flexible embeds, and media queries:

  • design and build mobile first
  • design for touch inputs and don't count on hover
  • consider high resolution devices.

Mobile first

  • Design content and experiences mobile-first
  • build for mobile first and override for larger screen sizes
  • use progressive enhancement in tandem with a mobile-first approach.

Touch

Design with touch devices in mind and don't rely on hover states.

Touch targets should be at least 48x48 dp (device-independent pixels). This equates to a physical size of around 7-10mm (5mm at an absolute minimum). Keep an 8dp space between touchable elements where possible.

Use progressive enhancement to allow natural gestures on touch devices where appropriate. For example, sliding a carousel or scrolling a list. Don't rely solely on gestures and offer a simpler fallback like a click or tap. We recommend Hammer.js for implementing touch gestures.

Viewport

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>:


_10
<meta name="viewport" content="width=device-width, initial-scale=1"/>

Avoid using maximum-scale=1 or user-scalable=no as these restrict a user's ability to zoom.

Breakpoints

The following table shows our breakpoints. These form the basis of everything responsive. They're used within:

  • media queries
  • grids
  • spacing
  • visibility
BreakpointSASS variableWidth (px)Width (em)
xs$nice-breakpoint-xs40025
sm$nice-breakpoint-sm60037.5
md$nice-breakpoint-md90056.25
lg$nice-breakpoint-lg120075
xl$nice-breakpoint-xl1600100

Media queries

We use SASS MQ for composing media queries. Use $from with SASS MQ for min-width media queries to build mobile first. Override styles for wider screens widths:


_13
.rule {
_13
background: blue;
_13
_13
@include mq($from: sm) {
_13
background: red;
_13
}
_13
@include mq($from: md) {
_13
background: green;
_13
}
_13
@include mq($from: lg) {
_13
background: orange;
_13
}
_13
}

Note: our media queries are outputted in CSS as em based, converted from the pixel breakpoint values. This is so that layouts respond to the user's browser set font size.

Grids

Grids item widths are mobile first. Use breakpoint:columns for grid item widths across breakpoints:


_10
<div class="grid">
_10
<div data-g="12 xs:6 md:4 lg:3">Item</div>
_10
<div data-g="12 xs:6 md:4 lg:3">Item</div>
_10
</div>

Use mixins for responsive grids within custom components:


_11
.layout {
_11
@include grid;
_11
_11
&__sidebar {
_11
@include grid-item(12, $md: 3, $lg: 4);
_11
}
_11
_11
&__body {
_11
@include grid-item(12, $md: 9, $lg: 8);
_11
}
_11
}

Spacing

Use responsive spacing classes to override margins and paddings across screen sizes.

Visibility

Use responsive visibility classes to show and hide elements across screen sizes.

Embeds

Use our maintain ratio component to embed images or videos within responsive sites.

Responsive typography

Our typography uses relative units and we set a base font size on the html element. This means our typography is responsive and fluid by default.

Follow our typography rules and use our typography mixins.

Media queries in JavaScript

Use the breakpoints module:


_10
import { breakpoints } from "@nice-digital/design-system";
_10
// Or if you're building a core module: import breakpoints from "./breakpoints";
_10
_10
console.log(breakpoints.breakpoints.md); // 900
_10
console.log(breakpoints.matchesFrom("md")); // true/false

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.