I have just moved to sage, so I’m kind of new to how is the css/js generated.
Was using roots with grunt and I had my own setup which I would like to move to sage as well.
Eg: http://pastebin.com/iN25Qejz
So how I do things and why:
CSS:
- I don’t want to include entire bootstrap, only parts that I need, reset, grid, tables, forms and nothing else
- I don’t want glyphs, I generate my own font icons on: http://fontastic.me, with only icons I need for certain project (if i’m not wrong bootstrap 4 doesn’t include font icons anymore either)
I have main.scss file where I include ‘@import …botstrap/forms’ and what ever I need.
I guess now using gulp I would need to comment out lines in bootstrap-sass-official folder?
I sometimes need admin.css file only, when in most cases if I need to include icons for selection.
For that I assume I need no dependencies, I just create another ‘admin.scss’ and enqueue it.
JS
-
I don’t want to include entire bootstrap js either, in most cases I use only carousel and tabs, and I don’t need anything else. And I don’t want to include it to so my theme is light as much as possible.
Where do I exclude js files from bootstrap? -
In my setup, I was using grunt to merge all plugin files in separate ‘plugin.min.js’, while my custom js I keep in ‘main.js’, and then I enqueue plugins.min.js before main.js.
It happens to me that files are not included correctly if everything is main.js so I get js error: ‘is not a function’.
I just find this to be the best practice for me -
secondly, I sometimes need admin only js files, usually some ajax stuff that is needed for me in backend.
so I need to have admin-scripts.min.js generated only from certain js partials + lint + minified.
Not sure how do I do this?
If you someone could point me in right direction?
Thanks in advanced
Cheers