MelangeCSS has classes that target breakpoints, for example f-3-ns would set the font size to the third step of the scale, but only on the not-small breakpoint. bg-purple-200-dm would set the background color to the second-darkest purple, only if the user has set dark mode in their OS settings.
You may not need these features, so you start with one of three base stylesheets. You can optionally include add-ons to allow augmenting your base stylesheet classes targeting other media queries. Consult the media queries reference for precise definitions.
MelangeCSS is available as a Node Module, which you can install thusly:
npm install --save melange-css
The CSS will be in node_modules/melange-css/melange.css. How you get that into your app highly depends on how your app is built. If you have a build system that supports @import, you can bring MelangeCSS in by adding this to a .css file your build system processes:
@import "melange-css/melange.css";
If you are using Ruby on Rails here are the instructions for using the asset pipeline with the NPM module.
Adding Media Queries
Since this base stylesheet is missing some media queries, you can add the ones you need peacemeal. See the media queries guide for how to use these styles.
<!-- Pure HTML -->
<link rel="stylesheet"
href="https://unpkg.com/melange-css@1.0.0-RC4/melange.min.css"/>
<link rel="stylesheet"
href="https://unpkg.com/melange-css@1.0.0-RC4/melange-dark-mode.min.css"/>
/* Using a CSS pre-processor */
@import "melange-css/melange.css";
@import "melange-css/melange-dark-mode.css";
melange-plus.css
Largest install, has everything. No need for add-ons.
CDN
You can bring MelangeCSS into any webpage using the unpkg.com CDN provided for all NPM packages. Place this somewhere in your <head> section:
MelangeCSS is available as a Node Module, which you can install thusly:
npm install --save melange-css
The CSS will be in node_modules/melange-css/melange-plus.css. How you get that into your app highly depends on how your app is built. If you have a build system that supports @import, you can bring MelangeCSS in by adding this to a .css file your build system processes:
@import "melange-css/melange-plus.css";
If you are using Ruby on Rails here are the instructions for using the asset pipeline with the NPM module.
This includes all media queries.
melange-thin.css
Smallest install. Best for internal apps that don't need breakpoints. Can enhance with add-on stylesheets.
CDN
You can bring MelangeCSS into any webpage using the unpkg.com CDN provided for all NPM packages. Place this somewhere in your <head> section:
MelangeCSS is available as a Node Module, which you can install thusly:
npm install --save melange-css
The CSS will be in node_modules/melange-css/melange-thin.css. How you get that into your app highly depends on how your app is built. If you have a build system that supports @import, you can bring MelangeCSS in by adding this to a .css file your build system processes:
@import "melange-css/melange-thin.css";
If you are using Ruby on Rails here are the instructions for using the asset pipeline with the NPM module.
Adding Media Queries
Since this base stylesheet is missing some media queries, you can add the ones you need peacemeal. See the media queries guide for how to use these styles.
Not-small Breakpoint (targets both Large and Medium)
For example:
<!-- Pure HTML -->
<link rel="stylesheet"
href="https://unpkg.com/melange-css@1.0.0-RC4/melange-thin.min.css"/>
<link rel="stylesheet"
href="https://unpkg.com/melange-css@1.0.0-RC4/melange-dark-mode.min.css"/>
/* Using a CSS pre-processor */
@import "melange-css/melange-thin.css";
@import "melange-css/melange-dark-mode.css";