Roll your own CSS code: not for the faint-hearted. I was a bit premature in suggesting this could be done in less than 20Kb ... I'll be lucky to get around 100Kb.
Here's my list of "must-haves" and "desired":
- Responsive grid with same (or similar) class names I am familiar with (Bulma mainly), but use "row" instead of "columns"
- Attractive forms design and elements, not neccessary to match any other framework
- Basic components, at least a container.
- Colors as variables, for theming purposes.
I must confess that I had a "starter" framework dating back several years ... I started at that point so save some time. Essentially the theming portion was partially finished.
I did some research on flexbox based grid systems and located "Milligram". It's a very very basic CSS framework (I think the original is one single file at a total of 11 Kb). Despite its size, Milligram actually suits much of the needs I have listed above. It fails on the grid, that is unless you want equal width columns all the time. It was, however, a study in what to do and not to do. Surely, somewhere between a basic CSS Framework like Milligram at 11Kb and Bulma at 713Kb, I should be able to find (or create) the ideal.
Based on my previous work, I had functional CSS code within about 36 hours. My CSS code has seven major parts:
- A font loader
- The "sanitize.css" library with its three major components (core, forms, assets)
- Theme variables
- Core CSS
- Flexbox grid system
- Forms CSS
- Typography
All told, it is 98Kb raw and 76Kb minified. By the time I am done (which may take many many months), I hope to keep it under 125Kb raw and under 100Kb minified. Of course, it may stay exactly as it is ... it's designed in such a way so that I can add components as I need them ... but since components aren't necessarily part of every web site, I might keep them separate.
For example, I haven't added any "hero" functionality. At the moment, I also have only one "container" class ...