MelangeCSS

“ I will tell you a thing about your new name…the choice pleases us.

Most MelangeCSS classes follow a few naming conventions, so when you learn one specific class, you can usually intuit other classes that are related. These class names are heavily inspired by Tachyons, which was a major inspiration for Melange.

     ┌───── Short mnemonic or initialism for the CSS property
     │
     │ ┌── Step of the scale or value for the property
     │ │
    bw-3-ns
          │
          └─── Optional media query suffix
    

In certain cases, the dash is omitted between the property and the value. This is done to afford more convienience for commonly-needed classes. display and border are examples.

    ┌───── Short mnemonic or initialism for the CSS property
    │
    │┌── Step of the scale or value for the property
    ││
    ba-ns
        │
        └─── Optional media query suffix
    

Colors

MelangeCSS provides seven shades for each color and provides classes to control color, background-color, and border-color, along with hover-only variants of each.

     ┌───── Optional prefix for hover states
     │
     │     ┌──── Mnemonic for property, omitted for color
     │     │
     │     │   ┌── Name of the color
     │     │   │
    hover-bg-purple-400-ns
                      │  │
                      │  └─── Optional media query suffix
                      │
                      └─── Tint of color
    

Since there's no need for several shades of black or white, MelangeCSS provides two classes for each: black, black-ish, white, and white-ish.

Irregular Classes

On rare occasions, MelangeCSS provides classes that don't conform to the naming conventions. These are done for either readability or in preference to alternative terms. Examples:

• measure, which provides three values for max-width specifically for reading text.
• tracked, which provides several values for letter-spacing, which is more commonly known as tracking.

Aliases

On even more rare occasions, MelangeCSS provides classes that duplicate or combine classes, based on common usage or perhaps expected names. These are used sparingly. Examples:

• b aliases fw-bold.
• p combines measure and lh-copy.