DEV Community: Dev Geos

MOD-CSS v4 — Now Fully Compatible with React (and Most Modern JS/TS Frameworks) 🚀

Dev Geos — Tue, 12 Aug 2025 07:35:58 +0000

The brand-new MOD-CSS v4.x is here with some great news: it’s now fully compatible with React and most modern JavaScript/TypeScript frameworks.

In this article, I’ll show you how to integrate it effortlessly into your project and unleash its full potential to create fast, modular, and highly customizable interfaces.

📦 Quick Installation

Simply add MOD-CSS to your project via npm:

npm i @dev-geos/mod-css

⚡ Integrating MOD-CSS into React

Integration is incredibly simple: just call the init() method once in your root component. MOD-CSS will then automatically apply your dynamic styles across all components inside it.

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

function MainComponent() {
  const init = useCallback((node) => {
    if (node) {
      const MD = new MODCSS();
      MD.init();
    }
  }, []);

  return (
    <div className="grid" ref={init}>
      {/* Your content */}
    </div>
  );
}

export default MainComponent;

🎯 The Two Key Attributes: mod / data-mod and var / data-var

With MOD-CSS, you only need two attributes to handle all your styling:

mod or data-mod — to apply predefined styles
var or data-var — to manage/edit your selectors

They are fully interchangeable, so you can use the data-* convention or keep it short for faster writing.

🛠️ A Few Examples

1️⃣ A Responsive flexgrid in few Line

<div mod="row$[100%]">
  <div mod="col$[80%] || lg? col$[60%]">Block 1</div>
  <div mod="col$[20%] || lg? col$[40%]">Block 2</div>
...
</div>

2️⃣ Reactive Behavior Based on Screen Size

<div mod="w[100%] bg[blue] || lg? w[75%] || 2xl? w[50%] bg[pink]">
  {/* I change background and width depending on the screen size */}
</div>

3️⃣ Easily Customize a Component

<Button mod="bg[lightblue] co[#333] br[9px] && focus*hover: co[blue] br[4px]">
  {/* Button (background, color, Radius 4px) */}
</Button>

🚀 Why Choose MOD-CSS?

Ultra-lightweight — no unnecessary overhead

Minimal syntax — write less, do more

Highly customizable — built-in variables and reactive behavior

More than 200 properties - support most CSS properties

Fresh rendering - Your settings are deleted after rendering. Nothing appears on client side

Universal compatibility — works with React, Vue, Svelte, Angular, Vanilla JS…

Developers around the world have already adopted it !

In an upcoming article, I’ll dive into all the advanced MOD-CSS features that can supercharge your front-end projects.

See you soon 👋

Official website

Review of (nearly) 5 years of MOD-CSS programming

Dev Geos — Thu, 08 May 2025 19:32:02 +0000

I recently red a post by Ryan, the creator of SolidJS, where he reflected on ten years of developing his solution.
I commented on the post, but it also got me thinking, because I’ve been working on MOD-CSS too for almost five years now.

I wonder about the point of continuing

I find myself questioning whether it’s still worthwhile to continue:

to improve it,
to maintain code,
to keep the website up to date (that last part is more hardest for me).

