Rolling your own CSS Framework is a challenge. On multiple fronts.
Although I've used CSS for decades, I have never really beyond application level css files. You know what I mean, typically a few hundred lines of CSS code - usually to "tweak" an existing design.
For the past few years, I have used a few CSS Frameworks – all of the websites and applications, though, that I have released have all used Bulma CSS Framework. Bulma's recent update to v1.0.0 raised alarms and as a result I have completely abandoned Bulma CSS Framework.
Along the way of rolling my own, I've often thought of abandoning the project. I'm glad I stuck it out. At this point, I'm nearly done and now working on some basic components. Getting to this point has cemented my resolve to complete this project. Even more important, I have completely resolved to never touch Bulma CSS Framework ever again. Not at v1.0.0 – OR ANY PREVIOUS VERSION.
The reason for this emphatic statement is that I am nearly complete in a new CSS Framework. Comparing it to Bulma, it's just as flexible, includes every possible feature I could desire. My grid system is more intuitive. A useful set of utilities for colors, spacing and more. My spacing has a bit more flexibility and fine tuning. For example, margins and padding can be specified in fine increments – here's the margins example for all sides: m-0.25, m-0.5, m-0.75, m-1, m-1.5, m-2, m-2.5, m-3, m-4, m-5 ... and you read correctly, you can use a class name with periods in it. It's the CSS author's job to make that happen, the CSS specification supports it, and it works on all browsers (well, except IE, and who cares about IE these days - not even Microsoft).
Here's what is even more important. At this point, the total size (RAW) is 60Kb.
I'm also not pursuing a "javascript agnostic" strategy ... it's pure BS that a CSS Framework does not need Javascript. I'm using Jquery, but quite frankly, it's easy to swap out for vanilla Javascript or any other flavor of JS.
PS. The breakpoints in my CSS Framework follow nearly the same ones as other CSS Frameworks like Bootstrap. I use the prefixes: phones-, tablet-, desk-, wide-, and xwide-. Including the default (no prefix), that's a total of six breakpoints, with a phone-first approach. The breakpoints will not kick in unless a prefix is used.
I am working on another article to clarify this next point ... it's not as straight forward as it sounds, and it does need it's own posting. That is the subject of containers. Many CSS Frameworks (especially the last one I used, Bulma) specify - and expect minimum spacing - with their containers. My CSS Framework will not. A container will have margins and padding set to zero as the default. The spacing utilities I include are extremely flexible, enough so that they can be easily used with simple intuitive markup. That also means that my grid system will not need to have negative margins and work-arounds to get proper displays. The reason containers is so complex: think about it, what are the different levels of containers? (ie, section vs div); what about nesting? And, I don't mean semantic HTML "containers" ... html, body, main, footer, etc. are semantic and not part of the "container" discussion ...
I'm in the last stretch ... PS. I'm designing new footers, sidebar navigation, and horizontal navigation. All are very powerful: for example, the horizontal navigation has a search bar, and supports "mega menu" functionality from the get-go. It degrades nicely into a regular drop down menu system for simpler designs.