I'm still looking at finding ways to pare down the beast. The beast, of course, is a CSS Framework. I have the full version now down to 210Kb minified.
I wanted to have a look at the size of the data that makes up the "buttons" in Bulma (v0.9.4). As tiny as I can make it, it still comes out at 40Kb. For that we get a total of 9 buttons, two are very similar, so you get 9 in code. With those you get four potential appearances ("Normal", Dark, Light, and Outline). There are a few other features of the buttons, but think of those as bonuses (ie. loading).
There are also some extras, like "addons" that can group buttons together into one cohesive appearing button bar. For my research, I didn't include those in the final size mentioned above (reminder: 40Kb).
Also would like to point out that 9 button colors isn't much – it does, however, tie into the Bulma marketing mantra. The Bulma button color options match the Bootstrap button colors. Word for word.
I wanted more color options. More akin to the Google Material Design button colors. Now there is a reasonable range of choices. A total of 21 colors. My button design started out with the target to make the same color range available. I also came up with a strategy to use the HSL color notation so that I could use the opacity portion for normal, dark, and light. Doing that also reduced the overall size of the code – significantly.
21 colors, four states, five sizes, five appearances: 7Kb
I was able to create a "buttons.css" file with 21 different colors to match the Google Material Design (word-for-word, too) and provide Normal, Dark, Light and Outline versions for each button color. And, I included the ability to use a FontAwesome icon at either left or right of the button label. And then added five size options: Small, Regular, Medium, Large, and Jumbo.
I also came up with a :hover capability that I much prefer. My :hover adds a white border, a red outline, and a box-shadow around the hovered button. Instantaneously appears on hover (and disappears back to normal appearance just as quickly).
My "buttons.css" file size? 7Kb ... that's raw, NOT minified.
At this point, I still do not have compatibility with Bulma since I did not include the standard Bulma colors. So, I added that. And added the button grouping "addon" feature.
With Bulma v0.9.4 compatibility, my "buttons.css" file size? 10Kb ... that's raw, NOT minified.
Go ahead, take a look at the results. Top right is my buttons.css file with 21 different colors, four appearances, five sizes, and four options. At the left is the Bulma colors added (bringing the total to 30 colors) and all the extras I have in my buttons.css file. Click to see a larger size.
Add Bulma color compatibility, Button Grouping ("addons"): total 10Kb.
A Note On HSL Notation: HSL is an alternative to RGB. HSL has three components, with an optional fourth.
hsl(hue, saturation, lightness, opacity)
Think of hue like a color wheel where upwards of 17 million colors are represented. You can confirm the 17 million color options using RGB (Red, Green, Blue). Red is defined from 0 to 255, Green is defined from 0 to 255, and Blue is defined from 0 to 255. So: 256 X 256 X 256= 16,777,216 colors. HSL work pretty much the same way, and adds a fourth parameter (optional): opacity. In my buttons.css, I do not use opacity.