Media queries

This design system uses media queries, to change the active CSS styles. As the reference link shows, there are a lot of properties that can be queried to test whether or not a rule should apply (for instance changing the text size).

The main property we're interested in is the viewport width. By default, without explicit media query, we'll design for very small screens. As soon as the width of the viewport reaches some specified higher values, we'll adapt the CSS rules using the min-width media query. (This corresponds to a "mobile first" approach. An alternative would be to consider larges screens as default, and use max-width to progressively change the CSS rules as the screen size goes smaller.)

Typically, a design will use "break points": specific thresholds below or above which the design should be adapted. I don't know yet how to properly decide what values we should use, and I'll simply use what Mono (a design company) choosed for the Smart cooperative.

To work with media queries, we provide some helper CSS classes. They serve as both a way to learn about them, and to make it easier to "see" when their effects kick-in. The idea is to show, (fixed) at the top of the screen, a label with the active break point.

.mq {
  position: fixed;
  top: 0.125rem;
  right: 8.75rem;
}
.mq:after {
  content: ' default';
}

With the above code, any element with the class "mq" will appear at the top right corner of the screen, with the string " default" appending it to it. One way to use it is with this little snippet of HTML:

<span class=".mq">MQ:</span>

Then, for each break point we're interested in, we can add a media query to change the appended text. For instance if our first break point is at 400px, we can add:

@media (min-width: 400px) {
  .mq:after {
    content: ' 400px+';
  }
}

Example

This page contains the above snippet of HTML (and similar CSS classes to the one shown here), so you should see something like "MQ: 1200px+" at the top right corner of the screen.

To see the label content change, you can change the size of your browser window, or use its "responsive design mode" (normally accessible using the ctrl-shit-m shortcut or from the developer tools, itself accessible using the ctrl-shit-i or F12 shortcuts).

Finally, you can open this page in different devices (e.g. on a desktop computer and on a smartphone)

Related: Dimensions