Responsive Breakpoints

The University of Leeds Design System is designed to be “mobile first”. We use media queries with the fixed values to create sensible breakpoints for our layouts and interfaces. These breakpoints are based on minimum viewport widths and allow us to alter the appearance of elements as the viewport changes.

The pixel equivalents below assume a root em of 16px. The intention is that if a user sets a different root em in their browser settings the site design should scale accordingly.

$breakpoints: (
  uol-media-xs: 25.875em, // 414px
  uol-media-s: 37.5em, // 600px
  uol-media-m: 48em, //768px
  uol-media-l: 64em, // 1024px
  uol-media-xl: 90em, // 1440px
  uol-media-xxl: 103.75em // 1660px
);

We use include-media, a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

Example

The following SCSS code will apply a hotpink background when the viewport is equal to or larger than 48em/768px (eg. iPad in portrait orientation).

.example-responsive-element {
  background: lightgrey;

  @include media(">=uol-media-m") {
    background: hotpink;
  }
}

Demo

Although the first approach should be to develop using mobile first principles, there are occasions when you may need to use maximum viewport media queries.

.example-breakpoint-uol-media-xs {
  color: white;
  background: black;

  @include media(">=uol-media-xs") {
    background: red;
  }
}

.example-breakpoint-uol-media-xs-max {
  color: white;
  background: black;

  @include media("<=uol-media-xs") {
    background: red;
  }
}

.example-breakpoint-uol-media-s {
  color: white;
  background: black;

  @include media(">=uol-media-s") {
    background: red;
  }
}

.example-breakpoint-uol-media-s-max {
  color: white;
  background: black;

  @include media("<=uol-media-s") {
    background: red;
  }
}

.example-breakpoint-uol-media-m {
  color: white;
  background: black;

  @include media(">=uol-media-m") {
    background: red;
  }
}

.example-breakpoint-uol-media-m-max {
  color: white;
  background: black;

  @include media("<=uol-media-m") {
    background: red;
  }
}

.example-breakpoint-uol-media-l {
  color: white;
  background: black;

  @include media(">=uol-media-l") {
    background: red;
  }
}

.example-breakpoint-uol-media-l-max {
  color: white;
  background: black;

  @include media("<=uol-media-l") {
    background: red;
  }
}

.example-breakpoint-uol-media-xl {
  color: white;
  background: black;

  @include media(">=uol-media-xl") {
    background: red;
  }
}

.example-breakpoint-uol-media-xl-max {
  color: white;
  background: black;

  @include media("<=uol-media-xl") {
    background: red;
  }
}