Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Sage Starter

devDependency Status Build Status

Sage Starter is a starter theme based on Sage 8.6, HTML5 Boilerplate, gulp, and Bower that will help you make better websites.


Prerequisite How to check How to install
PHP >= 5.4.x php -v
Node.js >= 6.9 node -v
gulp-cli >= 2.0.0 gulp -v npm install -g gulp-cli
Bower >= 1.3.12 bower -v npm install -g bower

For more installation notes, refer to the Install gulp and Bower section in this document.


  • gulp build script that compiles both Sass and Less, checks for JavaScript errors, optimizes images, and concatenates and minifies files
  • BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
  • Bower for front-end package management
  • asset-builder for the JSON file based asset pipeline
  • ARIA roles and microformats


Clone the git repo - git clone and then rename the directory to the name of your theme or website.

Theme development

Sage Starter uses gulp as its build system and Bower to manage front-end packages.

Install gulp and Bower

Building the theme requires node.js. For best results, update to the latest version of npm: npm i -g npm@latest or use your favorite package manager like Homebrew.

From the command line:

  1. Install gulp-cli and Bower globally with npm i -g gulp bower
  2. Navigate to the theme directory, then run npm i
  3. Run bower install

You now have all the necessary dependencies to run the build process.

Available 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).

Using BrowserSync

To use BrowserSync during gulp watch you need to update devUrl at the bottom of assets/manifest.json to reflect your local development hostname.

For example, if your local development URL is http://project-name.test you would update the file to read:

  "config": {
    "devUrl": "http://project-name.test"

If your local development URL looks like http://localhost:8888/project-name/ you would update the file to read:

  "config": {
    "devUrl": "http://localhost:8888/project-name/"

SVG support

Sage Starter has built-in SVG support! The preferred method for using SVG as implemented is an SVG sprite.


Make sure each SVG has an ID.

<svg xmlns="">
    <symbol id="twitter" viewBox="0 0 64 64">
        <path etc.../>

Save any SVG files you want to use into /assets/images/sprite and the build process will combine all of those images into /assets/images/sprite/sprite.svg.

To use in markup, apply the ID to an SVG's Use element.

<svg role="img" title="Twitter">
    <use xlink:href="map.svg#twitter"/>

Check out SVG For Everybody for IE and <=Edge 12 support of SVG sprites.


Sage Starter documentation is available at


Contributions are welcome and encouraged from everyone!


The best starter theme with a modern front-end development workflow. Based on Sage, HTML5 Boilerplate, gulp, Bower, and Bootstrap.




No releases published
You can’t perform that action at this time.