Starter development template for building Zurb Foundation 5 themed OctoberCMS sites.
Includes:
- latest Foundation 5 source from official Bower repository
- style guide layout with most Foundation UI components
- GulpJS-based build system for development and production
- NPM-based config system for development and production
Add the theme to existing project while logged into OctoberCMS account online, or interactively by searching it inside Settings/System/Updates/Themes in backend, or with the following command-line instructions inside project root:
php artisan theme:install castus.f5fresh f5fresh
php artisan theme:use f5fresh
Install NodeJS and Node Package Manager globally (LTS version preferred for Gulp ^3). Run the following command-line instructions inside theme root:
npm install --global gulp-cli bower
npm install && bower install
Integrating build process into OctoberCMS project is easy - copy (or merge into existing) files into project root:
gulpfile.js
package.json
Adjust paths.root configuration variable to themes/castus-f5fresh/ and start using command-line tasks from project root.
Check styleguide/default layout for example HTML page structure and mandatory includes. Custom styles example source is in assets/scss/styleguide SCSS, scripts in assets/es6/styleguide JS. Development changes can be automated with command-line instruction from configured Gulpfile (project or theme) build root:
gulp watch
Build versioned, optimized, minified, autoprefixed assets with command-line instruction:
gulp upbuild --production
Global Foundation styling parameters should be overriden in assets/scss/_settings553 SCSS.
Comment out unwanted styles and scripts for leaner and faster Foundation custom build:
For in-depth customizations follow Zurb's guide: How to Make Foundation 5 Your Own