Current Version: 1.0.0-beta6

Utility CSS for Developers

MelangeCSS provides single-purpose utility classes, but not too many. Style your HTML from your HTML, capitalizing on a grid-based design system you control. No build step, no pre-processing. With an intuitive yet terse naming convention, you can design views quickly, with minimal dependencies. And you'll know how these views will render just by looking at the markup.

<button class="dib ph-4 pv-3 tc f-3 ba br-3 bg-blue-lightest hover-bg-blue-lighter-ns blue-darkest pointer"> Click Me </button>
<button class="dib ph-4 pv-3 tc f-3 ba br-3 pointer bg-blue-lightest hover-bg-blue-lighter-ns blue-darkest"> Click Me </button>



<link rel="stylesheet" href=""/>


curl \ > melange.css


npm install --save melange-css

No Build System or Pre-Processing

MelangeCSS can be deployed as a single .css file that is under 200K (25K compressed). It doesn't use any pre-processing and doesn't require any build steps in your app. Installing it does not require any dependencies at runtime or development time.

Behavior-Revealing Design

HTML that uses MelangeCSS results in HTML whose presentation you can easily and correctly predict, just by looking at the HTML. No more chasing down tons of files and classes just to try to figure out what the browser is going to do when the page is rendered.

Grid-based Design System

For 90% of the use cases of 90% of apps, you don't need infinite margins, paddings, widths, or font sizes. A few distinct sizes will cover you. MelangeCSS provides a modular scale that means all your elements will have visual rhythm, and provide you enough flexibilty for most situations. Quickly audit every single size to find the right one.

Terse but Intuitive Class Names

You know CSS, so when you learn that fw-3 sets font-weight to 300, you'll have a good guess as to what fw-6 and fw-bold do. This means fast designing in the browser without the need for autocomplete and fewer trips to the documentation.

Mobile-First Design with Common Breakpoints

Each class MelangeCSS provides includes variants for non-small screens, medium screens, and large screens. You can use these to create a responsive design without writing any CSS or media queries.

Gradual Customization

MelangeCSS ships as a single .css file, but you can install a version with only CSS classes and provide your own values for the grid-based design system's variables (using the defaults as a starting point). Customize fonts, modular scales, and colors using only CSS—on build or compilation step for most cases.

However, if you have more needs, MelangeCSS does provide tooling at development time to allow you to add your own classes that conform to MelangeCSS's naming convention, or even create your own nuance design system. If you need it.

MelangeCSS Isn't For Everyone

MelangeCSS works great when…

MelangeCSS isn't right for you if…

Get Started