Intro
For my projects, I use reset.css and a set of utility classes without external libraries. (which I learnt from my prev company, I learnt a lot from there, when I joined a big company.. it was not the same, enterprise wise its different yea..sure but it has its pros and cons), I move them from project to project. This eliminates it and makes it easier to maintain and view the docs.
I wanted a minimal CSS utility that provides just basic features to get started quickly without the bloat of larger frameworks.
What I did
Given the background and the context, I was in the process of changing the UI/Frontend of an existing project. I moved all the reset css to a file, then wrote all the utilities to a separate file.
Then came the idea of publishing the same, so I moved all the scss code from the main project, put it inside a new folder, initialised it with a package config and bundled it with rollup.
At this current state, I could not make it public because… first I had to decouple the existing logic from the codebase to the project, then I looked at the docs and with help of ai, wrote helper functions and saw the standard and fixed my implementations and made it ready for publishing.
How I build them
It’s pretty straightforward, if you look at them.. gosh the tooling came a long way since the gulp js tooling era.
"clean": "rimraf dist docs/.vitepress/dist",
"build:theme": "rollup -c",
"docs:dev": "vitepress dev docs",
"docs:build": "pnpm run build:theme && vitepress build docs",
"docs:preview": "vitepress preview docs",
"format": "prettier --write .",
"build": "pnpm run clean && pnpm run build:theme && pnpm run docs:build"
How to install & use it
You can install with npm; it’s here https://www.npmjs.com/package/minimal-css-utility
Use the following command with npm or other package managers, or you can even use a CDN,
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css"
/>
npm install minimal-css-utility
then import this in your main css file,
@import 'minimal-css-utility/dist/min.css';
CSS Scoping
I added the support to have css scopes, what this means is I can have multiple css frameworks and work on the same codebase, my project won’t interfere with anything.
Read more on how to implement it here. I’ve added an example here for react, but it should be the same for vanilla or other frameworks.
https://bluepie.in/minimal-css-utility/getting-started/scoping.html
The docs
https://bluepie.in/minimal-css-utility/
Since I used Vite, I saw the documentation system by them, it was quite nice to navigate through the docs and easy to setup, I find that sometimes I have to navigate to the codebase and look up a particular css class and probably change it, So I put the docs inside the same folder and wrote the generation scripts inside the package.json
Writing the docs was very fun, Include my css file and use it… like how a user would. Because of this… I was able to figure out multiple wrong implementations, I was using them with wrong implementations all this time everywhere, I didnt realise it was wrong since I was just copying and moving these source files from one place to another.
check source examples here: - https://github.com/aghontpi/minimal-css-utility/blob/main/docs/utilities/sizing.md?plain=1
check some of the rendered examples there, - https://bluepie.in/minimal-css-utility/utilities/positioning.html - https://bluepie.in/minimal-css-utility/layout/grid.html - https://bluepie.in/minimal-css-utility/utilities/flexbox.html
Writing the above gave me the idea that this is how I would test this: visually identify the issues after taking build, I can just skim through the docs of the places where I made changes in source code of utility classes and check only those affected places in docs, since I used the build from the css utility class, these changes would come here.
I looked up online, major big css frameworks employ similar and better versions of what I just said and there are testing frameworks that just do that, for ex: BackstopJS
What I like the most from the docs
I like the search functionality a lot, click search button or use the shortcut and starting to type, you see only the relevant information and takes me right to the spot, what and where I was looking.
The release & Future versions
Currently, it’s on npm and github, If I use additional things to my custom ui, I will add it here, make a new release, so it can be upgraded with version specific installs from npm. so it wont break anything.
npm: https://www.npmjs.com/package/minimal-css-utility
github: https://github.com/aghontpi/minimal-css-utility/releases
Personal updates
The last month’s feeling of just an excel sheet because it happened to a person close to me. Their problem is still not resolved it’s the second half of Nov.. like heck?. the people who were in charge wrote a lame-ass email of the same thing after 1 month of delay, basically they came back after enjoying diwali and holidays, enjoying their leaves, personally I think I thought.. they just didn’t want to deal with all this. The managers who were idiotic saying to a person who was in that situation “Now you are the one to help us”, just after hearing the announcement, the numbness of that lady is outstanding, I hope she gets what she deserves, karma will come back for her. After the vz announcement you will read below, for me atleast to see they are having the same kind of feeling they put the person within a short span of time was a suprise. I dont know/biast on whats the outcome will be, but yea was a suprise.
It’s amplified by this month’s announcement of VZ, search Vz, Nov, 2025 (me) you will remember and find it in news articles. Do you remember all the people packing? Im sure you do, For me, I was thinking I was doing my job, makeing progress every day, handling my releases well.
The ugly of corporate world, a lot of vendors make the company shit, the developers dont know what they are doing, they are just here for the paycheck with the minimal/ no amount of work, there is no engineering happening even in higher and lower levels, seeing all the frenzy when an announcement is made for budget cuts and etc, they started putting effort again.. I was expecting a level of standard and I can’t put a single word to explain it.. again going back.. I think its better for me to just be my own boss, I can’t expect these people to have the same level of dedication, integrity..etc