Add CSS & JS files

1

I am wondering how I can add css & js files ? Thanks

2

As far as CSS: Roots uses LESS as a CSS preprocessor and Grunt to compile it, so for the most part you will want to use this method to style your Roots Theme. You may want to read how Roots uses Grunt.

For JS: Roots also uses Grunt for most of the heavy lifting when it comes to Javascript (lint, concat, minify) and in the case of Modernizr actually compiles only the needed portions for you on the fly. You can add vendor libraries in a few ways. Either by adding them to the assets array and enqueue them in lib/scripts.php, you can add them to the JSFileList in your grunt file which will combine and minify it with all the other scripts, or if you drop them directly into your /assets/js/plugins directory they will be automatically dealt with by Grunt.

All this to say, if you are not familiar with LESS, Grunt, or how to enqueue scripts and css, you might want to read why Roots shouldn’t be your first theme.

HTH

1 Like
3

Just want to add that the latest Roots uses Bower for package management which makes it super easy to quickly install JS projects. Just run bower install isotope --save (for example) inside your theme dir and then add the packaged .js file in the vendor/ directory to your jsFileList array.

However note that in the new Gulp branch this workflow becomes more automated: Bower components will install into the default dir bower_components/ and they’re automatically concatenated/minified unless you override them inside bower.json.

2 Likes
4

Thank you so much guys I followed your answers and they worked with me.

5

@ewafford so for a third-party js library installed via bower which has an accompanying .css file, one should enqueue the css in lib/scripts.php ?

6

Unless you’re using the Gulp branch of Roots then you will need to either (1) manually enqueue Bower package CSS somewhere or (2) add the CSS/LESS to your own LESS files.

You can enqueue your CSS anywhere and lib/scripts.php does seem to be the logical place.

7

@cfx is correct. I haven’t gotten into the gulp branch yet because I’m in the middle of a few grunt projects so I can’t speak to it, but generally speaking I go by the rule:

If it is a large CSS file that is strictly needed for a specific feature on specific page, I will enqueue it conditionally in lib/scripts.php

If it is a small css file that has a more global impact I will include it in my LESS, usually by way of Grunt.

There are obviously exceptions, but thats how I do it.

1 Like