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
Requests
Hits
Bandwidth
Bytes downloaded
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 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
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 ...
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 -->
<!-- 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