Shila theme for Drupal 8
An atomic design and Pattern Lab friendly starting point for new Drupal 8 themes.
A Pattern Lab generated style guide can be found here (online style guide might not be up to date with the theme).
Defines only four regions: Header, Main, Footer and Off Canvas. Other layout is expected to be implemented using Drupal blocks and a CSS grid framework.
Tries to follow Drupal CSS coding standards.
Please note that this theme is in early stages of development.
Development tools, libraries and frameworks used
- libSass Sass engine
- Gulp toolkit
- Bower package manager
- Composer dependency manager (for installing Pattern Lab)
- Bourbon mixin library
- Singularity grid framework
Installing development dependencies
Prerequisites: npm, Gulp and Bower installed.
In the theme root directory run:
npm install
bower install
Integrating Pattern Lab
While it is possible to use Shila theme on its own, it is designed to be used with the Twig edition of Pattern Lab, Shila Drupal Theme StarterKit and Data Transform Plugin. At the moment a forked version of Pattern Lab is required for Drupal template compatibility.
Prerequisites: Composer installed.
In the theme root directory run:
git clone -b shila-drupal-theme http://github.com/aleksip/edition-php-twig-standard pattern-lab
git clone http://github.com/aleksip/starterkit-shila-drupal-theme starterkit
In the pattern-lab
directory run:
composer install
In the file pattern-lab/config/config.yml
change sourceDir
and twigAutoescape
like so:
sourceDir: ../starterkit/dist
twigAutoescape: false
If everything went well you should now be able to generate the static Pattern Lab site. In the pattern-lab
directory run:
php core/console --generate
Using Gulp
The included gulpfile.js
contains tasks for watching theme files and acting according to those changes. Processed master files from the theme will be copied over to the starterkit
directory, which in turn is used by Pattern Lab.