Sage Starter Theme
If you are looking for a great front-end workflow, checkout Sage Starter Theme for WordPress.
What is Sage?
Sage is basically a starter theme, a workflow and a wrapper for Bootstrap 3 (optional). It was formerly known as Roots and was created by Ben Word. It is based on HTML5 Boilerplate, gulp, Bower, and Bootstrap, that will help you make better themes.
Why use Sage?
For front-end package management, Sage uses Bower to pull in third party packages or required assets such as Bootstrap 3, jQuery, Fontawesome and you can even add others yourself.
Sage is organized, It uses an asset-builder to read the project’s manifest.json file and automatically puts all your assets in the right place.
Unlike other typical themes, the Template markup is handled by a single file instead of being scattered across all template files and is controlled by a theme wrapper.
Sage is also well documented. Everything you need to know about Sage is in its documentation and there is an ongoing support on their Roots Discourse forms. So whether you are a beginner or someone experience and want to learn more, don’t hesitate. There’s definitely enough information on Sage to help you understand how it works.
How to install Sage and its project dependencies?
To install Sage, clone the git repo to a new folder and specify your theme from your WordPress themes directory:
git clone https://github.com/roots/sage.git theme-name
Now that you have the theme, you have to make sure your development machine must at least have the two requirement installed:
- Node >= 0.10.0
- npm >=2.1.5
It is recommended that you have the latest version of npm by simply using this command:
npm install -g npm@latest
From the command line:
- Install gulp and Bower globally with npm install -g gulp bower
- Navigate to the theme directory, then run npm install
- Run bower install
Before you start working on your new theme, you must know the following commands:
- gulp — Compile and optimize the files in your assets directory
- gulp watch — Compile assets when file changes are made
- gulp –production — Compile assets for production (no source maps)
To use BrowserSync during gulp watch you need update devUrl at the bottom of assets/manifest.json to reflect your local development hostname.
- bower install –save package-name — install Bower packages. Using the –save flag will add the package into your project’s bower.json dependencies.
The Future of Sage
Now that Sage has been released, the Roots team will be focusing on making a Yeoman Generator which will make the starter theme framework agnostic. “With a Yeoman Generator you’ll be able to select from options to have your starter theme built how you like it from the beginning.”
If you want to know more about Sage, check out this complete documentation you can find here.