MOD-CSS is a free utility CSS framework for front-end development. It's can be used to design web page or any website.

We support setting of Selector, breakpoints, flexgrid, states, any CSS properties.It's very lightweight (only 10k), single file and only built with javascript.

Our inspiration :heart:

We want to go fast when you prototype or build a webpage from scratch. We don't switch between template and stylesheet while creation processing. Sometimes, we must to use arbitrary value because predefined classes don't macth with our needs. We want to extends our possibilities/design when we use ready-to-use Bootstrap, Bulma or Materialze components.

• Installation
• How to use it
• Define quickly any selector
• Standards breakpoints for reponsiveness
• Js Functions
• Fully customizable Flexgrid
• Set Pseudos on any component
• Multi-setter
• Tips

    npm i @dev-geos/mod-css

    import MODCSS, { MOD$ } from '@dev-geos/mod-css'

    let MD = new MODCSS()

    // Initialise modcss sur tous les elts du dom sans distinction
    MD.init('*')

    /* Initialise modcss uniquement sur tous les tags "section" du dom
    * MOD$ permet de lancer modcss sans l'instancier
    */
    MOD$.init('section')

    // Vous pouvez cibler tous les tags, meme les plus complexes supportés par Js.
    MOD$.init('div[data].a4')

    import React { useEffect, useCallback } from 'react';
    import { MOD$ } from '@dev-geos/mod-css';

    // Composant/ App principal
   function App() {
        // Exécute après le rendu initial, similaire à DOMContentLoaded
        useEffect(() => {
            // Initialisation basique de MOD
            MOD$.init('*')
            
            return () => {
            // Nettoyage (équivalent de beforeunload)
            console.log('Le composant est démonté');
            };
        }, [])

        // ou Exécute après le montage complet, similaire à Load
        const init = useCallback(function(node){
        // Initialisation basique de MOD
            MOD$.init('*')
        })


       return (
        <React.Fragment>
        <header class="header" mod="row$[100%]">
            <div>
                <img src="src/assets/react.svg" alt="logo" mod="h[20px] m.rg[20px]">
            </div>
            <button class="btn"  mod="bg[#202020] co[lightgray] val[sub] && hover*focus: bg[#333]"><i class='bx bx-user bx-md'></i></button>
        </header>
        </React.Fragment>
        <Resume svg={svg} bg_data={null} data={data} ref= {init}/>
      )
    }

1. MOD-CSS uses custom properties to call original css properties. These are abbreviated and named intuitively. To set a properties, call his equivalent MOD abbreviation followed by its value in square brackets.

w[10px]                 /* ==> width: 10px */
co[blue]                /* ==> color: blue */
p[var(--px)]            /* ==> padding: var(--px) */

1. We use custom attributes which are mod and var .

<div mod="col$[50%]"><div>   <!-- Use :mod to set only flexgrid props-->
<div mod="w[100px] p[9px] fo.sz[10px] co[#f4f4f4]"><div>    <!-- Use mod all properties -->

<div var=".rdx:checked +label { co[#7d33ff !important]} "><div>    <!-- Use for defining selectors -->

JAVASCRIPT FUNCTIONS

    //Define any selector via 
    MD.render('#li', 'bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff] && hover*focus: bg[orange]')
    // or
    htmlElt.render('bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff] && hover*focus: bg[orange]')

    // For setting style inline on Any Elt
    MD.renderInline(elt, 'bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff]')
    // or
    htmlElt.renderInline('bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] bd[1px solid #fff]')

    // To insert one or many selectors in Stylesheet
    MOD$.insert(`
        .w-100 { w[100%] }
        .col-50 { $col[50%] co[maroon] }
        .btn { hover: bg[blue] && before:: co[gray] h*w[50px] }
        .container { p[2% 4%] bg[#25252598] container$[98%] || lg? container$[90%] }
        .btn-dark { bg[#202020] co[#ddd] tx.al[center] br[4px] p[6px] ot[one] bd[1px solid #fff] && hover*focus: bg[orange] } 
        [col='25%'] { col$[25%] co[orange] bg[lightblue] }
        div > small { fo.sz[12px] ln.h[.8] }
    `)

    //return CSS string from modcss 
    MOD$.cssify(`
        .w-100 { w[100%] }
        .col-50 { $col[50%] co[maroon] }
        .btn { hover: bg[blue] && before:: co[gray] h*w[50px] }
        .container { p[2% 4%] bg[#25252598] container$[98%] || lg? container$[90%] }
    `)

    // Define custom attributes to serve your settings.
    MD.attributes({
     props: 'data-mod',
     var: 'data-var',
    })

   <div mod="row[100%]">
       <div data-mod="col$[5rem] co[orange]">5rem</div>
       <div data-mod="col[25%]">25%</div>
   </div>

   <div data-var=".col { col$[auto] h[10px] }">auto</div>

