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.gulpandgulp watchwill create the buld folder. You can symlink yourbuild/folder to yourthemesfolder. (example below)dist/: The distribution version of the theme lives.gulp distcreates 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