MelangeCSS - Guide - Media Queries

“ There’s no secret to balance. You just have to feel the waves.

MelangeCSS provides variants of each class that take effect only when certain media queries are true. For example, any class ending in -ns will affect only those screens that are 60em or larger ("ns" being a mnemonic for "not small").

The idea is to style your views without the variants in a way that the result will work for small screens (and, ideally, any screen). You can then use the variants to adjust behavior on larger screens. For example, if a heading should be centered by default, but aligned left on non-small screens, you could write <h1 class="tc tl-ns">Heading</h1>.

This same technique works for other media queries, such as dark mode or high contrast. Perhaps you want dark gray text on a light gray background, but for users who have selected increased contrast, use black and white. You'd write <p class="gray-200 black-hc bg-gray-800 white-hc"> Some text </p>

Of course, you may not need to use these media queries. You can adjust which ones you bring in to control the size of your CSS.

Example - Breakpoints and Mobile-first Design

Suppose we wish the following component to appear like so on desktop:

Paul Muad'Dib

Emperor of the Known Universe

arrakis.planet

and like so on mobile:

Paul Muad'Dib

Emperor of the Known Universe

arrakis.planet

Ideally, this can be achieved with the same markup. Start by making it work for mobile screens:

<div class="ba br-3">
  <div class="flex flex-column items-center">
    <img src="muad-dib.png" class="mt-2 w-5 h-5 br-3" />
    <h4 class="f-4 mb-2 mt-1">Paul Muad'Dib</h4>
  </div>
  <div class="bg-black white pa-2 br-bottom-3">
    <h5 class="tc f-3 i mv-2">Emperor of the Known Universe</h5>
    <a class="db tc blue-600" href="https://arrakis.planet">
      arrakis.planet
    </a>
  </div>
</div>

To change the design for larger screens, we must:

arrange the image and name horizontally, with appropriate padding for that layout.
align the title and link left.

To do this, you can use MelangeCSS's classes suffixed with -ns for “not small”, meaning any screen whose width is not considered small (thus, mobile).

<div class="ba br-3">
  <div class="flex flex-column items-center flex-row-ns mv-3-ns">
    <img src="muad-dib.png" class="mt-2 w-5 h-5 br-3 mt-0-ns ml-2-ns" />
    <h4 class="f-4 mb-2 mt-1">Paul Muad'Dib</h4>
  </div>
  <div class="bg-black white pa-2 br-bottom-3">
  <h5 class="tc f-3 i mv-2 tl-ns">Emperor of the Known Universe</h5>
  <a class="db tc blue-600 tl-ns" href="https://arrakis.planet">
    arrakis.planet
  </a>
  </div>
</div>

Paul Muad'Dib

Emperor of the Known Universe

arrakis.planet

If you view this page on a mobile device (or using the responsive mode of your browser), you'll see that the styling changes as desired.