Drupal 8 Theme Using the ZURB Template
It also includes:
- Handlebars HTML templates with Panini
- Style Sherpa: A basic Style Guide generator from Zurb.
- Sass compilation and prefixing
- Built-in BrowserSync server
- Image compression
Local Development Installation
To use this theme as a basis for developing your own Foundation-based theme, your computer needs:
To get started, go to this folder in your command line, and install the needed dependencies:
Once node and bower have completed installing the dependencies, you can run two commands:
npm startto run Gulp tasks for compiling files and watching for changes to
.hbsfiles in the src directory. These files will be compiled into mirrored directories within the dist directory. The static prototype that is generated is viewable at:
Every time changes are made to any of the files in the src/assets, src/layouts, or src/styleguide directory that page will update automatically through BrowserSync.
*.libraries.yml file for this theme is set up to use the compiled CSS and js within dist/assets. By default the CSS and js will include source maps, so prior to using this theme in a production environment run:
npm run build
To recompile all files without source maps.
In src/assets/scss there is a
_settings.scss file, and
app.scss file, which are used to define which components from the Foundation framework you'd like to use. Consult the Foundation sites docs for information about the various components and settings.
There are also some starter partials included within src/assets/scss/components to help you get started with custom styling on top of Foundation. All of these files are imported into the
_init.scss file, which is imported at the bottom of the
If you need to customize which js files are included from the Foundation framework the simplest way to do so is by commenting out the unneeded js files listed under
Known Issue: Slowness with Drupal Cache Refresh
If you experience slowness with Drupal cache refreshes in your local development environment you may need to move the
node_modules directory outside of the Drupal installation, and create a sym link to that directory. See https://www.drupal.org/node/2329453.
Note: This theme is meant to be used in a typical git workflow, so if you are manually moving it into a production environment DO NOT include the