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
- Clone the github repo to your local environment
composer install
- cd to
web/themes/custom/flupal/pattern-library
and run this command:npm install
npm install -g bower
bower install
npm start
. The Fabricator pattern library will automatically open in your web browser with live reload- Open a sass file, eg.
web/themes/custom/flupal/pattern-library/src/assets/toolkit/styles/toolkit.scss
- Make a change. When you save, the Fabricator will automatically recompile your sass and you'll see the change instantly in the pattern library.
- Refresh a Drupal page. The change is there too!
This project is still in active development and awaiting the following tasks:
- 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 inweb/modules/contrib/
- Theme (packages of type
drupal-theme
) will be placed inweb/themes/contrib/
- Profiles (packages of type
drupal-profile
) will be placed inweb/profiles/contrib/
- Creates default writable versions of
settings.php
andservices.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.
- Run
composer update drupal/core --with-dependencies
to update Drupal Core and its dependencies. - 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
orrobots.txt
. - Commit everything all together in a single commit, so
web
will remain in sync with thecore
when checking out branches or runninggit bisect
. - 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.