Core concept of MOD-CSS

MOD is a CSS framework only javascript based, in single file. It was originally designed to prototype quickly, avoid external CSS, and speed up page loading.

Also, unlike other CSS that use variables representing values, we use absolute values.
MOD CSS is designed to precisely define the value you want to give to any CSS property and all this directly in your HTML.

Another special feature of MOD is that it does not use the traditional "class" attribute of HTML to style. We uses our own attributes to define your styles but also to structure your design. Each attribute is designed to accommodate a property type *. This approach is intended because it has proven its effectiveness during debugging, maintenance, teamwork and in general on the readability of the code.

Why use a utility-first tool like MOD-CSS ?

The fundamental difference between this one and other frameworks is that it only takes a JS file of 10KB to make it work. It doesn't depend on any other large external CSS or JavaScript library, just its JS script of 10KB that can generate more than 200 CSS properties (actually any properties you may need).

MOD can therefore be used in conjunction with any other Framework or library.
We supports following :

FlexGrid
Breakpoints
Setting selectors New
States && Pseudo-Elements
Custom attributes
All CSS properties

Core functionalities

MOD supports media query and has 6 breakpoints like most CSS frameworks: xs, sm, md, lg, xl, xxl to enable responsiveness.
We have our customisable very intuitive flexbox grid.
It also supports CSS pseudo-classes (states) like hover, active, link ...

CSS props are abbreviated to go fast, but the values of these will have to be written in absolute as you will in CSS.

FlexGrid

MOD provides a flexible grid system with a container, row and columns like Bootstrap.
Only, we use absolute values with CSS units to set the width. This makes it a fully configurable grid system with n columns instead of 12 or 24 like most frameworks.

HTML

                    
    <!-- Use only attribute :mod to set the flexgrid -->
    <!-- So, for a container which get 98% of screen's width -->
        
    <div :mod="container[98%]">
        <div :mod="row[100%]">
            <div :mod="col[25%]"></div>      // We set width = 25%
            <div :mod="col[10rem]"></div>    // We set width = 10rem
            <div :mod="col[auto]"></div>     // We set width = auto; to get all remaining space
        </div>
    </div>

Read more about here.

Breakpoints

Our system of breakpoints respect standards of UI conception. You can use it to enable responsive behaviour.
Some example to get this...

HTML

                    
    <!-- xs = @media(max-width 575.98px) -->
    <!-- md = @media(min-width 576px) -->
    <!-- We can use any MOD attribute to set breakpoints -->

    <div :box="xs? bg[pink] || md? bg[blue]"></div>  // On xs, set background = pink. On md, set background = blue
    <div :box="bg[pink] || md? bg[blue]"></div>     // On all screen set background = pink. From md, set background  = blue.

Read more about here.

States && Pseudo-Elements

You can use all CSS pseudo-classes in MOD CSS. Just call the state you want and set inside this one the properties you want applied.

HTML

                    
    <!--  Default background = blue. However, on hover set background = pink.  -->
    <div :box="bg[blue] && hover:bg[pink]"></div>
    
    <!-- When input is checked, set background = blue and hover set background = pink. -->
    <div :box="checked:bg[blue] && hover:bg[pink]"></div>   

    <!-- Setting pseudo-element and pseudos classes with selector -->
    <div :var="a::before { con[attr(data-g)] bg[blue] && hover:bg[pink] }"></div>

Read more about here.

Setting selectors

With last version, you can now set or update any selectors.

HTML

                    
    <!-- use attribute :var to set selector -->
    <!-- works also with :box  -->

    <div :var="p a{ h[100%] val[top !important] }"></div>
    <div :box="li:nth-child(odd){ co[#f4f4f4] bg[#303030] }"></div>

Read more about here.

Custom attributes

We use custom attributes to help developer to structure and read easily their template.

We don't use the class attribute, so you can call multiple styles on the same HTML element, combine MOD with other frameworks, or with any external stylesheet you might have designed yourself. It won't clutter up your design.

HTML

                    
    <!-- use attribute :mod only for flexgrid -->
    <!-- use attribute :var to set selector -->
    <!-- use attribute :box for all  -->

    <div :mod="container[55%]"></div>
    <div :box="w[100%] h[400px] m[.2rem 1rem]"></div>     
    <div :var="p a{ h[100%] val[top !important] }"></div>

Read more about here.

All CSS properties

Properties are abbreviated and named intuitively. A point separates a parent property from its descendants.
And if you only want to call the parent property, you just need its abbreviation followed by its value in square brackets.

As an example is better than a thousand words ...

HTML

                    
    <!-- background is abbreviated bg -->
    <!-- background-color is abbreviated bg.col -->
    
    <div :box="bg[#f4f4f4]"></div>   // background = #f4f4f4;
    <div :box="bg.co[red]"></div>   // background-color = red;

The complete list of supported CSS properties and their abbreviations are available here.