Nice write up Vethee. I'd add some points off of first read (forgive me if you mentioned this and I missed it):
Bootstrap doesn't have to drain battery life and can be used in a modular way; folks just don't.
Most folks that just include the entire thing are basically getting what's in this script assuming they're in an SCSS environment otherwise they're pulling in a final CSS dist. But, the point is simply this:
Watch your builds fail (Webpack, Vite, Rollup, whatever)
Import the things that are obviously low level requirements to BS like the utilities and reset and what no
Add in typography and other generalized ones you're using in your cascade
Start to only add components you're using. For example, using Bootstrap's button, simply uncomment that. Using the Accordion, uncomment that.
I've done this at work and it's something you can do very quickly and it's worthwhile and absolutely the way folks should learn to work. I'm sure that all of the non utility class based frameworks you've listed above also offer this opportunity! 💥
Although I'm not personally a fan of utility-first approach, but I have to mention that Tailwind (windicss) and others have adopted a JIT unused classes removal technique that's pretty killer; one complaint from before was that these utility-first approach left bloat (and/or bogged down your dev experience). I haven't tried it but it seems to have been solved so congrats to them for that.
You know your article here is so well organized and makes such good points, I would recommend and love if you could make another iteration where you simply search bundlephobia for the sizes of these frameworks in kb. I think sometimes it's inaccurate and worth double checking against the framework's source code.
For example, I can look at the bootstrap dist CSS file on github here: github.com/twbs/bootstrap/blob/mai... and see it's about 201kb. Mind you this is likely "batteries included" size but still useful to be aware of. If you could add these for these frameworks to these like you've done so nicely with your "Usage Statistics for Framework X" it would really add to the value! 💪 🍰
Maybe add OpenProps open-props.style/ as it's an interesting but viable alternative folks should consider. If you haven't heard of this it's driven from using CSS custom properties. You DO get some things pre-baked like color palettes so that's either a pro or con depending on your taste. But it has a sister postcss project which will remove unused properties (similar to how Tailwind does) which makes it quite viable.
We should also consider for larger projects using design tokens
These are helpful if your CSS codebase is going to get reused for a design system or for multiple projects like iOS / Android, etc., and probably a nice forward-thinking thing to just have in place. My AgnosticUI framework (please feel free to slap me a GitHub star!) uses these for the primitive custom properties like colors and type. Here's an example design tokens for primary color design tokens. I simply run Style Dictionary and it generates my CSS custom properties from the design tokens. This is useful because others can now use the project for things I haven't considered like mobile or kiosk systems that my have a different way of doing things ✨ ⭐ 🌟
Sorry for the long comment but this is just sort of how I roll with my meandering wordy writing style 😊 😃 😏
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice write up Vethee. I'd add some points off of first read (forgive me if you mentioned this and I missed it):
Most folks that just include the entire thing are basically getting what's in this script assuming they're in an SCSS environment otherwise they're pulling in a final CSS dist. But, the point is simply this:
I've done this at work and it's something you can do very quickly and it's worthwhile and absolutely the way folks should learn to work. I'm sure that all of the non utility class based frameworks you've listed above also offer this opportunity! 💥
Although I'm not personally a fan of utility-first approach, but I have to mention that Tailwind (windicss) and others have adopted a JIT unused classes removal technique that's pretty killer; one complaint from before was that these utility-first approach left bloat (and/or bogged down your dev experience). I haven't tried it but it seems to have been solved so congrats to them for that.
You know your article here is so well organized and makes such good points, I would recommend and love if you could make another iteration where you simply search bundlephobia for the sizes of these frameworks in kb. I think sometimes it's inaccurate and worth double checking against the framework's source code.
For example, I can look at the bootstrap dist CSS file on github here: github.com/twbs/bootstrap/blob/mai... and see it's about 201kb. Mind you this is likely "batteries included" size but still useful to be aware of. If you could add these for these frameworks to these like you've done so nicely with your "Usage Statistics for Framework X" it would really add to the value! 💪 🍰
Maybe add OpenProps open-props.style/ as it's an interesting but viable alternative folks should consider. If you haven't heard of this it's driven from using CSS custom properties. You DO get some things pre-baked like color palettes so that's either a pro or con depending on your taste. But it has a sister postcss project which will remove unused properties (similar to how Tailwind does) which makes it quite viable.
We should also consider for larger projects using design tokens
These are helpful if your CSS codebase is going to get reused for a design system or for multiple projects like iOS / Android, etc., and probably a nice forward-thinking thing to just have in place. My AgnosticUI framework (please feel free to slap me a GitHub star!) uses these for the primitive custom properties like colors and type. Here's an example design tokens for primary color design tokens. I simply run Style Dictionary and it generates my CSS custom properties from the design tokens. This is useful because others can now use the project for things I haven't considered like mobile or kiosk systems that my have a different way of doing things ✨ ⭐ 🌟
Sorry for the long comment but this is just sort of how I roll with my meandering wordy writing style 😊 😃 😏