Breakpoints

| breakpoints | size | | :---------: | :------------------------: | | xs | Extra small < 575.98px | | sm | Small ≥ 576px | | md | Medium ≥ 768px | | lg | Large ≥ 992px | | xl | Extra Large ≥ 1200px | | xxl | Very Extra Large ≥ 1400px |

For calling, use [breakpoint] followed by ? . Ex: md? , lg?

Examples

⚠️ Noticed, when you don't set a breakpoint, value works on any screen. It is on this principle that we will define the others breakpoints while maintaining a default behavior.

a. We've set default values and added a custom width on medium screen.

<div mod="w[100%] p[6px] || md? w[80%]"></div>

/*CSS equivalent*/
div { 
    width: 100%;
    padding: 6px;
    }
@media only screen and (min-width: 768px) {
    div { 
        width: 100%;
        padding: 6px;
    }
}

b. You can use many breakpoints in same time and many more combinaisons...

<div mod="md? hover: w[80%] || lg? hover: w[76%] || xxl? w[72%]"></div>

Cheatsheet and almost supported properties can be found here Read more >

Selector

1. With a single tag, an id, class or any selecter supported by CSS3

<div var="pre { w[100%] wsp[pre-line] }"></div>
<div var="#dialog { h[100px] w[100vw] bg[#10101020] }"></div>  
<div var=".link { bg.co[#f8f8f850] m[1px 0px] p[4px 3px] br[3px] && hover:bg.co[#f8f8f8] }"></div>
<div var="pre, #dialog, .link:hover, [data-id='4'] { bg[white] bd[.25px solid #eee] p[4px 3px] fo.sz[13px] fo.wg[600] }"></div>

/*CSS equivalent*/
pre { 
    width:100%; 
    white-space:pre-line; 
    }

#dialog { 
    height:100px; 
    width:100vw; 
    background:#10101020; 
    }

.link { 
    background-color:#f8f8f850; 
    margin: 1px 0px;
    padding: 4px 3px;
    border-radius: 3px;
    }

.link:hover { 
    background-color:#f8f8f8; 
    }

.pre, #dialog, .link:hover, [data-id='4'] { 
    background: white; 
    border: 0.25px solid #eee;
    padding: 4px 3px;
    font-size: 13px;
    font-weight: 600;
    }

Flexgrid

MOD features a revolutionary n-columns grid system that allows you to create flexible and responsive with n size. It support natively automatique sizing, fit-content, precise sizing, gap and offseting. You can use any css unit to set them, call many flexbox properties to align, evenly distribute and precisely manage element dimensions.

Exzmples

a. Set a basic grid with a container, one row and two columns

<div mod="container$[95%]">
    <div mod="row$[100%]">
        <div mod="col$[45%]"></div>
        <div mod="col$[55%]"></div>
    </div>
</div>

In this case, add '$' sign

<div mod="container$[95%]">
    <div mod="row$[100%]">
        <div mod="col$[45%]"></div>
        <div mod="col$[auto]"></div>
    </div>
</div>

c. Grid with auto sizing columns

⚠️ Noticed Auto values try to get all remaining space

