2.8.0 • Published 4 years ago
vanilla-style v2.8.0
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
$ npm install --save vanilla-style
Use
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:
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:
style.use('$bg', (value, element) =>{
element.style.background = value;
return {
background: value;
}
});
Use middleware style params:
const box = document.getElementById("box");
style({
$bg: "#f00"
})(box);
2.8.0
4 years ago
2.7.0
4 years ago
2.6.0
4 years ago
2.5.0
4 years ago
2.4.0
4 years ago
2.3.0
4 years ago
2.2.0
4 years ago
2.0.8
4 years ago
2.1.0
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.5
4 years ago
2.0.4
4 years ago
2.0.7
4 years ago
2.0.6
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.0
4 years ago
0.2.0
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago