Reduce size of generated CSS / more control over auto-generated helpers

Bootstrap generates a lot of helper functions based on breakpoints which leads to many classes which may be unused in production CSS. The problem gets even bigger if you want to add another breakpoint. Now since offset-* classes are back this isn’t helping either.

In order to have more granular control I would suggest to add more option variables to allow the developer to choose which helpers should be auto generated and which ones not. I’ll add some examples below.

Do you have any other plans or ideas in implementing such a feature? If necessary I would prepare a PR if this seems legit to be implement.

In case of _flex.scss it would be useful to limit the breakpoints for which the helpers should be generated as well as disabling some helpers at all. In this case I would suggest a new variable $flex-breakpoints which inherits its values from $grid-breakpoints as a default. Then I’d suggest the variables $enable-flex-justify-content, $enable-flex-align-items, $enable-flex-align-content, $enable-flex-align-self to enable or disable auto generation of these helpers. For the other flex-* helpers I’m currently unsure if there should be variables for each of them, or just disabling the wrap helpers or if we just keep them all the time as they were needed more often then the others.

The same scheme can be applied to _grid-framework.scss where I would create variables $enable-grid-order and $enable-grid-offset to disable them. Offsets, may not be used by many people since they had been removed and brought back in the newest beta.

I’d really appreciate your thoughts about this. In my opinion this would help developers a lot to keep their CSS small.

[MartijnCuppens]

We could approach this like Tailwind does, but keep using sass for it: https://github.com/tailwindcss/tailwindcss/blob/master/defaultConfig.stub.js

[mdo]

Closing this out as we’ve added the majority of it with @MartijnCuppens’s work.