Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

SilverStripe Foundation Theme

Foundation 5 + Compass/Grunt, packaged up into a clean SilverStripe theme suitable for rapid prototyping or as a solid base for your own responsive theme.

Based on the Foundation Compass Template and Foundation libsass template.

Live Theme Demo

SilverStripe Foundation Theme

Working with the Theme

You can use the theme in two distinct ways.

  1. Manage the theme using Composer and update using composer update. This method should be used if you are using the theme for prototyping and do not need to edit the theme files directly.

  2. Use the theme as a starting point for your own custom theme. In this case, you're best off installing with git and committing changes to your git repo.

Composer Installation

"require": { "rywa/silverstripe-foundation": "1.1.*" }

Add themes/foundation to your .gitignore

Git Installation

cd themes

git clone git:// foundation

Enable Theme

  theme: 'foundation'

in /mysite/_config/config.yml

Using Compass and Bower

If you're editing the Sass files, just run the following command:

compass watch

If you'd like to upgrade to a newer version of Foundation down the road just run:

bower update

Using Grunt & Libsass (instead of Compass)

Instead of using Compass, you can use Grunt and Libsass.

You need the npm packages set up, in order to do so do, cd into the theme directory and run:

npm install

Now, run:



SilverStripe 3.1.x


For using Compass:

  • Ruby 1.9+
  • compass: gem install compass

For using Grunt:

  • Grunt: npm install -g grunt-cli


While not required, you'll get the best experience with this theme by installing the foundationforms module below. The Foundation Forms module is also compatible with, and makes a great companion to, the User Forms module.

SilverStripe ZURB Foundation Forms Module

Use .ss templates with Interchange

SilverStripe ZURB Foundation Interchange Module

The Gist linked below is a custom Editor Config that I use. It is a single line of buttons with Foundation specific styles.

SilverStripe Foundation HtmlEditorConfig Gist

About Foundation 5

Foundation is the most advanced responsive front-end framework in the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.