warming-gradient
CSS gradient visualizing historical temperature data, inspired by Ed Hawkins' Warming Stripes.
Star 1
Fork 0
Watch
28 2 0
Files
.github
data
.gitignore
.prettierignore
data_to_files.py
LICENSE
package.json
README.md
warming-gradient.css
warming-gradient.svg
README.md

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-gradient

Import 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 #

  1. Download the warming-gradient.css file from the source files here.
  2. Place it in your project folder.
  3. 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>

License #

Licensed under MIT license.