I've had an opportunity over the past few years to look closely at various CSS Frameworks. With the extra scrutiny these past few weeks, I've noticed there is a lot of duplication in the css code. Different class names, but useless duplication. To illustrate, I took the grid system from one CSS Framework. It started out with almost 1900 lines of code. As a file, it took up 35Kb. I edited the file, removing all of the duplicates. Now, these are classes that do get called, but the underlying code already is implemented ... it's duplicating the same code over again.
The width of a column, for example, is defined as a percentage. It's the same whether it is mobile, desktop, tablet, hd, widescreen. And the code is identical for all, yet exists anyhow. Remove it and it doesn't make a lick of difference ... the underlying code gets implemented regardless by another class name, doing exactly the same thing.
Starting with SimpleCSS, I removed some of the classes that would collide and create conflict with other css code I was planning on adding. One example is the "nav" implementation in SimpleCSS. It's a terrific plan, but I wanted to implement a full "navbar" with support for multi-level dropdowns and each dropdown have the ability to be an HTML "container" ... in other words, a mega menu. There were a few other classes I had to modify ... but I must say that SimpleCSS is an outstanding piece of work. If building a small website, I would definitely consider it.
About 90% of the original SimpleCSS formed the core of this project. I also added:
- a grid system - it's based on Flexbox and - for the most part - compatible with two other CSS Frameworks
- a button system - I actually already had this, I wrote an article on this: 30 buttons, nine of which are Bulma CSS color compatible, and 21 that are Material Design color compatible. Each button has four states (regular, dark, light, outline), five sizes, and five appearances.
- layout options (Hero, Footer)
- a typography system with superb looking (and semantically correct) headings
- a forms system
- and "helpers" that include text, spacing, and color modifiers.
I'll probably end up doing a bit more work on the forms system, but I am satisfied with the outcome so far.
My CSS package includes the javascript needed to make it work. It's pretty simple stuff and can be easily swapped out for plain vanilla, JQuery, or any other JS framework. I also have a back-to-top javascript implementation with it. In total, the Javascript (raw) is 5 Kb - and heavily commented.
And for the important stuff. My CSS Framework with all the above is a total of 58Kb raw. There are a few lines of the CSS I did not want minified, so I removed those, minified the file, and then added the raw portions back at the top (they are lines that I meant to make easy to modify ... almost like a theme type of system. So, minified, the CSS Framework is 44Kb.
No dependencies, only one CSS file with the entire framework and two javascript files.
The HTML portion is almost identical as another CSS Framework ... except for the Navbar. It works the same, but the underlying HTML is slightly different.
It can be done. I have a working system that is 44Kb. My target was to remain under 100Kb. This project already supports a Dark/Light mode using the "prefers-color-scheme" options users can set. I do want to also implement a toggle switch ... I have it done for another project, but it didn't make it into this initial proof of concept. Likely get that done within a few days, though. Depends on my schedule.
The image at the top right is a thumbnail of a test page I modified as a proof of concept for the navbar and hero sections. The second image shows the bottom of the page. Note a few things: 1) the CSS system automatically calls Font Awesome from a CDN ... the css supports that natively; 2) the HR is a custom designed divider with supports for the footer, and in general use with the text stream; 3) at the lower right, you can see the "back-to-top" toggle (I've been using the same code for years, modified it slightly for a round button and two borders).
As an aside, I plan on dumping Font Awesome support. Reason: same as the elephantine CSS frameworks ... too big, too much bandwidth. I suspect I am like most designers ... I really only need a few icons, I don't understand why I need to download the entire font set and a css file that is larger than my new CSS Framework.