This overhauls the grid classes once more with an improved emphasis on performance and mobile-first-ness. Please keep reading before reacting because there are (hopefully) a few good reasons why we should go this direction.
Currently in BS3
<div class="row">
<div class="col-span-4 col-small-span-6">4 large, 6 small</div>
<div class="col-span-4 col-small-span-6">4 large, 6 small</div>
<div class="col-span-4">4 large, 12 small</div>
</div>Proposed change
<div class="row">
<div class="col col-lg-4 col-sm-6">4 large, 6 small</div>
<div class="col col-lg-4 col-sm-6">4 large, 6 small</div>
<div class="col col-lg-4">4 large, 12 small</div>
</div>Why?
What we have now is definitely an improvement over Bootstrap 2.x, but it's not as great as it could be. The new ideas aren't as pretty, but they're super functional. Here's my thinking for why this change makes even more sense:
- The mixins we are using right now aren't mobile-first. I added the small grid classes on top of the default large ones. That feels wrong and I didn't want opposite directions in the framework.
- Using attribute selectors like
[class*="col-span"]is really expensive on pages where CSS performance has real impact. We see this at GitHub all the time, especially on larger pull request diff pages, and others using Bootstrap have reported similar findings. Thus, I've brought back at least two columns for grid columns.
Still quite a bit to do to finish this up before merging, but do let me know if there is something better we can be doing, or if this approach is complete shit.