dy-css v0.0.1

dy-css - dynamic css

install

via npm:

npm i dy-css

via yarn:

yarn add dy-css

using

somewhere (in end) of your html file:

    <script src="path/to/dy-css/index.js"></script>
    <script>
        addCustomStyle(
            // any rules
        )
    </script>

explanation

Syntax: addCustomStyle(...rules)

What is rules arguments?

In this func you should transfer an arrays, all of it will have 3 items in it.

First item is type (for exemple "color" or "fw" maybe).

second is an css property that will change with dy-css. Use lowerCamelCase, for exemple if you want to change font-weight write fontWheight.

third is a template. It is will be used as template for value for specified css property. In it dollar symbol ($) will be replaced with natural number after this. Syntax: 'tex$5t $1 any text$2 R(&^T%^* $4 $3 $2'

so what? if you placed your addCustomStyle in end of your html file - now you can just use the data-dc attr like this:

<any-tag data-dc="type1-valueFor$1-valueFor$n typeN--valueFor$1-valueFor$n" any-attr="any-value">any child<any-tag/>

exemple

<div data-dc="a-name-linear-1000-infinite">animation</div>
<div data-dc="a-name-linear-1200-infinite bg-274">animation</div>
<script>
    addCustomStyle('a', 'animation', '$1 $2 $3ms $4')
    addCustomStyle('bg', 'backgroudColor', '#$1')
</script>

check test folder

feetback

any issues/suggestions or anything else send to daniellittlegrey.feedback@gmail.com!