The first goal was to create tools for rapid prototyping without ever leaving the template and that has been more than achieved since version 2.
Today we’re on the fourth stable release.
Features I hadn’t even imagined at the start (like the REPL and JavaScript's functions) have since been created and work well. So that should be enough, right? Not at all—I keep coming up with new ideas for improvements as my own needs evolve.

The Frustration

The idea of its creation came simply from frustration. I was (and still am, to some extent) a user of Bootstrap for its ready-made components, but I felt hampered by its limitations when it came to quickly customizing them and UI. The best alternative was Tailwind, but it made the template feel disordered and I didn’t like that.
I have to admit: I love simplicity, and complex solutions bore me.

He’s at the summit alone… or almost

From the start I’ve been working solo. My little pleasure is watching the script improve from one release to the next and seeing it works well. But oh, how much better it would be if I could discuss it with actual users or anyone interested… Sometimes I feel it’s more of a personal obsession than a useful solution for UI development needs.

When you build something for yourself first

It began as a project to satisfy my own needs, and then I decided to share it with anyone who might find it useful. And maybe that’s a big problem :
from the outset I’ve built it primarily for myself, so I’ve never felt a strong urge to promote it.
On the other hand, as I mentioned above, I’d love to have conversations about it but how will be happen if no one knows that ?

Trends Change… Needs Do same

Another question I had was whether MOD-CSS’s paradigm doing most of the UI creation/customization on the client side has become outdated. There’s now a strong trend toward server-side rendering and sending fully composed pages to the client.
For my part, my design needs are modest, so adding that complexity would be an unnecessary burden. At most, for a time-saving boost, I choose to cache pages server-side into which I inject the same external data. That’s always been enough for me in Django. What about you ?

Lessons Learned from Almost Five Years

Your documentation can save your own life
I mentioned earlier that I didn’t like writing documentation or preparing usage examples. But how many times that same documentation and examples saved me when I’ve forgotten how certain functions work ? (I’m ashamed to admit it.) Good docs aren’t just for users, they’re a lifesaver for the author too.
You also need versioning.
Why? versioning helps you to see in which direction your project is going forward.
Sometimes you get discouraged because it feels like you’re going nowhere but with version history and features tracking, you can measure your progress.
No one serves you better than yourself.
A tool you build yourself will always fit your needs perfectly but it often takes a lot of time. Before embarking on that long journey, make sure a similar (and popular) solution doesn’t already exist. It would be a shame to spend months building something you then can’t use in client projects for security or other policy reasons.
Unusual paradigms don’t inspire confidence.
If your library breaks well trodden design paths like MOD-CSS does expect to be pretty much alone at first, and maybe at the end too...
It can be hard to get others to adopt.
Just because something doesn’t interest a large public doesn’t mean it’s bad or obsolete.
A professional developer’s tool choices are heavily influenced by market trends and project requirements. If the market doesn’t demand it, there’s often no incentive to learn it, however interesting the tool may be.
It always takes longer than you think.
If you plan to do it in one month, plan for three. I never imagined I’d work so long on MOD-CSS. Things rarely go as you imagine. For example, it took me almost one year and a half to build MOD-CSS’s core rendering engine. After that, I had to optimize it from (nearly) scratch two or three times because some features didn’t integrate well with the rest.
Few stars on GitHub or none doesn’t necessarily mean poor quality.
More often, you’ll have to open your wallet to advertise yourself (even if you’re extremely talented). In reality, the one who’s really good is the one who’s popular. I’m not the one saying it, it’s the internet ^^.
You’ll probably never become the next Elon Musk or Mark Zuckerberg without some serious lobbying (sorry, I digress).

And finally

Some tools be so specific that cannot concerns large majority of users. You have to be aware of that.
However, if it fine for you, that’s already good for developing your own solution.
It takes a lot of time, energy and money to get your work noticed online.

It was great to talk about all of this.
Thanks for reading.

Gilles ;-)
(sorry for my bad english)

Another way to create a user interface - New project

Dev Geos — Thu, 15 Feb 2024 15:17:38 +0000

Short history ...

We are in the middle of 2021. I got to work on static sites for personal purpose. At the time, I only used Bootstrap and Django for my sites. Interactions between DOM elements are done with vanilla.

I'm looking for ways to avoid repetition and delivered fast, so I'm doing some research. I'm testing REACT, VueJS, Tailwind which seem to work very well but I'm still not comfortable with it. And their learning curves are unpredictable...

Afterwards, I started working on my first tool which will be later released to public: MOD-CSS. I did it to work with to Bootstrap, to do CSS in templates and to prototype quickly.

In 2023, I'm testing SVELTE and I like it. Very easy to understand, intuitive but I'm stuck with the integration into Django. It's doable but it requires some manipulations which breaks my balls ^^. So, event if I love SVELTE, my need for a component manager tiny with single file that integrates with almost any backend remains...

Because we are better served than by ourselves

(in theory)

I decide once again to create my own tool according to my ideal.
In the best of all worlds, a good component manager must at least allow :

creation of reusable HTML components
Data binding (read-only or not)
CSS injection for each component (with possibility of loading via stylesheet).
2 modes of instantiation of components: directly via a tag in template and/or by calling a class.
- The mode by the class must allow adding of new parameters and/or updating default parameters.
- Loading via tag must allow customization of the component by modifying/updating of certain parameters.
No virtual DOM to avoid slow loading.
Monitoring updates on component
Everything is full javascript without dependency, only based on vanilla native APIs.

I hate complexity because I am lazy

Yes I admit it, I'm a lazy man. I don't like searching, nor do I break my ass; although as a developer it should be considered a sin not to do it.

I like simple things: a simple object to define its component.

Most of the time, we use Json to save application settings and it works well. Because it's simple, universal, fast and above all it's human readable. why not do the same with components?

A good unbranded t-shirt, which fits well and has a unique color, what could be better? Ok I'm digressing from the main topic.

Short code looks like ...

We create a component that we will reuse

import { Component } from 'http://127.0.0.1:8000/static/Engine.js' 

