Nosy Pinocchio Manners

    vanilla-style
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.0 • Public • Published

    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);

    Keywords

    none

    Install

    npm i vanilla-style

    DownloadsWeekly Downloads

    30

    Version

    2.8.0

    License

    none

    Unpacked Size

    68.8 kB

    Total Files

    27

    Last publish

    Collaborators

    • ymblender