colorjs.io
Version:
Color space agnostic color manipulation library
173 lines (131 loc) • 4.71 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Color.js</title>
<link rel="stylesheet" href="https://get.mavo.io/mavo.css">
@@include('_head.html')
<link rel="stylesheet" href="style.css">
<script src="https://get.mavo.io/mavo.js" async></script>
</head>
<body class="language-js">
@@include('_header.html', {
"title": "Get Color.js"
})
<main class="cn-ignore">
<h2>Quick use</h2>
<p>If you just want to play around ASAP, the quickest way is to import the entire library, either as a module in your JS:</p>
<pre><code>import Color from "https://colorjs.io/dist/color.esm.js";</code></pre>
<p class="warning">To be able to use <code>import</code> statements in your JS, your <code class="language-markup"><script></code> element needs <code>type="module"</code></p>
Or, if you'd rather just have <code>Color</code> as a global variable, the classic way, just include the following script in your HTML:
<pre class="language-markup"><code><script src="https://colorjs.io/dist/color.js"></script></code></pre>
<p class="tip">You can also add <code>.min</code> right before the <code>.js</code> extension to get a minified file.
<h2>Via npm</h2>
<p>Run:</p>
<pre><code>npm install colorjsio</code></pre>
<h2>Custom bundle</h2>
<p>Or, create a custom bundle that is tailored to your needs.</p>
<p class="warning">This is a work in progress and doesn't fully work yet.
Right now it can generate import statements, but not an actual bundle.</p>
<section mv-app="colorBundler" mv-storage="modules.json" mv-plugins="markdown">
<fieldset id="core">
<legend>Core modules</legend>
<ul>
<li property="core">
<label>
<input type="checkbox" property="include" checked disabled>
<span property="name">Color.js core</span>
<meta property="id">
<meta property="importStatement" content='import Color from "https://colorjs.io/src/color.js";'>
</label>
</li>
</ul>
</fieldset>
<fieldset id="spaces">
<legend>Color spaces</legend>
<ul>
<li mv-multiple property="space">
<label>
<input type="checkbox" property="include" disabled="[false]">
<a property="url"><strong property="name">Lab & LCH</strong></a>
<meta property="id">
<meta property="importStatement" content='import "https://colorjs.io/src/spaces/[id].js";'>
</label>
<div property class="description" mv-markdown-options></div>
</li>
</ul>
</fieldset>
<fieldset id="optional">
<legend>Optional modules</legend>
<ul>
<li mv-multiple property="optional">
<label>
<input type="checkbox" property="include">
<a property="url"><strong property="name">Interpolation</strong></a>
<meta property="id">
<meta property="path">
<meta property="importStatement" content='import "https://colorjs.io/src/[if(path, path & '/')][id].js";'>
</label>
<div property class="description" mv-markdown></div>
</li>
</ul>
</fieldset>
<fieldset id="format">
<legend>Global or ES6 module?</legend>
<ul>
<li>
<label>
<input type="radio" name="format" value="esm" checked>
ES6 Module only
</label>
</li>
<li>
<label>
<input type="radio" property name="format" value="iife">
Global <code>Color</code> variable
</label>
</li>
</ul>
</fieldset>
<fieldset id="link-vs-embed">
<legend>Link or Download</legend>
<ul>
<li>
<label>
<input type="radio" property name="link" value="link" checked>
Import modules from colorjs.io at runtime
</label>
</li>
<li>
<label>
<input type="radio" property name="link" value="embed" disabled>
(Coming soon) Bundle module source in downloaded file
</label>
</li>
</ul>
</fieldset>
<pre id="bundle" class="cn-ignore language-none"><code>
[join(importStatement where include, '\n')]
[if(format = "iife", 'window.Color = window.Color || Color;', '')]
// Re-export
export default Color;
</code></pre>
<a href="#" download="color.js">Download</a>
</section>
<section class="cn-ignore">
<h2>How to use your custom bundle</h2>
<p>The following assume your downloaded file is in the same directory as the JS/HTML file using it.
If not, adjust the path accordingly.</p>
<p>If using client-side, include in your page via:</p>
<pre class="language-markup"><code>
<script src="color.js" type="module"></script>
</code></pre>
<p>Or, include in your JS via:</p>
<pre><code>import Color from "./color.js"</code></pre>
<p class="warning">To be able to use <code>import</code> statements in your JS, your <code class="language-markup"><script></code> element needs <code>type="module"</code></p>
</section>
</main>
@@include('_footer.html')
<script src="index.js" type="module"></script>
</body>
</html>