February 28th, 2017, 02:37 PM
Wordpress + Grunt + Bootstrap + SASS Questions
I am learning Grunt and I have a general question on the workflow. For this project, I'll be using Grunt, Bootstrap and Sass.
I do not want to have duplicated code anywhere and since I can edit some of the variables for Bootstrap (colors, etc..), I am trying to figure out how I should handle this without complicating things as well as making development for other developers easier. I do not want other developers to have any difficulties figuring out the workflow.
assets / sass
Note - Grunt will load the bootstrap sass directory before compiling the Sass.
1. I used SASS in the past but not with Bootstrap (or any frameworks). It's seems like a good idea to edit the variables within bootstrap to avoid having to overwrite rules. However, I feel like it might be complicating things. Should I edit the variables for Bootstrap or just leave it alone?
2. Should I compile my vendor files separately into CSS then minify, then concat the vendors files with the style.css to create style.min.css ?
So in my css folder, it will contain a folder called "vendor" which will have all the compile versions (colorpicker-1.1.css for example).
3. Should I just import all the files into my style.scss file, compile it, minify it and call it a day?
February 28th, 2017, 04:19 PM
Usually, you define your variables before you import the bootstrap.sass files:
You should /never/ be able to edit vendor files. They're dependencies that can be installed, but are used, not maintained.
That being said, Bootstrap was written to allow changing of variables like I did above.
That's what I do. Additionally, I name mine a hash of the timestamp it was created on, then instruct the server to cache JS and CSS assets for as long as possible. The reason is that if an update does occur, it will have a different hash and therefore the browser will already fetch it again.
February 28th, 2017, 04:44 PM
Ok so in the vendor folder, I should only have the _bootstrap-custom-variables.scss file. Then in my style.scss file, import _bootstrap-custom-variable.scss then import the bootstrap file from the node_modules folder?
February 28th, 2017, 04:48 PM
Sounds like how I have my projects setup. Your mileage will vary based on what libraries you use. I use Webpack and a few plugins
February 28th, 2017, 06:27 PM
Wait, I misread that: your "vendor" folder is basically your "node_modules" folder. What package manager do you use for installing front-end packages?