A few years back, we published an article about Roots, a Theme Framework for WordPress. Now Roots has turned into a company and they’ve turned the Roots theme framework into two sets of tools namely Sage and Bedrock. In this article, I’m going to walk you through Sage. It utilizes HTML5 Boilerplate, gulp, Bower, and the Bootstrap front-end framework. First I’ll give you a brief overview of each of the tools that I’ve just mentioned and then we’ll go through the installation and customization of the framework. Finally we’ll go through the basic Sage workflow. Tools HTML5 Boilerplate – a front-end template. Gulp – a build system used for automating tasks such as minification and concatenation of front-end assets, optimizing images, running tests and many others. Bower – a package manager for front-end assets. It’s used for pulling JavaScript libraries like jQuery or Lodash into your project. Browsersync – synchronises file changes and interactions in multiple devices. asset-builder – used for collecting assets in your theme and putting them together. wiredep – used for injecting Sass and Less dependencies from Bower into the main theme stylesheet. Bootstrap – a front-end framework that
Share This