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
Breakpoint | SASS variable | Width (px) | Width (em) |
---|---|---|---|
xs | $nice-breakpoint-xs | 400 | 25 |
sm | $nice-breakpoint-sm | 600 | 37.5 |
md | $nice-breakpoint-md | 900 | 56.25 |
lg | $nice-breakpoint-lg | 1200 | 75 |
xl | $nice-breakpoint-xl | 1600 | 100 |
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:
_10import { breakpoints } from "@nice-digital/design-system";_10// Or if you're building a core module: import breakpoints from "./breakpoints";_10_10console.log(breakpoints.breakpoints.md); // 900_10console.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.
- If you work for NICE, ask us a question in our Teams channel
- If you work outside of NICE, you can get in touch with us via Github discussions