I really like the flexibility of bootstrap. But with great flexibility comes greater file sizes. I already customize bootstrap by loading only its sass files our project needs. One day I decided to go through and see how much css each module we normally use in a project actually brings to the page load. This is what we discovered. The y axis is in kilobytes and this is the non-minified files.
The flex module being the largest was the first place to minimize. It’s a relatively simple mixin that can be adjusted to remove flex classes you don’t expect to use. For example, one group of classes removed was the align-content- (not to be confused with the useful align-items- classes). I brought this from 35KB to 10KB. Spacing was the next to be looked at. I altered this mixin and removed all the *y, *x, and negative value classes we do not use. This took that from 28KB to 17KB.
We use a custom bootstrap.scss file in our project that calls the sass files in the node_modules/bootstrap.sass directory. For the flex and spacing, we copied their respective sass file into the project directory and altered it there.
There is also a variable called $theme_colors that is an array. It creates many different button classes we hardly use. For example, btn-danger, or btn-success. To remove the extraneous buttons, I altered the array in the theme’s _variables.scss file only to discover that it still produces all the extraneous buttons. I found that while most bootstrap variables use the !default declaration preventing bootstrap from overriding our already declared variables, the $theme_colors uses a map_merge() Sass function and put all the elements back into the array. To fix this I @imported our custom variable file again right before @importing the button sass file.
