WordPress starter theme using Gulp, Foundation & SASS.
Checkout yo-bonsai, a yeoman generator for bonsai that will automate the theme even more!
- Quickly develop WordPress themes that can be used by anyone.
- Develop custom WordPress sites for invidual use.
- Lean compressed assets with minimal HTTP requests.
- Gulp for compiling SASS to CSS, live reloading, concatenating and minifying files
- Bower for front-end package management
- Foundation 5
- BrowserSync for live reloading and actions
- Uses WordPress Coding Standards
- ARIA roles and microformats
- WooCommerce ready (coming soon)
- bbPress ready (coming soon)
Install gulp and bower globally if not already installed.
npm install gulp -g
npm install bower -g
Install node modules and bower components. (This will run bower install)
npm install
gulp
- build the project oncegulp watch
- watch for file changes, build the assets, run livereloadgulp dist
- compile all/ move all files ready for production
Brief overview of the folders used in Bonsai. Gulp is used to generate the build
and dist
folders where the compiled & optimized files live.
src/
: Edit files here. All raw sass, images, php files are here.build/
: Used for development of the theme. SASS is compiled here. Images are compressed and placed here.gulp
andgulp watch
will create the buld folder. You can symlink yourbuild/
folder to yourthemes
folder. (example below)dist/
: The distribution version of the theme lives.gulp dist
creates the distribution.dist/theme
: This is the final code files with no source maps, all assets are optimized.
Symlink in windows example
mklink /D c:\xampp\htdocs\wordpress\wp-content\themes\my-theme c:\dev\projects\bonsai\build\
The following names are used throughout the theme for easy search/ replace.
You can also use yo-bonsai to auto generate these.
themeName
> Theme Name
themeHandle
> Theme_Name
themeFunction
> theme_name
themeTextDomain
> theme-name
Copyright 2015 Ross Dallaire. GNU General Public License v2 or later http://www.gnu.org/licenses/gpl-2.0.html