Current Version: 1.0.0-beta6
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="https://unpkg.com/melange-css@1.0.0-beta6/melange.min.css"/>
curl https://unpkg.com/melange-css@1.0.0-beta6/melange.css \
> melange.css
npm install --save melange-css
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.
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.
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.
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.
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.
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 works great when…
MelangeCSS isn't right for you if…