Breakpoints

Breakpoints

The Royal Navy Design System provides default breakpoint sizes to use in your applications.

SizeBreakpoint
root0
xs576px
s768px
m1024px
l1200px
xl1400px
xxl1600px

Using Breakpoints

The Royal Navy Design System has two methods available for using the default breakpoints in your application.

Inside your SCSS

To use breakpoints inside your SCSS, the Royal Navy Design System provides mixins to help:

@mixin breakpoint('xs') {
  // Styles here
}
// Result
@media only screen and (min-width: 576px) {
  // Styles here
}

Utility classes

The Toolkit provides Breakpoints for each Utility class. Simply pre-pend a Utility class with a breakpoint size.

.m:rn_mt-4
.l:rn_mt-10