…but it has sufficiently blown my mind. I’ve been using the Grunt workflow for just under a year and I am speechless. I finally understand all of those mixins I never used!
My only concern is whether the methodology proposed in that post adds significant size to CSS files if I continually set classes, columns, rows, etc. all in my LESS files.
If I set Bootstrap classes in my markup then it’s a dozen characters at most, but adding classes element by element in my LESS? It seems like all of those repetitive CSS rules would seriously bloat my CSS…
Does anyone currently abstain from using Bootstrap tags directly in your HTML/PHP? Can you provide some feedback on whether there is any noticeable increase in stylesheet file sizes? Does it significantly affect load time? Is my vision of a Bootstrap-HTML-class-free future project a pipe dream?
It would definitely make your CSS files a bit bigger. Even if you include the small reduction in HTML size, the net result (HTML+CSS) is still probably bigger overall.
I doubt actual load time would be much noticeably worse though. CSS compresses pretty well and doesn’t suffer from increased parsing/execution time as much as JavaScript would.
That being said… I don’t think this matters too much. Bootstrap in general is great for quickly doing things. If you really had a much bigger/long running project, you could look into converting it to this method.
As much as people talk about semantics and decoupling, there’s only so far you can go. If you swap out Bootstrap on your site in the future, just because you used LESS to target your own CSS classes and ID’s, you would still need to go through all of your LESS files and update the mixins.
The argument is made that you wouldn’t have to change your HTML. Well that’s good, I suppose, but… eh.
I agree with swalkinshaw, if you were working on a huge site, there might be benefits. But for standard Wordpress sites, Bootstrap classes aren’t going to cause you troubles.
if you were working on a huge site, there might be benefits. But for standard Wordpress sites, Bootstrap classes aren’t going to cause you troubles.
I see the inverse is also viable, standard Wordpress sites are relatively small, so there won’t be too much bloat in the resulting CSS.
I guess people here are missing the point of decoupling, IMHO roots shouldn’t be tied to Bootstrap or any other CSS framework, as pointed out here. and this will help roots in going into that direction.
Roots is targeting developer not users, and is just a starter theme, weather including Bootstrap classes or not should be left to developer, … the base starter theme’s HTML shouldn’t be too much opinionated. I, someday wanted to use Roots with Foundation (because of the out-of-the box RTL support there), but found roots very tied.
That’s again my humble opinion, and I may be wrong.
Yes, it’s worth noting that compression algorithms like gzip (which is partly a dictionary coder) are specifically designed to be good at spotting and compressing repetitive sequences, so the repeated chunks of code in CSS compiled from LESS should be handled really well.