1.2.0 • Published 1 year ago
randomicsser v1.2.0
RandomiCSSer
RadomiCSSer is a small utility function that will create CSS variables with random values.
From CSS art, to experiments, we all need random values sometimes. With this utility function you can create random CSS variables and use them in your CSS or JS.
Docs
Installation
npm i randomicsserUsage
In order to be able to use the variables in your CSS, you need to load them first. You can do this by calling the load method.
Then, you'll find the variables in your CSS, right onto your target element.
If the target prop isn't filled, it will default on the body.
By default, you'll see this on the body:
<body
style="
--random-0:235;
--random-1:247;
--random-2:153;
--random-3:295;
--random-4:71;
--random-5:219;
--random-6:41;
--random-7:101;
--random-8:249;
--random-9:142;
"
></body>With HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RandomiCSSer</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import randomCSSVariable from 'https://unpkg.com/randomicsser@1.0.4';
randomCSSVariable({
variable: 'random',
unit: '',
count: 10,
range: { min: 1, max: 300, round: true },
}).load();
</script>
</body>
</html>With React
{% raw %}
const App = () => {
randomCSSVariable({
target: document.querySelector('body'),
count: 10,
unit: 'px',
variable: 'random',
range: {
round: true,
min: 100,
max: 300,
},
}).load();
return (
<div>
{Array.from({ length: 5 }).map((item, index) => (
<div
style={{
width: '100px',
height: `var(--random-${index})`,
background: 'red',
}}
/>
))}
</div>
);
};{% endraw %}
With Node
import randomCSSVariable from '../lib/index.js';
import fs from 'fs';
const randCSS = randomCSSVariable({
count: 10,
range: {
min: 1,
max: 100,
},
}).getVars();
fs.writeFileSync('./demo/randomicsser.json', JSON.stringify(randCSS), null, 2);