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
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>
More than 200 CSS property
We have a codename for each propertry
You can use any arbitrary values on all properties
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 states
Use pseudo-classes with our properties
hover, focus, checked, active and unusual like nth-child, empty ...
HTML
<!-- 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
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 and :var
:mod use for flexgrid
:var use for selectors New
:box use for any other properties and/for setting selectors
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>
Multi-settings
You can set many properties in once
One value for many properties
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 10kB
Compatible with any CSS framework (Bootstrap, Tailwind, Bulma, Vue etc...)
Only one lightweight file (10KB)
Rendering speed optimized