MelangeCSS

Utility CSS for Developers

Iterate quickly by using terse, single-purpose utility classes (but not too many).

Get a usable design faster via the grid-based design system. You don't need 20 font sizes and 48 shades of blue.

No build step and no dependencies. It's just custom properties and a stylesheet.

No mini-languges, no DSLs, no nonsense. Class names are based on initialisms and convention, quickly learned.

Simple customization options without a complex toolchain or dependencies.

<button
  style="display: inline-block;
         padding-left: var(--mg-sp-4); padding-right: var(--mg-sp-4);
         padding-top: var(--mg-sp-3);  padding-bottom: var(--mg-sp-3);
         text-align: center;
         font-size: var(--mg-fs-3);
         border: all;
         border-radius: var(--mg-sw-3);
         background-color: var(--mg-blue-900);
         color: var(--mg-blue-100);
         cursor: pointer
         box-shadow: 1px 1px 2px 1px rgba( 0, 0, 0, 0.2 );
  ">
    Make Spice Flow
</button>

<button
  class="dib
         ph-4
         pv-3
         tc
         f-3
         ba
         br-3
         bg-blue-900
         blue-100
         pointer
         shadow-1
   ">
    Make Spice Flow
</button>

Install

CDN

<link rel="stylesheet" href="https://unpkg.com/melange-css@1.0.0-RC4/melange.min.css"/>

Download

curl https://unpkg.com/melange-css@1.0.0-RC4/melange.css > melange.css

NPM

npm install --save melange-css

Features

A single .css file with custom variables you can override using regular CSS. No build step.

Three breakpoints allow you to create responsive designs right from your HTML. Optional dark mode and high-contrast media queries.

Works with .css you have, and isn't designed to replace it.

Classnames use a consistent naming convention. It's based on CSS properties and can be quickly internalized. You'll be typing faster than any automcomplete or LLM.

Everything is based on modular scales for fonts, sizing, and spacing. Quickly find the right one for your UI, and know that everything will work well together.

Customize anything by setting CSS properties - no special configuration language needed.

Add your own classes and have MelangeCSS create versions for each media query or pseudo class.

MelangeCSS Isn't For Everyone

MelangeCSS works great when…

…you are building a web application.
…your team knows CSS and builds the complete solution from front-end to back-end.
…your designers don't hand you screenshots of apps, but instead provide visual treatments you can use to create defensively-designed components and screens.
…you are designing, styling, and building as you go…and you want to go fast.

MelangeCSS isn't right for you if…

…your designers hand you screenshots for you to produce with pixel-perfect fidelity.
…you have a dedicated front-end team that styles semantic markup produced by others.
…you can't control the markup.
…you are writing HTML directly with no templating system or web framework.

Get Started