https://github.com/lukyvj/randomicsser
Generate random CSS values on the fly
https://github.com/lukyvj/randomicsser
Last synced: 13 days ago
JSON representation
Generate random CSS values on the fly
- Host: GitHub
- URL: https://github.com/lukyvj/randomicsser
- Owner: LukyVj
- Created: 2022-12-13T15:01:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-12T21:38:41.000Z (5 months ago)
- Last Synced: 2025-03-27T13:51:31.663Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://lukyvj.github.io/randomiCSSer/demo
- Size: 627 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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.
[Demo](https://lukyvj.github.io/randomiCSSer/demo/)
## Docs
[Exports](docs/modules.md)
## Installation
```bash
npm i randomicsser
```
## Usage
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:
```html
```
### With HTML
```html
RandomiCSSer
import randomCSSVariable from 'https://unpkg.com/[email protected]';
randomCSSVariable({
variable: 'random',
unit: '',
count: 10,
range: { min: 1, max: 300, round: true },
}).load();
```
### With React
{% raw %}
```js
const App = () => {
randomCSSVariable({
target: document.querySelector('body'),
count: 10,
unit: 'px',
variable: 'random',
range: {
round: true,
min: 100,
max: 300,
},
}).load();
return (
{Array.from({ length: 5 }).map((item, index) => (
))}
);
};
```
{% endraw %}
### With Node
```js
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);
```
### Demo
https://lukyvj.github.io/randomiCSSer/demo/