I actually started looking into paring down the overall size of a CSS Framework. I split the components portion of that CSS Framework into its various parts. One of the components, navbar, was 33Kb (raw). Someone came up with an extension to this that permitted the navbar to work as a mega menu.
Again, common sense says that a nav bar component at 33Kb is ludicrous. Particularly when you consider that the Bulma v0.9.4 navbar includes a nav burger trigger component and you still need to add a javascript implementation to implement that trigger. So, it's actually closer to 35Kb.
I implemented my own nav bar ("navhbar.css") as a full featured navigation bar with brand/logo, menu with drop downs, an "end" component that can include a search bar, social icons (or others), and a navigation burger trigger – plus include the javascript needed to make it all work. As a bonus, it's a mega menu supporting any HTML that can fit into a div (including responsive grids).
I haven't built any demo page for it yet ... but it is finished. End result: "navbar.css" + "navbar.js" equal a grand total of 12Kb raw, NOT minified.
I then turned my attention to a Bulma element that took up even more space as a file size: buttons.
With my navbar, I can - theoretically - reduce the CSS Framework footprint by 23Kb raw.
With my buttons, I can - theoretically - reduce the CSS Framework footprint by another 30Kb raw.
Gheez ... that's 53Kb, quite the "diet". It would be interesting to see stats on page refresh on a mobile phone, wouldn't it?
The screen shot at the right is a quick test page I put together. Click it to see the larger version.