Usage of attribute

MOD-CSS has its own system to save its properties. We have introduce a build system based on custom HTML attributes names to help developers to structure their code, improve readability and maintainability.
So, we don't use usual html attribute class to style. We use our own attributes names.

Each attribute is use to set some properties. We have a complete list of all css properties supported and its equivalent attribute.

HTML attributes

We have three specifics attributes.

:mod : Use for flexgrid : container, row and columns.
:box : for any others properties except flexgrid props
:var: For updating/setting selectors

How to use it

Call appropriate mod's attribute and set properties you want.
All our attributes starts by double points :

HTML

                    
    <!-- all properties except flexgrid -->
    <div :box="w[100%] m[10px] p[.2rem .5rem]"></div>   
    
     <!-- Set selector --> 
    <div :var="ul, #ul{ ls[none] co[lightblue] }"></div> 
    
     <!-- Flexgrid -->
    <div :mod="col[25%]"></div>

Exceptions !

If you don't want to use specifics attributes, just use :box to style. This approach is useful when you got to call few properties of different types.
So we don't recommend to use it anywhere, (for maintainability and readability).

HTML

                    
    <!-- border-radius, background, font-size, overflow -->
    <div :box="br[8px] bg[gray] fo.sz[12px] ovf[hidden]"></div>

Only container, row and column properties works with :mod attribute and anyone else.

Good practice

To improve your understanding of how to work our attribute system, we have list below some examples.
MOD-CSS is very intuitive once you understand functionning.

Ever put :

All our attributes starts by double points : .If you forget this, your settings will'nt work.

HTML

                    
    // Good
    <div :box="br[8px] bg[gray] fo.sz[12px]"></div>
    
    // Bad
    <div box="br[8px] bg[gray] fo.sz[12px]"></div>

Call once

On each html element, you got to call attribute once. If you call twice, only one will work.

HTML

                    
    // Good 
    <div :box="br[8px] bg[gray] w[95%] fo.sz[12px]"></div>
    
    // Bad  
    <div :box="br[8px] bg[gray]" :box="w[95%] fo.sz[12px]"></div>

Set custom attributes New

With our lastest released, you can now define your custom attributes for improving compatibility with others js framework based.
You can set only one, two or all three in once.

By default, attributes stay same if you are not define a custom one.

How to do that ?

First exemple with only props attributes.

HTML

                
    <script>
       ModCSS.attributes({
            props: 'xyz',
        })
    </script>

    <div xyz="row$[100%]">
        <div xyz="col$[5rem] co[orange]">5rem</div>
        <div xyz="col$[25%]">25%</div>
    </div>

    <div :var=".col{ col$[auto] h[10px] }">auto</div>

Last exemple with setting of all attributes.

HTML

                
    <script>
       ModCSS.attributes({
            grid: 'mod',
            props: 'xyz',
            var: 'let',
        })
    </script>


    <div mod="row[100%]">
        <div xyz="col$[5rem] co[orange]">5rem</div>
        <div mod="col[25%]">25%</div>
    </div>

    <div let=".col{ col$[auto] h[10px] }">auto</div>