After installing roots 7.0, the first thing I went to do was alter the boostraps variables, which are now located in assets/vendors/bootstrap.
WIth Grunt Watch enabled, saving does nothing. However, if I save any LESS files that are under the assets/less folder, they compile on save.
Am I doing something wrong? Thanks!
I thought this was a bug too, but the new Roots organization means that vendor packages are designed to be kept current using bower. This means that if you run a bower update you run the risk of wiping out all of your modifications to the files in the vendor dir, so the new recommended workflow is to manually create overrides for Bootstrap styles.
If you don’t plan to use bower to keep your installed packages updated then you can override the files directly, and if you want grunt to watch those files just add'assets/vendor/**/*.less' to the list of watched files after line 130 of your Gruntfile.js.
Isn’t this entirely against the idea of variables.less? The roots site infact tells you to always edit these variables instead of overriding elsewhere - so why is this now set up so badly?
@craigivemy, I’m sorry but I’m not sure exactly what you’re asking. You can override bootstrap’s variables using Roots’ variables.less. The reason why we’re pulling in Bootstrap and discourage the actual editing is the same reason why you wouldn’t edit WordPress: updates would suck.
This is 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."
Use _variables.less in the Roots assets directory
Hi Ben thanks for that I ended up finding that elsewhere but good to have it confirmed.
How about all the other bootstrap files, navbar, buttons etc - do they have to be manually overwritten in main.less? Is this not entirely against the idea of not repeating code? Is the reason they are broken down into several files not so that you can edit them directly and not have to waste hours overwritting everything?
Can I ask what the idea behind bower updating bootstrap is? If a site has been/is being coded using bootstrap - why would you want bootstrap to update, possibly breaking a site?
The same for other plugins/files too. When a new install is run with bower for a new plugin, will it automatically update the others? If so, does this not cause huge problems with code compatability?
I love the roots theme and I’m sure I just need to know a bit more and all will become clear, but the docs don’t help as they are obviously out of date, as can be seen in my response above which clearly refers to editing bootstrap directly, which is surely the point of the variables.less file?
Thanks in advance.
Did you read my original reply? It answers most of your questions.
You’re free to edit the Bootstrap files as you wish, but you will need to edit your Gruntfile accordingly. Editing them directly is akin to editing WordPress core files directly, which you’re also free to do, but (1) editing package source in production is not modern workflow and (2) you’ll be sorry when there’s an update. Same with plugins.
I think you will find that most changes can be comfortably made by copying Bootstrap’s variables.less into the Roots _variables.less and tweaking from there as needed. I admit it does take some getting used to and does seem repetitive, but it’s the most sustainable solution available.