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.

It's small (only 10kb), it can easily be integrated into all your projects.

Install

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.
Below, you will see how to do both ways.

Load from CDN

CDN are designed for development purposes online and for production.

1. Put script somewhere into HTML head tag.

                    

        <script async src="https://cdn.jsdelivr.net/gh/modsLabs/MOD-CSS-3.x@main/dist/Mod-3.x.min.js"></script>
                    

Download script locally

The simplest and fastest way to get up and running from scratch is to download MOD-CSS script's from URL below, to use it locally offline or for hosting on your own server.

1. Click on link below to download the MOD-CSS script
(downloading can take some seconds before to start).

2. Put script somewhere into your HTML head tag.

                    
        <script async src="path/to/mod-css.min.js"></script>
                    

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.

Go play with

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

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