It's Drupal, with a pattern library!

This is a template project that shows a "proof of concept" demonstrating how you can embed a pattern library directly into your Drupal project. As you edit the sass in your PL, it automatically goes into your Drupal theme. This gives you the benefits of having a pattern library, without creating any extra effort for your front end developer.

This project was originally created for a presentation at Stanford Drupal Camp. You can see the slideshow.

Related Projects:

• wp-pattern-library, a WordPress theme that integrates a pattern library
• Exygy Patterns, Exygy's boilerplate pattern library with Fabricator and Foundation 6

1. Clone the github repo to your local environment
2. composer install
3. cd to web/themes/custom/flupal/pattern-library and run this command:
   1. npm install
   2. npm install -g bower
   3. bower install

1. npm start. The Fabricator pattern library will automatically open in your web browser with live reload
2. Open a sass file, eg. web/themes/custom/flupal/pattern-library/src/assets/toolkit/styles/toolkit.scss
3. Make a change. When you save, the Fabricator will automatically recompile your sass and you'll see the change instantly in the pattern library.
4. Refresh a Drupal page. The change is there too!

This project is still in active development and awaiting the following tasks:

1. Clean up child theme flupal - no sass

This project is based on the following open source projects:

• drupal-composer
• ZURB Foundation Drupal theme
• Fabricator
• And of course Drupal 8

This is a framework you can use for your own development. It includes a stable copy of Drupal 8, a custom theme based on the ZURB Foundation contrib theme, and the Fabricator pattern library.

See below for some notes on drupal-composer:

When installing the given composer.json some tasks are taken care of:

• Drupal will be installed in the web-directory.
• Autoloader is implemented to use the generated composer autoloader in vendor/autoload.php, instead of the one provided by Drupal (web/vendor/autoload.php).
• Modules (packages of type drupal-module) will be placed in web/modules/contrib/
• Theme (packages of type drupal-theme) will be placed in web/themes/contrib/
• Profiles (packages of type drupal-profile) will be placed in web/profiles/contrib/
• Creates default writable versions of settings.php and services.yml.
• Creates sites/default/files-directory.
• Latest version of drush is installed locally for use at vendor/bin/drush.
• Latest version of DrupalConsole is installed locally for use at vendor/bin/drupal.

This project will attempt to keep all of your Drupal Core files up-to-date; the project drupal-composer/drupal-scaffold is used to ensure that your scaffold files are updated every time drupal/core is updated. If you customize any of the "scaffolding" files (commonly .htaccess), you may need to merge conflicts if any of your modfied files are updated in a new release of Drupal core.

Follow the steps below to update your core files.

1. Run composer update drupal/core --with-dependencies to update Drupal Core and its dependencies.
2. Run git diff to determine if any of the scaffolding files have changed. Review the files for any changes and restore any customizations to .htaccess or robots.txt.
3. Commit everything all together in a single commit, so web will remain in sync with the core when checking out branches or running git bisect.
4. In the event that there are non-trivial conflicts in step 2, you may wish to perform these steps on a branch, and use git merge to combine the updated core files with your customized files. This facilitates the use of a three-way merge tool such as kdiff3. This setup is not necessary if your changes are simple; keeping all of your modifications at the beginning or end of the file is a good strategy to keep merges easy.

With using the "Composer Generate" drush extension you can now generate a basic composer.json file from an existing project. Note that the generated composer.json might differ from this project's file.

Composer recommends no. They provide argumentation against but also workrounds if a project decides to do it anyway.

The drupal-scaffold plugin can download the scaffold files (like index.php, update.php, …) to the web/ directory of your project. If you have not customized those files you could choose to not check them into your version control system (e.g. git). If that is the case for your project it might be convenient to automatically run the drupal-scaffold plugin after every install or update of your project. You can achieve that by registering @drupal-scaffold as post-install and post-update command in your composer.json:

"scripts": {
    "drupal-scaffold": "DrupalComposer\\DrupalScaffold\\Plugin::scaffold",
    "post-install-cmd": [
        "@drupal-scaffold",
        "..."
    ],
    "post-update-cmd": [
        "@drupal-scaffold",
        "..."
    ]
},

If you need to apply patches (depending on the project being modified, a pull request is often a better solution), you can do so with the composer-patches plugin.

To add a patch to drupal module foobar insert the patches section in the extra section of composer.json:

"extra": {
    "patches": {
        "drupal/foobar": {
            "Patch description": "URL to patch"
        }
    }
}

Follow the instructions in the documentation on drupal.org.