Front end template based off of the Sage theme workflow and HTML5BP.
JavaScript HTML CSS
Permalink
Failed to load latest commit information.
assets
.bowerrc Version 2.0 - now updated and based off of the workflow from Sage. Apr 22, 2015
.editorconfig
.gitignore Version 2.0 - now updated and based off of the workflow from Sage. Apr 22, 2015
.jshintrc Initial Commit. Sep 7, 2014
README.md
apple-touch-icon-precomposed.png Initial Commit. Sep 7, 2014
bower.json
crossdomain.xml
favicon.ico
gulpfile.js
humans.txt
index.html
package.json "Remove gulp-load-plugins dependency" from Sage: roots/sage@4a9b066 May 6, 2015
robots.txt

README.md

Front End Template

A front-end project template based off of the workflow from the Sage WordPress starter theme and HTML5BP.

Features

  • gulp build script that compiles both Less and Sass, 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
  • normalize.css for a good CSS reset

Install gulp and Bower

Building the project requires node.js. We recommend you update to the latest version of npm: npm install -g npm@latest.

From the command line:

  1. Install gulp and Bower globally with npm install -g gulp bower
  2. Navigate to the theme directory, then run npm install
  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). Keep in mind that if you run this, you'll need to update the filenames in index.html or wherever you have it yourself.

Using BrowserSync

It happens automatically as soon as you run gulp watch. Yay!

CSS Preprocessors

By default this repo uses Sass - but there is a Less branch availble for those who prefer Less. For those using Sass, please keep in mind the gulfile uses glup-sass - which uses libsass.