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?

Sage has a lot of cool and useful features to offer. With its new front-end workflow that uses Gulp as its builds system, you can write stylesheets with Less or Sass. You can also automatically check your JavaScript for errors, optimize images, enable synchronized browser using BrowserSync and much more.

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

The basics

Before you start working on your new theme, you must know the following commands:

Gulp 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 commands:

• 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.