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