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>
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>
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>
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).
Complete exemple
Define your attribute(s) (one or all)
<script>
ModCSS.attributes({
grid: 'mod',
props: 'xyz',
var: 'let',
})
</script>
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>
So, try-it and fun !
Top comments (0)