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

More than 200 CSS property

We have a codename for each propertry
You can use any arbitrary values on all properties
Cheatsheet Properties List
    <!-- 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 states

Use pseudo-classes with our properties
hover, focus, checked, active and unusual like nth-child, empty ...
Set quickly hover, active and any pseudo-class directly
    <!-- setting properties on hover -->
    <button :box="hover: bg[#f5df68] co[blue]">Hover on Me</button>

Define your own CSS class

You can create new one or update any selector
Call your selector and set properties inside
NewYou can update any class or selector of your favorite framework
Or simply build your own setup
    <!-- 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][14px] }"></div>

Custom Attributes

We use 3 specials attributes for settings
:mod :box and :var
:mod use for flexgrid :var use for selectors New :box use for any other properties and/for setting selectors
    <!-- 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][14px] }"></div>


You can set many properties in once
One value for many properties
Set many properties once with same value New
    <!-- 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:[#fff]"></div>

All possibilities with a single javascript file of 10kB

Compatible with any CSS framework (Bootstrap, Tailwind, Bulma, Vue etc...)
Only one lightweight file (10KB)
Rendering speed optimized

Getting started


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.


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


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