Build or prototype faster.
We supports almost all CSS properties.

Quickly define breakpoints, states and selectors.
MOD-CSS is a free utility-first CSS framework for front-end development.


Responsive Behaviours

Flexible grid system based on flexbox
You can use any CSS unit, gap or offset
Container Row Col Six breakpoints
HTML
                            
    <!-- Simple flexbox grid -->
    <div :mod="container[86%]">
        <div :mod="row[100%]">
            <div :mod="col[100%] || md? col[75vw]">1</div>
            <div :mod="col[100%] || md? col[250px]">2</div>
        </div>
    </div>
                        
New Define your own class with our grid properties
                            
    <!-- Defining CSS class -->
    <div :var=".col-50 { col$[50%] || lg? col$[55vw]}"></div>
    
                        

More than 200 CSS property

We have a codename for each propertry
You can use any arbitrary values on all properties
Cheatsheet Properties List
HTML
                            
    <!-- Custom Button with background, color, outline*border, border-radius and padding -->
    <button :box="bg[rgb(255, 71, 87)] co[white] ot*bd[none] br[4px] p[4px 6px]">Click on Me</button>
                        

Support pseudos

Use pseudo-classes and pseudo-elements with our properties
Before, after, hover, focus, checked and unusual like nth-child, empty ...
States : hover, active ... any states
HTML
                            
    <!-- Two ways to do that -->
    <button :box="hover: bg[#f5df68] co[blue]">Hover on Me</button>  <!-- like properties -->
    
    <div :var="button:hover { bg[#f5df68] co[blue] }"></div>  <!-- like selector -->
                        
New pseudo-elements : before, after, marker ...
                            
    <!-- Two ways to do that -->
    <li :box="before:: bg[#f5df68] con['blue']"></li>  <!-- like properties -->

    <div :var="li::before { bg[#f5df68] con['blue'] }"></div>  <!-- like selector -->
                        

Define your own CSS class

You can create new one or update any selector
Call your selector and set properties inside
You can update any class or selector of your favorite CSS framework
Or simply build your own setup
HTML
                            
    <!-- setting selectors and classes -->
    <div :box=".mr-3{ m.rg[1.2rem] }"></div>
    <div :var="#select{ p[6px] }"></div>
    <div :var="li:nth-child(odd){ bg[lightgray] fo.sz[14px] }"></div>
                        

Custom Attributes

We use 3 specials attributes for settings
:mod :box, :var and custom choice
HTML
                            
    <!-- setting selectors and classes -->
    <div :box=".mr-3{ m.rg[1.2rem] }"></div>
    <div :var="#select{ p[6px] }"></div>
    <div :var="li:nth-child(odd){ bg[lightgray] fo.sz[14px] }"></div>
                        
New Define your own attributes for using in all the project.
                            
    <!-- For example, in conflict situations with other attributes -->
    <script>
       ModCSS.attributes({
            grid: 'mod',
            var: 'let',
            props: 'xyz'
        })
    </script>

    <body>
        <div xyz=" m.rg[1.2rem]"></div>
        <div let=".mr-3{ m.rg[1.2rem] }"></div>
    </body>
                        

Multi-settings

You can set many properties in once
One value for many properties
Set many properties once with same value
HTML
                            
    <!-- Multi settings - Set 6px on border-radius, margin and padding -->
    <!-- or set hover, focus and many states once -->
    <div :box="br*m*p[6px]"></div>
    <div :box="hover*focus: bd.co[#fff]"></div>
    
                        

All possibilities with a single javascript file of 9kB

Compatible with any CSS/JS/Typescript framework (Bootstrap, Angular, Tailwind, Bulma, Vue etc...)
Only one lightweight file (9KB)
Rendering speed optimized
Version 3x with many new features

Getting started

Install

It is very easy to set Mod CSS for your project. You can add URL to your script tag or to host locally the script for loading into your project.

Usage

Our properties are abbreviated and named intuitively. A point separates a parent property from its descendants followed by its value in square brackets.

Presets

We help you to start quickly with MOD CSS, we provided multiple examples, presets and effects : button, card, inputs, textarea, navigation, picture ... and much more