npm install splotch
1. Link to splotch on html page
<link rel="stylesheet" type="text/css" href="./node_modules/splotch/splotch.min.css"> 2. To use on the whole page
<body class"mint-1">3. To use different varieties (each class has four variations)
<div class='mint-1'></div>
<div class='mint-2'></div>
<div class='mint-3'></div>
<div class='mint-4'></div>- colors extending past just text
Check out the classes you can use
Each class has four variations. The syntax is classname dash number(1,2,3,4) ex:class='icecream-1' or class='seafoam-4'
- If using React with webpack you might come across
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/node_modules/splotch/splotch.min.css" - fix: Instead of linking to 'Splotch' in you index.html file you will need to set up your webpack.config.js file to handle css. npm install css-loader and style-loader. In your config file, add
module: { loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader'}]then addimport splotch from "./node_modules/splotch/splotch.min.css"to your main React js file.