2.8.0 • Published 4 years ago

vanilla-style v2.8.0

Weekly downloads
113
License
-
Repository
github
Last release
4 years ago

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:

namedetail
\$hoverLike css:hover
\$activeLike css:active
\$flexQuick set flex css
\$mediaIf window.innerWidth and set style
\$pcIf at Desktop and set style
\$mobileif 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