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

http://silverstripe-foundation.com

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://github.com/ryanwachtl/silverstripe-foundation-theme.git foundation

Enable Theme

SSViewer:
  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:

grunt

Requirements

SilverStripe 3.1.x

Optional

• Node.js
• bower: npm install bower -g

For using Compass:

• Ruby 1.9+
• compass: gem install compass

For using Grunt:

• Grunt: npm install -g grunt-cli

Recommended

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.

• Homepage
• Documentation