The Roots theme keeps its css, less, js, and img folders organized in its assets folder. Inside the assets folder, the structure is very similar to our structure from the Chapter 2, Bootstrappin' Your Portfolio, Portfolio site, as it is based, like ours, on the HTML5 Boilerplate.
We will soon replace Roots' assets with our own. But it's worth knowing how Roots works before we do so. Let's size up the contents of the Roots assets folder. The contents are shown in the following screenshot:
The Roots documentation (http://roots.io/roots-101/#theme-assets) explains how the files work together:
- In the
lessfolder, theapp.lessfile manages all style rules. It begins by importing all Bootstrap styles from thebootstrap.lessfile in thebootstrapfolder and then provides commented sections with recommended selectors to write custom lines of LESS. - The
app.lessfile is intended to be compiled to themain.min.cssfile in thecssfolder. - Also in the
cssfolder iseditor-style.css, which is used to supply custom styles to the WordPress visual editor. - The
jsfolder contains_main.js, which is intended to manage custom lines of JavaScript. (The file is equipped with a method to specify and limit the scope of lines of JavaScript to just the context(s) where needed.) - The
pluginsfolder inside thejsfolder holds all Bootstrap plugins, and is also intended to help manage any additional plugins. - Like the HTML5 Boilerplate, the
vendorfolder contains essential standalone files and libraries, initially jQuery and Modernizr. - Rather than combining plugins into a
plugins.jsfile, the Roots strategy is to combine all plugins together with_main.jsinto a single filescripts.min.js.
In the Roots main folder is a Gruntfile, which can be used (dependent on the installation of Grunt on your system) to do the work of compiling LESS to CSS as well as combining, minifying, and concatenating the JavaScript files.
Of course, we're not dependent on Grunt to accomplish this. The LESS compiler we've used in the previous chapters will continue to do its job just fine. And we can manage the combining, minifying, and concatenating of JavaScript by other means as well. (See Appendix A, Optimizing Site Assets.)
At present, we simply want to bring in the styles, scripts, and fonts we've already built in Chapter 2, Bootstrappin' Your Portfolio. The simplest, most straightforward way to do this is to swap the Roots assets folder for our own folder of assets.