Breakpointsbeta

GeneralPermalink to: General

All designs should be mobile first, eg. designed from small screens and up. In Bedrock we provide a set of breakpoints, avaiable as tokens and custom-media for CSS media queries.

For designersPermalink to: For designers

For engineersPermalink to: For engineers

To implement mobile first designs, you can use CSS media queries with the min-width property.

Bedrock also exports custom-media properties for each breakpoint to make them easier to consume (See example further down for more info).

Refer to the table below for all the breakpoints and their values.

Vanilla CSS examplePermalink to: Vanilla CSS example

First you will define a default value:

.title {
  font-size: 1rem;
}

Then you can expand on top of that with media queries, as the screen grows:

/* on screens ≥640px in width, we will make the title bigger */
@media (min-width: 640px) {
  .title {
    font-size: 2rem;
  }
}

/* huuge titles for huge screens */
@media (min-width: 1384px) {
  .title {
    font-size: 4rem;
  }
}

Custom media examplePermalink to: Custom media example

To use the custom-media properties, you need to add them to your bundler, eg. webpack:

const customMedia = require('@peakon/bedrock/css/custom-media');

module.exports = (context) => {
  return  {
    plugins: [
      postcssPresetEnv({
        ...
        features: {
          'custom-media-queries': {
            importFrom: [{ customMedia }],
          },
          ...
        },
      }),
    ],
    ...
  }
}

These will make the custom-media properties available in your CSS files (note: the values are compiled with postcss when your app is built).

An edit of the vanilla CSS example above with custom-media:

/* on screens ≥640px in width, we will make the title bigger */
@media (--min-width-sm) {
  .title {
    font-size: 2rem;
  }
}

/* huuge titles for huge screens */
@media (--min-width-xl) {
  .title {
    font-size: 4rem;
  }
}