MelangeCSS Reference

Current Version: 1.0.0-RC4

Media Queries

MelangeCSS is designed so that each class applies to the page when there is no media query in effect. This means any screen size, light (or no selected) color mode, and no explicit setting for reduced motion. You can then customize your page's styling when a media query is in affect by adding additional classes that have a suffix for that media query. For example, purple-100 would apply to all situations by default, whereas purple-100-dm would apply only when the “prefers dark mode” media query applies.

Each melange class includes a list of the media query variants that are available. For example, colors may have variants for dark mode, but spacings would not. Here are all the known media queries, their definitions, and their naming conventions.

Not Small Width

Screens that are larger than mobile sized

<div class="purple-400-ns">
@media screen and (min-width: 30em)

Medium Width

Screens larger than the mobile size but smaller than what is considered large (e.g. tablets)

<div class="purple-400-m">
@media screen and (min-width: 30em) and (max-width: 60em)

Large Width

Screens larger than the medium size (e.g. desktops)

<div class="purple-400-l">
@media screen and (min-width: 60em)

Dark Mode

Prefers dark mode (light mode considered default)

<div class="purple-400-dm">
@media (prefers-color-scheme: dark)

Reduced Motion

Prefers reduced motion (full/regular motion considered default)

<div class="purple-400-rm">
@media (prefers-reduced-motion: reduce)

High Contrast

Prefers more contrast (Browser and HTML-configured contrast is the default)

<div class="purple-400-hc">
@media (prefers-contrast: more)