#42

Product support

Get help in the theme support forum.

Categories

  • Frameworks

Starter development template for building Zurb Foundation 6 themed October CMS sites.

This theme was initially based on f5fresh, the main reason I made this theme was because f5fresh is based on Foundation 5 and I needed Foundation 6 (and waiting was not an option).

Includes:

Note that the theme doesn't contain any pages.

Wait! We already the have Blank Foundation 6 theme!

Yes, I know, but the build system in this theme is a bit more complete as you can also compile your Javascript (not just SCSS) and you can use bower to manager your front-end dependencies. Another big difference is that I have a Github repo so anyone can contribute code. I tried to find a repo for Blank Foundation 6, but it seems there's none.

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 zietbukuel.oktober-foundation
php artisan theme:use oktober-foundation

One-time Development Environment Setup

Install NodeJS and Node Package Manager globally. Run the following command-line instructions inside theme root:

npm install -g gulp bower
npm install && bower install

Using and Editing

Custom styles should be in assets/scss/app.scss, scripts in assets/es6/app.js. Development changes can be automated with command-line instruction inside theme root:

gulp watch

Build optimized, minified, autoprefixed assets with command-line instruction inside theme root:

gulp --production

Customizing Foundation

Global Foundation styling parameters should be modified in assets/scss/_settings.scss Comment out unwanted styles and scripts for leaner and faster Foundation custom build: assets/scss/_foundation6.scss assets/es6/app.js

  • Found the theme useful on 30 Aug, 2016

    I had to change my .htaccess to make fontAwesome work (which is stored in /bower_components/ inside theme folder). However, this is a great starting point for theme development with foundation :)

1.0.6

Added image optimization. Removed Bower. Implemented Yarn. Gulpfile.js improvements.

May 28, 2017

1.0.5

Built demo site.

Feb 10, 2017

1.0.4

Updating packages and README.

Feb 09, 2017

1.0.3

Using gulp-clean-css instead of gulp-minify-css.

Jul 18, 2016

1.0.2

Fixed gulp watch.

Jun 07, 2016

1.0.1

Fixed the order foundation.core.js should be in app.js.

Jun 05, 2016

1.0.0

Initial Oktober Foundation theme with Gulp-built frontend resources.

Jun 04, 2016