warming-gradient
v2.0.0
Published
CSS gradients visualizing historical temperature data, inspired by Ed Hawkins' Warming Stripes.
Maintainers
fvoortReadme
Warming Gradient
CSS gradient visualizing historical temperature data, inspired by Ed Hawkins' Warming Stripes.
Installation
You can use NPM (best for projects with a build process), a CDN (quick copy-paste into any HTML file), or download and include the CSS file yourself.
Option 1: Install with NPM
Make sure you have Node.js installed and run this command in your project folder:
npm install warming-gradientImport in CSS
Add this at the top of your main CSS file:
@import 'node_modules/warming-gradient/warming-gradient.css';Or just paste this <link> in the <head> of your HTML file:
<link rel="stylesheet" href="node_modules/warming-gradient/warming-gradient.css" />The CSS class and variable will now be available in your project.
Option 2: Use via CDN
Just paste this <link> in the <head> of your HTML file and the CSS class and variable will be available in your project:
<link rel="stylesheet" href="https://unpkg.com/warming-gradient" />Option 3: Self-host warming-gradient.css
- Download the
warming-gradient.cssfile from the source files here. - Place it in your project folder.
- Include it in your HTML:
<link rel="stylesheet" href="path/to/warming-gradient.css" />How to use
Apply the class or variable directly in your HTML, for example:
<!-- Use with class -->
<div class="warming-gradient" style="height: 100px"></div>
<!-- Use with variable -->
<div style="height: 100px; background: var(--warming-gradient)"></div>