What's the best way to extend roots?

archived 🗄
1

Hello,

I often add Flexslider and Font-Awesome to my projects but I can’t decide on the best place to add these files.

For Font-Awesome it’s pretty straight forward. I place the a folder called ‘font-awesome’ right along side the bootstrap LESS files and import it in app.less. That works great, it’s simple but with Flexslider I’m not sure the best practice for this.

I like keeping the add-ons that come with less and js files in once place, in case I remove them or update them. So I’ve been placing the flexslider folder in js/plugins importing the flexslider.less file into app.less and letting grunt import the flexslider js file.

Should I keep the less files just in the less folder and js files just in the js folder or should I create a new folder for these add-ons?

Any suggestions on this?

Thanks!

2

That way is fine, it’s the common way to do it. I would say the slightly quicker and future-proof way would be to use something like Bower to pull in any external dependencies. You can have Git ignore the Bower directory, so it’s not stored in your repository, and you will also have a record of the exact version of Flexslider or whatever that you installed.

So it would be installed by default to your project root directory then bower_components, but you can customize that by using a .bowerrc file to set it up in assets/components or something like that. Then you would have Wordpress enqueue the JS file from that folder, and you could have LESS or SASS include the CSS from there as well.

Hope that makes sense :smiley:

1 Like
3

That makes sense. Thanks!

4

Why not just add the FontAwesome CDN to your head.php rather than actually including the full stylesheet? Also, are you not installing flexslider via bower? If I install any addon’s, I usually go via bower… correct any ‘main’ bower file problems in my bower.json, and then extend them with my own classes, rather than altering their base style’s which are automatically pulled into your main.css file anyways, and before your custom styles.

So, if you do need to change something about a plugins style, you can pinpoint just those classes, rather than including the entire LESS or SASS file, which is unnecessary at that point.