SilverStripe Vanilla Theme

An alternative default theme for SilverStripe v4, based upon:

• Webpack v3 (includes dev server)
• Bootstrap v4
• SilverStripe v4
• Font Awesome
• Modernizr

Also includes responsive typography styles, and form field template overrides to use Bootstrap form styles.

Contents

• Requirements
• Installation
• Configuration
• Usage
• Issues
• Contribution
• Attribution
• Maintainers
• License

Requirements

• SilverStripe Framework v4

Installation

Installation is via Composer:

$ composer require praxisnetau/silverstripe-vanilla

If you want to modify the theme, you will also need to use Yarn (or NPM) to install the theme dependencies:

$ cd themes/vanilla
$ yarn install

Configuration

To use this theme with your SilverStripe application, you will need to configure SSViewer via YAML:

SilverStripe\View\SSViewer:
  themes:
    - 'vanilla'
    - '$default'

Usage

This theme includes three modes for working with your source files:

$ yarn watch  # monitors source files for changes and rebuilds automatically
$ yarn build  # prepares JS/CSS bundles for deployment to production server
$ yarn start  # runs webpack-dev-server to automatically update browser

Watch

Using this mode, your source files will be monitored for changes and your theme bundles will be automatically rebuilt when a change is detected:

$ yarn watch

Note that when using this mode, you will need to manually refresh your browser to see the changes.

Build

When your theme is ready to be deployed to production, you can run build to prepare your JS/CSS bundles. Webpack will optimise and minify the bundles accordingly:

$ yarn build

Start

In this mode, webpack-dev-server will be started to monitor your source files changes and will automatically update the browser without the need to refresh the page:

$ yarn start

This mode is a little trickier to get working than the others. In order to make use of this mode, you need to inform SilverStripe to load the theme bundles from the development server, which by default runs at http://localhost:8080.

Open the templates/Page.ss file, and look for these lines:

<% require themedCSS('production/styles/bundle') %>
<%-- require css('http://localhost:8080/production/styles/bundle.css') --%>

<% require themedJavascript('production/js/bundle') %>
<%-- require javascript('http://localhost:8080/production/js/bundle.js') --%>

To use the development server, you'll need to uncomment the http://localhost:8080 lines and comment out the themedCSS and themedJavascript lines.

When your theme is ready for production, you'll need to build the bundles and revert back to the the themedCSS and themedJavascript lines.

You can make this whole process automatic with some logic added to your PageController class, but that goes beyond the scope of this repo!

Issues

Please use the GitHub issue tracker for bug reports and feature requests.

Contribution

Your contributions are gladly welcomed to help make this project better. Please see contributing for more information.

Attribution

• Makes use of Font Awesome by Dave Gandy.
• Makes use of Bootstrap by the Bootstrap Authors and Twitter, Inc.
• Makes use of webpack and webpack dev server by Tobias Koppers, Kees Kluskens, and many more.

Maintainers

Colin Tucker	Praxis Interactive

License

BSD-3-Clause © Praxis Interactive