Javascript with MOD-CSS

In the version 4x, we are introduced javascript function for more reactivity and for better using with any other JS based.
This functions is mainly designated for using with Js events.
Feel free to use it in any ways with with auto or manual mode.

attributes (obj)

How to use it

Used to define custom attributes to serve your MOD-CSS setup.
Sometimes, some frameworks conflict with the default attributes. You can change this by choosing your own attributes.

                    
    <!-- default version, just call -->
    ModCSS.attributes({
        props: 'mod'
        var: 'data-var'
    })


    <!-- With manual or ESM  version -->
    let MD = new MODCSS()
    MD.attributes({
        props: 'mod'
        var: 'data-var'
    })
    
                

init (value | null)

How to?

This is the function that initializes the DOM analysis and retrieves your parameters for rendering.
It will be useful to you in the manual or ESM version because it is active by default in the basic version.

Use it only with manual or ESM version

                
    <!-- Parse all DOM  -->
    let MD = new MODCSS()
    MD.init()

    <!-- Parse only selector(s)  -->
    MD.init('.div, span, p')

    
            

insert (value)

How ?

Equivalent to the var attribute, you can use it to inject styles into the MODCSS stylesheet.

                
    MOD.insert(`
        .btn{ hover: bg[blue] && before:: co[gray] h*w[50px] }
        .btn-blue{ bg[bluemarine] co[#eee] p[6px 8px] br[4px] bd[1px solid #40404050] || lg? hover: bg[lightblue] co[bluemarine] }
        #col2 { bg[blue] co[#333] }
        .col-50, [col='50%']{ $col[50%] co[maroon] }
        .col { bg[#80808033] fo.sz[11px] || lg? fo.sz[13px] }
        h6 { m.bt[20px] co[orange] }
        section { m[2rem auto] }
    `)
    
            

render (element, value)

How to use it

This functions inject directly your settings in the MOD-CSS stylesheet. This one don't appear in DOM after rendering. You can use it with any event supported by Javascript.

                    
    <!-- With selector  -->
    let MD = new MODCSS()
    MD.render('#li', 'bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff] && hover*focus: bg[orange]')    
    
    <!--  elt got with querySelector  -->
    Elt.render('bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff] && hover*focus: bg[orange]')    
    
                

renderInline (element, value)

Uses cases

This one is designated to insert inline style with MOD-CSS.
MOD-CSS simplify inseetion of inline style rather usual Javascript ways. It is more fast and more convivial.
As inline style, renderInline(), will generate your settings in style attribute.

                
    <!--With selector  -->
    let MD = new MODCSS()
    MD.renderInline('div .cls', 'bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff]')

    <!-- elt got with querySelector  -->
    Elt.renderInline('bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff]')
    
    
            

Parameters

element: string

This parameter concerns almost all string values supported by javascript function querySelector.
It works in same way.

Obj: Object

Object with two values to set : var & props

Value : string | null

can be string value, "*", or nothing.