Melanage is a CSS Utility library similar to Tailwind but more like Tachyons. Melange includes a design system, so you don't have infinite possibilities, just what you probably need for most things.
Add this to the <head> section of your HTML:
<link rel="stylesheet"
href="https://unpkg.com/melange-css@1.0.0-RC4/melange.min.css"/>
Use something like curl to download the file and save it to your project:
curl https://unpkg.com/melange-css@1.0.0-RC4/melange.css > melange.css
npm install --save melange-css
You don't find a class like button or btn. Instead, you'll find classes that are mnemonic for CSS properties and
common values. One way to make a button is to use a a tag that has a larger horizontal padding as compared to its
vertical, and a rounded border. Here's one way to do that:
<a href="#" class="ph-3 pv-2 ba br-3 tc">Click Me!</a>Melange provides styles for many CSS properties, however it does not provide an infinite number of values for those properties. As such, there is no build step like TailwindCSS has.
- All writing, including this README and the HTML content in
melange-cli/src/htmlanddocs, was created without assistance from a generative AI - Some aspects of the source code in
melange-cli/src/jshad non-creative assistance from GitHub CoPilot. Primarily, it auto-complete certain patterns that I then edited. It was not used to produce more than one line at a time.
- Update versions in
*/package.json - Update version here
bin/setup(which will updatepackage-lock.json)bin/build- commit it all
npm publishit all