new Component('liste', {
    template: `<ul class="ul">{{li}}</ul>`,
    css: `.ul { list-style: none; padding: 0; width: 90%; margin: 15px; }
    .ul li { color: {{co}}; background: {{bg}}; padding: 6px 15px; border: 0.5px solid #ddd; cursor: pointer; } 
    .ul li:hover { background: lightblue; color: blue; font-family: monospace} 
    .ul li:first-child { border-radius: 6px 6px 2px 2px; }
    .ul li:last-child{ border-radius: 2px 2px 6px 6px; }`,

    props: {
        bg: 'lightgray',
        co: '#202020',
    },
    events: {
        pointerup: function(event){
            console.log(event.target.textContent + " li hover")
        }
    },
})

As you can see, we can use props in the CSS of the component, which will prevent the component from having the same look each time.
This works like an injection system, so you should in principle be able to dynamically load lists or any data. But, I admit, I haven't test it yet.

1. We instantiate via Tag

The first parameter of new Component() was the component class name/tag name. we use it followed by $.
And the attributes are the props that we are going to update so that they render something else.

    <liste$ bg="#70707020" co="blue"></liste$>

Don't worry, this tag is replaced by its original on rendering.

2. We instantiate via the class

For the moment, via the class, we always instantiate under addEventListener 'DOMContentLoaded'.

The first parameter of new Component() was the class name.
So, we just do a simple new classname() followed by define.

the component will be rendered as last child of the selector you define in parent.

I add another event specifically for this instance.

   // Chargement des lignes
   var array = ""
   var y = ['John DOE - UK', 'Dev GEOS - CI', 'Jack MA - CHN', 'Bill GATES - USA', 'Mark ZUCKERBERG - USA']
   y.forEach((x) => array +=`<li>${x}</li>`)

  // instanciation
     document.addEventListener('DOMContentLoaded', ()=>{
         new liste().define =  {
             parent: 'body',
             props: {
                bg: "#70707020",
                co: "blue",
                li: array
             },
             events: {
                pointerleave: (e)=> { 
                  console.log('Hover' + e.target.textContent)
                   }
            },
     }
})

And finally...

Here is a small presentation of my current project. I grant you the title is not very suitable but if you don't like this design paradigm, I dare to believe that you will do as in the title.

Otherwise, If this interests you, it is with pleasure that I read you and I will tell you more about it.
Let me know please.

Thanks !

PS: Sorry for my bad english ;-)

Let's redefine our way to do webpage

Dev Geos — Tue, 09 Jan 2024 10:42:42 +0000

I was eating when I had this crazy idea.
I show you the code directly :

   <section container="90%">
       <div row="100%">
          <div col="25%">col 1</div>
          <div col="25%">col 2</div>
          <div col="50%">col 3</div>
       </div>
   </section>

So, this snippet is not like you see commonly or what you're writing. But if you're a webdev for a while, you probably understand at first glance what this means. And that's what is great !

If we have to write code, it should be fun for we and understandable by others. What do you think ?

Then, how to do that in fact ?

I used MOD-CSS to set quickly selectors for layout, like below :

<div :var="[container='90%']{ container$[98%] || lg? container$[90%] }"></div>

<div :var="[row='100%'] { $row[100%] tx.al[center] }"></div>

<div :var="[col='25%']{ $col[25%] }"></div>

<div :var="[col='50%']{ $col[50%] }"></div>

I can understand that this code is a little confusing at first, but that's really all you need to write to get a great responsive grid.

I designed MOD-CSS for this things, quick design.
There are still many other features to help you speed up your workflow, so don't hesitate to test as needed...

Tell me what you think of this approach :-)

=> codepen here

How does a developer spend New Year's Day?

Dev Geos — Mon, 01 Jan 2024 10:02:26 +0000

Before any else, happy new year to all.

For most of us, I can see us with our families to share the first meal of the year. No coding today !

For others, as soon as the wishes are made, work to finish, a project to refine, a customer to satisfy, No time to take a break ...

And someone, although the family is present, there is this desire to disappear for few minutes to test the code that he found in its dream...

In which case are you ?

New Features - overview MOD-CSS 3x

Dev Geos — Sun, 24 Dec 2023 10:48:27 +0000

Iam very happy to present in video the 3rd release of MOD-CSS,

Follow this link for text overview

Or please, check below

youtube.com

MOD-CSS 3.x (new version)

Dev Geos — Tue, 19 Dec 2023 11:29:09 +0000

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).

Github repository

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 !

MOD-CSS Breakpoints - examples & tutorial

Dev Geos — Wed, 11 Jan 2023 12:13:24 +0000

The importance of media queries to define breakpoints is no longer to be demonstrated in the creation of responsive/adaptative UI.
If most CSS frameworks are limited in this, this is not the case MOD-CSS which fit good with any CSS property; The combinations are endless.

In this series of tutorials, you can take advantage of it in creating your user interfaces.

Using CSS Media Queries for Responsive Apps

