Getting Started with MOD-CSS

MOD-CSS is a free utility-first CSS framework for front-end development.
It's only build with javascript (in single file) and supports breakpoints, flexgrid, states and CSS properties .

MOD-CSS can be used in conjunction with most popular CSS frameworks and libraries (like Bootstrap, tailwind, Bulma) without hindering their rendering performance.

For example, you can use MOD-CSS to quickly customize components built with Bootstrap.

Now, we have two mode for working with MODCSS.

Install (default)

Design to load MODCSS automatically after page loading. Use this for most cases.
Load like below.

HTML 
                                
            
    <script async src="https://cdn.jsdelivr.net/gh/gilles-ossin/MOD-CSS@main/dist/mod-css.min.js"></script>

Install (manual script)

Design to load MODCSS manually by using Js functions init(), render() or renderInline().
Prefer this for using with any frameworks like React, Svelte, VueJs ... and where you don't need auto-loading from start.
You need to style only with our Js functions render(elemnt, value) & renderInline(elemnt, value)

HTML 
                                
            
        <script async src="https://cdn.jsdelivr.net/gh/gilles-ossin/MOD-CSS@main/dist/mod-css.manual.min.js"></script>
Go play with

That's all ! You are now ready to use MOD-CSS .

Congratulations !

HTML 
                                
        <div mod="m[0px 8px] co[orangered] float[left]">
            Congratulations !
        </div>

Design to use like module and improve compatibility by using Js functions render(), renderInline()...
Please this for using with any frameworks like React, Svelte, VueJs ... and where you don't need auto-loading from start.

Visit our npm homepage Here

Install from npm
BASH 
npm installl @dev-geos/mod-csss">
Import and Use it
JS 
                                    
    import { MOD$ } from '@dev-geos/mod-css'

    let MD = MOD$()
    MD.init()

    MD.render('#target','bg[lightgray] co[#333] bd[1px solid gray]')        
    MD.renderInline('#target4', 'p[4px] bg.co[yellow] co[#322] bd[1px solid gray]')
Or Get our Github

You can get our Github repository for download the library. Also, demo files are available and some exemples for getting started.

* If you have issues or requests, let us know in repository issues/discussions.