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">
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.
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.
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…
…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.