Roots Discourse

Proper use of bootstrap less files and grunt

Hi guys. I have noticed (and confirmed with research) that grunt does not monitor or build the vendor folder, to stop bower overwriting modified files.

What is the correct way to edit bootstrap? The variables.less file is included for the exact purpose of stopping you from overwriting styles elsewhere, and the roots documentation states that the first port of call is to edit variables.less - but yet grunt won’t compile the bootstrap files to avoid them being overwritten with a bower update.

I can’t believe that roots would go against their documentation and the entire idea behind roots of not repeating code, so surely there is an easier way?

Is there a way, for example, to exclude bootstrap from updating with bower - I would imagine you would never want this to happen as a change like bootstrap 2 to bootstrap 3 would render a site useless without editing the html?

Thanks in advance

You don’t edit Bootstrap directly for the same reasons you wouldn’t edit WordPress core directly.

You can change which Bootstrap core files are included by editing assets/less/_bootstrap.less, and you can override Bootstrap specific styles in your theme styles.

This from the roots docs…

"1. Using variables.less to Quickly Customize a Site

Unlike WordPress core, Bootstrap is designed to be modified for your needs.

The first file we will look at is the variables.less file. This is where a large amount of the customization to Bootstrap’s existing styles takes place. Taking a look at this file will show you a long list of LESS variables that are used throughout all the rest of the Bootstrap framework. So, in one place you can customize the color of your site’s elements, the default spacing, fonts, etc. Make your changes to this file, compile and the changes cascade through the whole site.

Take some time to review all these variables and understand how they work. Before writing any additional CSS for your site, make sure that the effect you are looking for cannot be easily achieved by editing the Bootstrap variables."

You shouldn’t modify anything under vendor as it will get overwritten everytime bower updates it will get overwritten. If you need to define your own variables, you can do so from assets/less/_variables.less and as for bootstrap components, do as suggested above.

@marxz is right.

@craigivemy, Just because you kind of double-posted here, this topic will be closed to new replies. Also, yes, the documentation should be updated some. We’ll put that on our list of things to do.