Breakpoints and media queries

Note

The content on this page is for developers who want to leverage breakpoints in their sub-theme of Forty Acres.

Both the Forty Acres theme and any custom sub-theme based on the STARTERKIT (See Creating and customizing a sub-theme) contain defined breakpoints and media queries.

Contents

Note

It is a best practice to create a custom sub-theme instead of working directly in the Forty Acres theme. References below to a ‘theme’ will only mention a custom sub-theme. Any customizations made in the Forty Acres theme can get overwritten.

Breakpoints

Breakpoint defaults are defined in _variables.scss: (sub-theme/src/scss/mixins/_variables.scss).

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 1000px,
  lg: 1200px,
  xl: 1600px,
);

Media queries

The Sass (SCSS) mixin defining the media query structure is located in the mixins directory (sub-theme/src/scss/mixins/_responsive.scss). The query works for “breakpoint and up” for mobile first responsive behavior, which means declarations will take effect on screen widths at the breakpoint size and larger.

Note

The Forty Acres theme and custom sub-themes created from its STARTERKIT use SCSS linting to assist in keeping code clean and well-written. Theme developers will notice when running npm run gulp with a new custom mixin that the SCSS compilation will stop compiling unless the SCSS comment // stylelint-disable-next-line at-rule-no-unknown is used on the line before the mixin begins. Examples of this are shown in the code blocks below.

Referencing breakpoint mixins in media queries

Media query with mixin used as wrapper:

// stylelint-disable-next-line at-rule-no-unknown
@include screen-mq(lg) {
  h1 {
    font-size: 3rem;
  }
}

Media query used inside an element:

h1 {
  // stylelint-disable-next-line at-rule-no-unknown
  @include screen-mq(lg) {
    font-size: 3rem;
  }
}

Using a custom value instead of a defined breakpoint:

// stylelint-disable-next-line at-rule-no-unknown
@include screen-mq(1600px) {
  body {
    background: blue;
  }
}

Adding new breakpoints

To add another breakpoint, add it to $grid-breakpoints in _variables.scss. In the following example, an xxl breakpoint of 1800px is added:

Add xxl to _variables.scss:

SUBTHEME/src/scss/_variables.scss

$grid-breakpoints: (
    xs: 0,
    sm: 600px,
    md: 900px,
    lg: 1200px,
    xl: 1600px,
    xxl: 1800px,
);

This breakpoint can be added to the styles as needed. By default, the screen-mq mixin media query is available for easily implementing defined breakpoints. For example, to apply this new xxl breakpoint to any element with the .prompt class, the following could be added:

.prompt {
  ...
  @include screen-mq(xxl) {
    ... whatever styles to apply for the new breakpoint
  }
}

Note

Though media queries for orientation or pixel density (e.g., retina display) are possible, none currently exist in the Forty Acres theme or STARTERKIT-based sub-themes.

Note

Breakpoints for the Drupal Kit components are written in each component’s module. They can be overridden in the custom sub-theme.