DEV Community

Cover image for MOD-CSS 3.x (new version)
Dev Geos
Dev Geos

Posted on • Edited on

MOD-CSS 3.x (new version)

#webdev #javascript #css

With great excitement that I announce version 3 of MOD-CSS.
The new features :

Your own attributes

Now, you can choose the attribute names to work with MOD-CSS.

<script> ModCSS.attributes({ grid: 'mod', props: 'xyz', var: 'let', }) </script>
Enter fullscreen mode Exit fullscreen mode

Enhanced flexgrid

Use our flexgrid properties in any MOD-CSS attributes.
Just add dollar sign '$' in this case.

<div :mod="row[100%]"> <div :box="col$[5.4rem]">5.4rem</div> <div :mod="col[25%]">25%</div> ... </div> <div :var=".col{ col$[auto] h[10px] }"></div>
Enter fullscreen mode Exit fullscreen mode

Enhanced support of pseudo-Elements

We have improved support for pseudo-elements (before, after, mark...). You can use them as you do with pseudo-classes.
Just use double colon '::' when you set them.

<!--Set a selector--> <div :var=".q::before { con['_'] co[blue] }"></div> <div :var=".q::after { con['E6'] co[blue] }"></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 :box="before:: con['_'] co[blue] && after:: con['E6'] co[blue]">are better than none.</span> </p>
Enter fullscreen mode Exit fullscreen mode

Rewriting the script

We have upgraded the code to a more recent JavaScript version.
The rendering engine is more lighter than before but also faster, (only 9 kilobytes).

Github repository

Complete exemple

Define your attribute(s) (one or all)

<script> ModCSS.attributes({ grid: 'mod', props: 'xyz', var: 'let', }) </script>
Enter fullscreen mode Exit fullscreen mode

Call them in your markup

<body> ... <div mod="container[75%]"> <div xyz=" m.rg[1.2rem]"></div> <div let=".mr-3{ m.rg[1.2rem] }"></div> </div> </body>
Enter fullscreen mode Exit fullscreen mode

So, try-it and fun !

Top comments (0)