https://github.com/ymzuiku/vanilla-style
Ease set element style
https://github.com/ymzuiku/vanilla-style
Last synced: about 2 months ago
JSON representation
Ease set element style
- Host: GitHub
- URL: https://github.com/ymzuiku/vanilla-style
- Owner: ymzuiku
- License: mit
- Created: 2019-11-02T09:05:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T15:45:19.000Z (over 3 years ago)
- Last Synced: 2025-02-21T09:41:41.950Z (2 months ago)
- Language: TypeScript
- Size: 113 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-style
Functional modal css-in-js.
Easy set HTMLElement styles, and easy use css-in-js make like pretend class: hover, active:
> Size 2kb
## Install
```sh
$ npm install --save vanilla-style
```
## Use
```js
import style from "vanilla-style";
const box = document.getElementById("box");
style({
// base style
color: "#333",
background: "#f55",
$active: {
background: "#ff0"
},
// like css :hover
$hover: {
background: "#55f"
},
// like display:flex; flex-direction: row; justify-content:center; align-items:center;
$flex: "row center start"
})(box);
```
## Use sheet
Sheet is some style Functions:
```ts
const sheet = style.createSheet({
header:{
background:'#333'
},
title: {
color:'#00f'
}
})
const header = document.getElementById("header");
const title = document.getElementById("title");
sheet.header(header);
sheet.title(title);
```
## Middleware
vanilla-style built-in middlewares:
| name | detail |
| -------- | ---------------------------------- |
| \$hover | Like css:hover |
| \$active | Like css:active |
| \$flex | Quick set flex css |
| \$media | If window.innerWidth and set style |
| \$pc | If at Desktop and set style |
| \$mobile | if at Mobile and set style |
We can create self middleware, \$bg:
```js
style.use('$bg', (value, element) =>{
element.style.background = value;
return {
background: value;
}
});
```
Use middleware style params:
```js
const box = document.getElementById("box");
style({
$bg: "#f00"
})(box);
```