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

Quickly define breakpoints, states and selectors.
MOD-CSS improve flexbox utlities and front-end development

Get it Now
Documentation

Requests

Hits
Bandwidth

Bytes downloaded

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>
                        
Define your classes with our flexgrid
                            
    <!-- 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 mod="bg[rgb(255, 71, 87)] co[white] ot*bd[none] br[4px] p[4px 6px]">...</button>
                        

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 mod="br*m*p[6px]"></div>
    <div mod="hover*focus: bd.co[#fff]"></div>
    
                        

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 mod="hover: bg[#f5df68] co[blue]">Hover on Me</button>  <!-- like properties -->
    
    <div var="button:hover { bg[#f5df68] co[blue] }"></div>  <!-- like selector -->
                        
pseudo-elements: before, after, marker ...
                            
    <!-- Two ways to do that -->
    <li mod="before:: bg[#f5df68] con['blue']"></li>  <!-- like properties -->

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

Define your own selector(s)

You can create new one or update any selector
Call your selector and set properties inside
New Define many selectors in once You can update any selector of your favorite CSS framework Or simply build your own setup
HTML
                            
    <!-- setting selectors and classes -->
    <div var="li:nth-child(odd){ bg[lightgray] fo.sz[14px] }"></div>

    <!-- create your classes -->
    <div var="
        .rw-100 { row$[100% 1%] fl.wp[wrap] }
        .col-50 { col$[100%] || xl? col$[50%] }
        .q::before { con['_'] co[orange] }
        .q::after { con['E6'] co[orange] }
        li::marker { co[red] }
        .ul li:nth-child(even) { bg[#202020] co[#f4f4f4] }
        .ul li:nth-child(odd) { bg[lightblue] co[blue] }
        .unit > li{ p[8px] m.bt[4px] bd[.25px solid #2f4a83] bg[#3d4353] br[2px] && hover: bg[#282c34] co[#808080] }
        .rdx:checked +label{ co[#7d33ff !important] }
        .rdw:checked +label{ co[#ff8929 !important] }
    ">
    </div>
    
                        

Javascript functions New

For more interactivity, you can now use our javascript functions to set any selector with MODCSS.
render() - renderInline()
HTML
                            
    // Select your selector or HTMLElement -->
    // put your MODCSS properties -->
    let MOD = new MODCSS()
    MOD.render('#li', 'bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff] && hover*focus: bg[orange]')
    
    MOD.renderInline(elt, 'bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff]')
                        

Custom Attributes New

We use 2 specials attributes for settings
mod, var and custom choice
HTML
                            
    <!-- For example, in conflict situations with other attributes -->
    <script>
       ModCSS.attributes({
            var: 'data-var',
            props: 'data-mod'
        })
    </script>
    
                        
                            
    <div data-mod='m.rg[1.2rem]'></div>
    <div data-var='.mr-3{ m.rg[1.2rem] }'></div>
    
                        

All possibilities with a single javascript file of 10kB

Version 4x with two modes : autoload script and manual load script.
Compatible with any CSS/JS/Typescript framework (Bootstrap, Angular, Tailwind, Bulma, React, Svelte etc...)
Only one lightweight file (10KB)
Rendering speed optimized

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