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
Installation
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
One-time Development Environment Setup
Install NodeJS and Node Package Manager globally (LTS version required). 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.
Using and Editing
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 inside theme root:
gulp watch
Build versioned, optimized, minified, autoprefixed assets with command-line instruction inside theme root:
gulp upbuild --production
Customizing Foundation
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
| 2.2.0 |
Updated dependencies for OctoberCMS v3.6 compatibility, recombined OCv2 framework extras Aug 13, 2024 |
|---|---|
| 2.1.0 |
Updated dependencies for OctoberCMS v3.x compatibility, upgraded NPM packages Jun 29, 2023 |
| 2.0.0 |
Updated dependencies for OctoberCMS v2.x compatibility, removed responsive images Gulp task Jun 29, 2023 |
| 1.9.2 |
Added social links repeater field, updated NPM dependencies Jun 29, 2023 |
| 1.9.1 |
Updated NPM dependencies for ES6 forward compatibility Nov 02, 2021 |
| 1.9.0 |
Pinned NPM dependencies for LibSass backward compatibility, fixed composer.json Jul 01, 2021 |
| 1.8.1 |
Updated NPM dependencies, included jQuery from CDNjs Jun 04, 2021 |
| 1.8.0 |
Updated NPM dependencies for NodeJS 14.x compatibility, added composer.json May 12, 2021 |
| 1.7.0 |
Replaced CSS autoprefixing and minification with PostCSS Nov 12, 2020 |
| 1.6.2 |
Updated NPM dependencies, removed IE fallbacks, rebuilt frontend assets Aug 18, 2020 |
| 1.6.1 |
fixed Gulp build BrowsersList override Jan 13, 2020 |
| 1.6.0 |
Updated NodeJS and NPM dependencies Nov 12, 2019 |
| 1.5.0 |
Updated NPM dependencies, fixed gulp-autoprefixer warning Sep 20, 2019 |
| 1.4.0 |
Updated NPM dependencies, switched back to NPM from Yarn Sep 11, 2019 |
| 1.3.0 |
Replaced gulp-imagemin with gulp-responsive for image optimization Nov 26, 2018 |
| 1.2.1 |
Switched to unminified Modernizr 2.8.3 (from Bower) Oct 17, 2018 |
| 1.2.0 |
Refactored Gulp build to use NPM package configuration (with "not dead" browserslist) Jun 12, 2018 |
| 1.1.1 |
Fixed needless sourcemaps minification in Gulp task Jan 31, 2018 |
| 1.1.0 |
Added Gulp task to increment build number, preloaded Bower vendor assets Jul 14, 2017 |
| 1.0.2 |
Added intro page, enabled Yarn package manager Mar 31, 2017 |
| 1.0.1 |
Added theme customization (site_name, brand_color) Oct 19, 2016 |
| 1.0.0 |
Style guide default layout Jan 23, 2016 |
| 0.9.2 |
Composite layout with partials, kitchen-sink intro page for testing style changes Jan 23, 2016 |
| 0.9.1 |
Initial F5fresh theme with Gulp-built frontend resources Jan 23, 2016 |