Flexbox grid

Our flexbox based grid can use any css units, can setting gap and offset, automatic sizing, custom width etc...
It is probably the most complete flexbox based grid ever created.

With last released, you can use our flexgrid properties with all others attributes and use them to define a selector.

5.4rem

100px

25%

auto

Row's width is set to 100%.
Columns can be any size. If overflow, new row is created.
Column "auto" get remaining space.

                            
    <div mod="row$[100%]">
        <div mod="col$[5.4rem]">5.4rem</div>
        <div mod="col$[100px]">100px</div>
        <div mod="col$[25%]">25%</div>
        <div mod="col$[auto]">auto</div>
    </div>

auto

Row with gap set on 10px.
You can use any arbitrary value.

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

auto offset 5%

fit with offset 15%

250px

10vmax

Columns with offset.
On row set a % or any rather than "auto" give you more flexibility.

                            
    <div mod="row$[100%]">
        <div mod="col$[auto 5%]">auto offset 5%</div>
        <div mod="col$[fit 15%]">fit with offset 15%</div>
        <div mod="col$[250px]">250px</div>
        <div mod="col$[10vmax]">10vmax</div>
    </div>

Breakpoints

We have six breapoints : xs, sm, md, lg, xl, xxl.
They can be used for responsiveness on any CSS properties, our pseudo-classes, our Felxgrid and for setting classes.

On any screen, width is 100% only from lg screen, width get 55%.

                            
    <input mod="w[100%] || lg? w[55%]" type="text" placeholder="Type here">

col1

col2

col3

According screen size, we change columns width.
The third column will be hide on lg screen and above. For this, we set display property on none.

                            
     <div mod="row$[100%]">
        <div mod="col$[100%] || md? col$[37.5%] || lg? col$[50%]">col</div>
        <div mod="col$[100%] || md? col$[37.5%] || lg? col$[50%]">col</div>
        <div mod="col$[100%] || md? col$[25%]" mod="lg? d[none]">col</div>
    </div>

Render() & renderInline() New

In the version 4x, we are introduced javascript function for more reactivity and for better using with any other JS based.
This functions is mainly designated for using with Js events.

                            
    let MOD = new MODCSS()
    MOD.render('#li', 'bg[#202020] co[#ddd] tx.al[center] br*p[4px] bd[1px solid #fff] && hover*focus: bg[orange]')
    
    MOD.renderInline(elt, 'bg[#202020] co[#ddd] tx.al[center] br*p[6px] bd[1px solid #fff]')"

Custom attributes

You can now define your own attributes.
Either you define all 3 of them at once, or you can define 1 or 2 depending on your choice. The default attributes will be used.

                            
    <script>
        ModCSS.attributes({
            props: 'xyz',
            var: 'let',
            })
    </script>

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

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

Pseudo-elements

Now, we fully supports ::before, ::after, ::marker and all others pseudos-elemnents.
Pseudo-elements works like Pseudo-States. just use two points :: before settings.

We set pseudo before with props.

Some quotes, he said, are better than none.

                            
    // Set a selector
    <div var=".q::before { con['_'] co[orange] }
        .q::after { con['E6'] co[orange] }"></div>
    <p>Some quotes, he said, <span class="q">are better than none.</span></p>

    //Or set props on HTML element
    <p>Some quotes, he said, <span mod="before:: con['_'] co[orange] && after:: con['E6'] co[orange]">are better than none.</span></p>

We change marker color.

Line 1
Line 2
Line 3
Line 4

                            
    <ol var="li::marker { co[red] }">
        <li>Line 1</li>
        <li>Line 2</li>
        <li>...</li>
    </ol>

Styling grammar-error.

My friends is coming to the party tonigt.

                            
    <p>My friends is coming to the party <span mod='grammar-error:: tx.de[wavy underline blue] co[orange]'> tonigt</span>.</p>

Pseudo-States

You can also use focus, active and all others pseudos-classes.

On bootstrap button, we change background, color and border on hover.

                            
<button class="btn btn-success" mod="hover: bg[purple] co[lightblue] bd[none]">..</button>

On checked, we change background-color.

Clic to turn into blue

                            
<input type="checkbox" mod="w*h[32px] ... && checked: bg[#3137fd80]">

When input is focused, we set background-color to transparent and bottom line in blue.

                            
<input class="input-line" mod="focus: bg[none] bd.co[blue]" type="text"  ..>

Selectors New

On new version, MOD-CSS supported now creation/setting of selectors.
If you use Bootstrap for example, you can easily update any class. You can do that with other CSS Framework like Bulma, Tailwind.

We've created a class who design a special input with only bottom line like google Material.

                            
// 1st. Create new class
<div var=".input-line { w[100% !important] m.tp[6px] p[.3rem] p.lf[1rem] h[35px] co[lightgray] bg[#90909010] ot*bd[none] 
    bd.bt[1px solid gray] && focus: bg[none] bd.co[gold] }"></div>

// 2nd. Set class on element
<input class="input-line"  type="text" placeholder="Type here">

On checked, we change background-color.

Line 1
Line 2
Line 3
Line 4
Line 5
Line 6

                            
1. Set selector
    <div var="
        li { p[4px 6px] m.bt[2px] }
        li:nth-child(even) { bg[#202020] co[#f4f4f4] }
        li:nth-child(odd) { bg[lightblue] co[blue] }
    "></div>

2. Create your elements
<ul mod="ls[none]">
    {% for x in '123456' %}
    <li>Line {{ x }}</li>
    {% endfor %}
</ul>

We've updated hover's properties of a Bootstrap button.

                            
// Update and setting classes
<button class="btn btn-primary">Primary</button>
<div var=".btn-primary:hover { bg[#0f256e] co[lightblue] bx.sh[0px 2px 3px 1px #12ace930] }"></div>

We've updated background-color and some effects of a Bootstrap button.

                            
// Update and setting classes
<div var=".btn-secondary{ bg[#EC3883] bd[none] && focus*hover: bg[#EC388380] co[pink] bx.sh[0px 2px 3px 1px #ea10a580]}"></div>

// or set ID or any other selector
<div var="#btn{ bg[#EC3883] bd[none] && focus*hover: bg[#EC388380] co[pink] bx.sh[0px 2px 3px 1px #ea10a580]}"></div>

// HTML Element
<button class="btn btn-secondary" id="btn">Secondary</button>

MOD-CSS remove all HTML elements with :var attributes after rendering. So, we keep your setup in safe.
Only your selectors setup on mod will be replaced by class.

                            
// Your setup in your HTML
// will be removed from DOM after rendering
<div var=".input-line { w[100% !important] m.tp[6px] p[.3rem] p.lf[1rem] h[35px] co[lightgray] bg[#90909010] }"></div>


// Before rendering
<div mod="w[100% !important] m.tp[6px] bg[#90909010] }"></div>
// After rendering
<div class="ge45x"></div>