<div mod="container$[95%]">
    <div mod="row$[100%]">
        <div mod="col$[auto]"></div>
        <div mod="col$[auto]"></div>
    </div>
</div>

d Grid with fit content

⚠️ Noticed fit values try to limit the width to the space used by its content. It's also can be used on row (to respect design system prerequisite, don't use).

<div mod="container$[95%]">
    <div mod="row$[100%]">
        <div mod="col$[fit]"></div>
        <div mod="col$[auto]"></div>
    </div>
</div>

e. grid with custom units, one row and three columns

⚠️ Noticed Arbitray values define the real size of these elements. For best layout, use them sparingly because in most cases percentage values gives better responsive design.

<div mod="container$[100vmax]">
    <div mod="row$[100%]">
        <div mod="col$[100px]"></div>
        <div mod="col$[55%]"></div>
        <div mod="col$[auto]"></div>
    </div>
</div>

f. Grid with gap between columns

⚠️ Noticed You can defined gap with any css units. If you work with percentages, use gap in percentage to avoid ugly layout. Gap take a part in total row size, keep in mind this before you set size of columns to avoid overflowing. Gap can be set on X and Y in once, Y only or X only.

<!--same value on X and Y-->
<div mod="row$[100% 1%]">
    <div mod="col$[48%]"></div>
    <div mod="col$[48%]"></div>
</div>

<!--different values - X: 2% and Y: 1%-->
<div mod="row$[100% 2% 10px]">
    <div mod="col$[100px]"></div>
    <div mod="col$[auto]"></div>
</div>

g. Grid with offset in columns

⚠️ Noticed You can defined offset with any css units. Offset is a left-margin and take a part in total row size. Offseting can also be used to simulate a gap between columns (if you don't want to use regular gap)

<!--We define offseting 25px on both columns-->
<div mod="row$[100%]">
    <div mod="col$[25% 25px]"></div>
    <div mod="col$[auto 25px]"></div>
</div>

h. Grid columns with centered content

⚠️ Noticed We combine flexbox habilities of row with justify-content property.

<div mod="row$[100%]" mod="ju.co[space-evenly]">
    <div mod="col$[auto]"></div>
    <div mod="col$[auto]"></div>
</div>

Read more >

Pseudos/ states

Theoretically, all pseudo classes/states && elements are supported.

a. Easy simple calling

<!-- For pseudo classes or states -->
<div mod="hover: bg[lightblue]"></div>
<div mod="nth-child(even):bg[lightgray]"></div> 

<!-- For pseudo elements, add :: -->
<div mod="after:: fo.wg[bold] co[lightblue]"></div>
<div mod="mark:: fo.wg[bold] co[lightblue]"></div>

b. Calling before else In this case, setting of states always ends by && to add another pseudo or properties outside of it

<div mod="hover: bg[lightblue] && bg[blue]"></div>
<div mod="after:: bg[lightblue]"></div>

 <tr mod="hover:fo.wg[700] co[#198754] bg[#0bcf8466] && bg[lightgray]"></tr>

c. Calling after else In this case, states always start by && to add it outside of properties already set

<div mod="bg[blue] && hover: bg[lightblue]"></div>
 <tr mod="bg[lightgray] && hover: fo.wg[700] co[#198754] bg[#0bcf8466]"></tr>

<tr mod="bg[lightgray] && before:: fo.wg[700] con['.'] bg[#0bcf8466]"></tr>

d. Multi states and Multi-affect In the first example, we are using a special MOD option With Multi states, just call && to separe them.

<div mod="hover*checked: bg[lightblue]"></div> 

<tr mod="hover: fo.wg[700] co[#198754] bg[#0bcf8466] && nth-child(even): bg[lightgray]"></tr>

Read more >

Multi setter

MOD has an option that allows you to assign to several properties with the same value at once. This one can be used on any property.

<button mod="w*h[100%] m*p[6px]"></button>

/* Css equivalent */
button {
    width: 100%;
    height: 100%;
    margin: 6px;
    padding: 6px
}

Properties

All supported properties, can be found :

• Here
• Cheatsheet