Is there an easy way to strip out css I don’t need? I notice that assets/css/main.css is very large. I’m new to roots so perhaps there is an easy way to disable features and have grunt generate a much smaller css file?
One simple way is to simply remove the parts you don’t require from bootstrap by modifying /assets/less/_bootstrap.less. The entire bootstrap css runs about 113Kb. This usually contains stuff that you will probably never use.
An alternative to really slim things down is to use LESS extending into your own classes and then not include bootstrap at all. It takes some adjustments (mainly in the header) but it will slim things down.
2 Likes
Thanks! That was what I needed.
1 Like
I make a copy of the main bootstrap.less file called my-site-name-bootstrap.less and then gut it, using only what I know I need. I also gut the grunt file that pulls in the BS JS. Well, ‘gut’ == ‘comment out’ because I never seem to know what I’ll need until the end. I make it a copy so I can easily update bootstrap.
The other thing here is that LESS, as awesome as it is, generally leads to larger CSS files (for me anyway) because of some language’s conveniences in coding. I reckon it’s a fair trade but I found that when I was learning it that I learned quite a lot by looking at the generated (unminified) CSS file. There were many ‘oh, that’s the exact same set of rules repeated again and again’ moments that illuminated some rather expensive shortcuts (in my less coding). Of course, I can’t think of any examples as I type this.
155k definitely seems a little silly for most sites but gzipped and cached it’s not really all that much—smaller than a single retina hero images in most cases. Not to say you shouldn’t do what you can to minimize download cruft but in the end, there are likely better ways to spend your time with regard to optimization.
That is basically what the _bootstrap.less file is for under the main folder, but folds in a _variable.less file for customization. This makes it easier to update bootstrap via bower.