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.

We are three specifics attributes.

• :mod : Use for flexgrid : container, row and columns.
• :box : It’s a for for all properties except flexgrid props
• :var: Use for updating/setting selector

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

                    
    <!-- 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> 
    
                

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

                    
    <!-- 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.

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.

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

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

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

                    
    // 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>