Development Workflow - Bootstrap (Less), Bower and

Question

I am trying to step up my game as far as my folder structure and workflow is considered. I have recently discovered that front end package management and automation of tasks are key to improve speed, decreasing dev time, decrease file size and increase profit.

My issue is I am not too sure what the best method of using these tools are. I have a builds folder, which includes a dev and prod folder. My components are outside this folder in the bower_components folder.

I usually customise bootstrap and take advantage of it's variables file and mixins. I have copied the bootstrap.less file, and the variables.less file, and placed them in builds->dev->less. I then have grunt compiling the less using the bootstrap.less file from this new directory.

Is this the best way to go about using bootstrap and it's less files in this setup? I want to use bower due to it's power, but I also want to keep the power of customising bootstrap and it's less files.

What do you guys think?

NB: I usually code themes for brochure websites and very small applications.

Answer 1

As posted above by Bass Jobsen:

you don't have to copy bootstrap.less and variables.less. Less uses lazy loading and last declaration wins for variables, so to can put their definition afterwards to (re)assign them. Create a project.less file which @imports bootstrap.less from your bower folder and put your custom variables assignments, mixins, and code after the @import