Breakpoints tokens

The VA Clinical Design system uses media queries to support responsive design. VACDS recommends all designs are tested across three main breakpoints. This is a similar approach to mobile-first design thinking. Clinicians and admins are regularly resizing applications to view them side by side, resulting in a wide variety of screen sizes and small viewports, even when operating on a desktop. Designs should be optimized across all the recommended breakpoints.

Learn how to get started

Source file location: ./dist/core/tokens/breakpoints

Import as follows in your Sass file @use '@department-of-veterans-affairs/clinical-design-system/dist/core/tokens/breakpoints' as breakpoints;

Names and values

The VA Clinical Design System is aligning our names to both the VA Design System and USWDS. We recommend thinking about these as small, medium, and large screens, agnostic of device types, regardless of the names associated to them, when designing for the clinical environment. These are the key breakpoints where the design of any page layout, utility, or component may change.

Default tokens

We recommend using these 3 simple breakpoints, this will ensure usability across most use cases. Additionally, we recommend setting a maximum width to your designs.

Optional tokens

Available to use if the default tokens do not meet your needs.

Sass mixins

The VA Clinical Design System Core also includes mixins to make it easier for developers to create breakpoints in their styles.

Source file location: ./dist/core/mixins/breakpoint

Import as follows in your Sass file @use '@department-of-veterans-affairs/clinical-design-system/dist/core/mixins/breakpoint' as breakpoint;

@include breakpoint(medium-screen) {
  //Some styles
}

This is will compile to:

@media screen and (min-width: 768px) {
  //Some styles
}

Using Sass mixins

You may place the @media mixin inside of a selector or places selectors inside of a @media mixin, whichever option makes the code you are writing easiest for other developers to understand. Always start with the smaller breakpoint and work your way up to larger ones.

.some-component {
  margin: units(1);

  @include breakpoint(medium-screen) {
    margin: units(2);
  }

  @include breakpoint(desktop-lg) {
    margin: units(3);
  }
}