Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Design

Breakpoints

VA.gov uses media queries to support responsive design. It is constructed using a mobile-first approach, meaning that styles are written by default for mobile devices and scaled up for larger viewports.

Names and values

There are six key breakpoints where the design of any page layout, utility, or component may change.

Breakpoint sass variable Width
$xsmall-screen 320px
$small-screen 481px
$medium-screen 768px
$small-desktop-screen 1008px
$large-screen 1201px

What if you need to create a different breakpoint?

In some cases, you will need to have a breakpoint that is not included in Formation’s core set. This should only be done sparingly and only in cases where the design element reaches a stress point that cannot resolved through modifying the design. This breakpoint should be declared locally within a .scss partial and named to reflect the element it pertains.

$nav-width: 702px;

.theoretical-nav {
  //Some styles

  @include media($nav-width) {
    //Some styles
  }
}

Sass mixins

Formation includes the @media mixin to make it easier for developers to create breakpoints in their styles.

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

This is will compile to:

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

Using the Sass mixin

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 media($medium-screen) {
    margin: units(2);
  }

  @include media($large-screen) {
    margin: units(3);
  }
}