DYNA-CSS

Variable Based Dynamic Css Library

Usage

<!--You can use multiple variables-->
<div css="items spaceAround">
    <span css="item">First Item</span>
    <span css="item">Second Item</span>
</div>

//First Method
let styles=document.css({
items:{
  display:"flex",
  alignItems:"center",
  padding:"12px",
  border:"1px solid black",
},
spaceAround:{
    justifyContent:"space-around"
},
item:{
    border:"white 1px solid"
}
})

//You can update after
let items=styles.items

items.color="white";
items.backgroundColor="orange"


/*
Alternative usage

let [style,settings]=css({
    blue:{
    backgroundColor:"blue"
    }
})

//You can add multiple elements
settings.init(document)
settings.init(document.querySelector(".other"))
*/

Before After

Before

After

Installations

Global

<script src="https://unpkg.com/[email protected]/dynacss.js"></script>

Module

import {css} from "https://unpkg.com/[email protected]/dynacss.mjs"

Npm

npm i dyna-css