MOD-CSS encourages mobile-first design, so display on mobile is what you need to think first, and then plan for display on larger screens.

Basic example - One row, two responsive columns

In this basic example, each column in the flexgrid hold on a row when you're on mobile.
On larger screen (md? = 768px and above), the column's width i
ncreases to 50%. This will make them both fit on one row.

Second example - one columns take 70% of row's width with gap

In this example, on lg breakpoint (lg? = 992px and above) second column takes 70% of width and the first column resized to 30%.
The row set gap of 2% between them

MOD-CSS
MOD-CSS is a lightweight CSS framework that allows you to quickly create flexible UI without using to traditional way of CSS.
It can be used in conjunction with Bootstrap, Bulma .. Tailwind without hindering their use.

Documentation breakpoint
Github

Create a responsive portfolio in single page with horizontal scrolling, Django and MOD-CSS (2023)

Dev Geos — Fri, 06 Jan 2023 11:16:01 +0000

Short history

I have been coding for a few years now as an enthusiast and I thought it would be time to expose all my most accomplished projects rather than keep them in the closet.
Some of them may etre interesting for other developer and then who knows that will not open other doors for me :).

So ...

I will share with you the creation and programming of my portfolio with the code and various settings.
I will use Python Django on the backend, Cpanel as manager.
On the client side, maybe a little bootstrap, MOD-CSS and the CSS-HTML-JavaScript trio.

Next ...

In the next post, I will start directly the configuration of the project. If you want to see how to set up CPanel Manager, let me know otherwise I would avoid it.

So, see you soon

How to reproduce hover effect on tags dev.to ?

Dev Geos — Wed, 28 Dec 2022 14:09:40 +0000

Today, while passing through the site, I noticed this effect that occurs when hovering over one of the site's tags (just below the article titles).
I wanted to try to reproduce this effect. I explain below how I did it :

1. Use html link with a href

These tags are hypertext links that's why you can click on them and be redirected elsewhere on the site.

<a href="https://dev.to/t/css">#css</a>
<a href="https://dev.to/t/beginners">#beginners</a>
<a href="https://dev.to/t/programming">#programming</a>
<a href="https://dev.to/t/modcss">#modcss</a>

2. Customize this

In this case, the links are decorated with invisible border, an padding, the text decoration (underline) has been disabled, a color has been applied to the text and a rounded edges effect.

NB: So, it's very important to add a thickness to the border beforehand even if it will be invisible. This avoids moving the other components when hovering over.

I use MOD-CSS, a utility to quickly set style and manage states.

<a href="..." :box="tx.de[none] co[#202020] p[.5rem] br[6px] bd[1px solid transparent]">#css</a>
<a href="..." :box="tx.de[none] co[#202020] p[.5rem] br[6px] bd[1px solid transparent]">#beginners</a>
...

Meanings
text-decoration: tx.de
color: co
border-radius: br
padding: p
border: bd

3. Add hover effect

When hovered, the border reappears and the background is colored. Thus, we add a color of border and background.

<a href="//" :box="... && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#css</a>
<a href="//" :box="... && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#beginners</a>

Meanings
&& hover : to set properties on hover state
background : bg
border-color: bd.co

4. that's all !

full code

<a href="https://dev.to/t/css" :box="tx.de[none] co[#202020]
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#css</a>

<a href="https://dev.to/t/beginners" :box="tx.de[none] co[#202020]
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#beginners</a>

<a href="https://dev.to/t/programming" :box="tx.de[none] co[#202020] 
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#programming</a>

<a href="https://dev.to/t/modcss" :box="tx.de[none] co[#202020]
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#modcss</a>

You can find snippet on codepen

What is the perfect Christmas for a Web developer ?

Dev Geos — Sun, 25 Dec 2022 08:29:09 +0000

Got up early, I'm one of those who took 10 minutes (in theory, but more than this in fact) to check something inside code before starting the day.
It's stronger than me not to let go of my computer 😪.

And you ?
Merry Christmas 🎄✨️

Move down effect on hover with a Bootstrap button

Dev Geos — Tue, 20 Dec 2022 14:10:32 +0000

Bootstrap is often criticized for its look of his components very similar on the most website. It is therefore common to customize them with CSS.

If you want to be able to do it quickly, MOD-CSS is for you.
MOD-CSS is a lightweight framework that allows you to quickly customize your Bootstrap components.

For example, on a button, we'll quickly add a move down effect on hover.

HTML code

 <button class="btn btn-success" 
  :fx="trn[all .3s ease] && hover:trf[translateY(10px)]">
  Hover-me
</button>

trn = transition
trf = transform

Test on codepen here

What is MOD-CSS ?

It is a utility-first and an alternative to Bootstrap and Tailwind.

Mod-css.com
Github