phase2/pattern-lab-drupal-theme

Pattern Lab Theme

Setup

npm install
cd pattern-lab
composer install

Additionally, the components Drupal module must be enabled:

drush dl components
drush en components -y

Commands

Compile the site:

npm run compile

Start up watches and local server:

npm run start

Run Tests:

npm run test

Configuration

It's almost all done in config.yml. End all paths with a / please (i.e. path/to/dir/). The local gulpfile.js passes the config object to p2-theme-core - which can be viewed at node_modules/p2-theme-core/ (most stuff in lib/).

Documentation for many of the features are found in node_modules/p2-theme-core/docs/ – those are hosted here too.

Linting Config

• Scss: edit .sass-lint.yml - rule docs

More control

The npm run commands above basically trigger gulp without having to install a global dependency. For fine grained control of tasks, install gulp globally with npm install --global gulp and then run gulp help for a list of all available tasks.

Add anything to gulpfile.js that you want! Also, you can copy any file from node_modules/p2-theme-core/lib/ into your repo and use it as a starting point (may need to install packages from p2-theme-core too.)

Many of the features can be turned off, for example if we didn't want all the JS features like linting and concatenation, just toggle enabled under js in config.yml. So you'd just open config.yml and change this:

js:
-    enabled: true
+    enabled: false

pattern-lab-drupal-theme's Issues

Deployment Workflow

Hi Guys,

Thanks for the great work on this. I'm using it on a site at the moment - in the early stages of a few atoms, molecules, and organisms created and Drupal templates mapping to them.

When I push my changes to our test server, no CSS is pushed - since it is .gitignored being part of the /dest/ directory. Also, the generated patternlab site is not pushed since /public/ is also .gitignored.

Can you tell me what you imagine the workflow to deploy these is? I'm not sure if I should remove those from .gitignore or if you reckon we should have node running on the server to constantly compile the CSS and generate the static site for us (I don't think our client will want to do the latter).

Thanks again,
Mark.

Composer install error

I get an error on the initial composer install:

cd pattern-lab
composer install

Gets:

  Problem 1
    - Installation request for pattern-lab/unified-asset-installer v0.5.5 -> satisfiable by pattern-lab/unified-asset-installer[v0.5.5].
    - pattern-lab/unified-asset-installer v0.5.5 requires composer-plugin-api 1.0.0 -> no matching package found.
  Problem 2
    - pattern-lab/unified-asset-installer v0.5.5 requires composer-plugin-api 1.0.0 -> no matching package found.
    - pattern-lab/core v0.7.2 requires pattern-lab/unified-asset-installer ~0.5 -> satisfiable by pattern-lab/unified-asset-installer[v0.5.5].
    - Installation request for pattern-lab/core v0.7.2 -> satisfiable by pattern-lab/core[v0.7.2].

Potential causes:
 - A typo in the package name
 - The package is not available in a stable-enough version according to your minimum-stability setting
   see <https://getcomposer.org/doc/04-schema.md#minimum-stability> for more details.

Read <https://getcomposer.org/doc/articles/troubleshooting.md> for further common problems.

jQuery is not defined

When I start the project for the first time I get following error in the console.

Uncaught ReferenceError: jQuery is not defined

Composer setup error

I am trying to install Pttern lab theme for drupal 8
I am downloading it from here:
https://www.drupal.org/project/patternlab

I am following the setup instructions in the readme file. but when I get to the step to run composer install, i recieve errors. Composer version 1.2.0

Problem 1
    - Installation request for aleksip/plugin-data-transform dev-master -> satisfiable by aleksip/plugin-data-transform[dev-master].
    - aleksip/plugin-data-transform dev-master requires pattern-lab/patternengine-twig ^2.0.0 -> satisfiable by pattern-lab/patternengine-twig[v2.0.0] but these conflict with your requirements or minimum-stability.

When I update the jason file with the new versions, and run composer update, I get php error:

Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Installing pattern-lab/core (v2.7.0)
    Loading from cache

> PatternLab\Installer::postPackageInstall
PHP Fatal error:  Uncaught Error: Call to undefined method PatternLab\InstallerUtil::postPackageInstall() in /var/www/drupalvm/drupal/web/themes/patternlab/pattern-lab/core/src/PatternLab/Installer.php:45
Stack trace:
#0 phar:///usr/bin/composer/src/Composer/EventDispatcher/EventDispatcher.php(255): PatternLab\Installer::postPackageInstall(Object(Composer\Script\PackageEvent))
#1 phar:///usr/bin/composer/src/Composer/EventDispatcher/EventDispatcher.php(209): Composer\EventDispatcher\EventDispatcher->executeEventPhpScript('PatternLab\\Inst...', 'postPackageInst...', Object(Composer\Script\PackageEvent))
#2 phar:///usr/bin/composer/src/Composer/EventDispatcher/EventDispatcher.php(115): Composer\EventDispatcher\EventDispatcher->doDispatch(Object(Composer\Script\PackageEvent))
#3 phar:///usr/bin/composer/src/Composer/Installer.php(563): Composer\EventDispatcher\EventDispatcher->dispatchPackageEvent('post-package-in...', true, Object(Composer\DependencyResolver\DefaultPolicy), Object(Composer\DependencyResolver\Pool), Object(Compos in /var/www/drupalvm/drupal/web/themes/patternlab/pattern-lab/core/src/PatternLab/Installer.php on line 45

Fatal error: Uncaught Error: Call to undefined method PatternLab\InstallerUtil::postPackageInstall() in /var/www/drupalvm/drupal/web/themes/patternlab/pattern-lab/core/src/PatternLab/Installer.php:45
Stack trace:
#0 phar:///usr/bin/composer/src/Composer/EventDispatcher/EventDispatcher.php(255): PatternLab\Installer::postPackageInstall(Object(Composer\Script\PackageEvent))
#1 phar:///usr/bin/composer/src/Composer/EventDispatcher/EventDispatcher.php(209): Composer\EventDispatcher\EventDispatcher->executeEventPhpScript('PatternLab\\Inst...', 'postPackageInst...', Object(Composer\Script\PackageEvent))
#2 phar:///usr/bin/composer/src/Composer/EventDispatcher/EventDispatcher.php(115): Composer\EventDispatcher\EventDispatcher->doDispatch(Object(Composer\Script\PackageEvent))
#3 phar:///usr/bin/composer/src/Composer/Installer.php(563): Composer\EventDispatcher\EventDispatcher->dispatchPackageEvent('post-package-in...', true, Object(Composer\DependencyResolver\DefaultPolicy), Object(Composer\DependencyResolver\Pool), Object(Compos in /var/www/drupalvm/drupal/web/themes/patternlab/pattern-lab/core/src/PatternLab/Installer.php on line 45

Does this theme work with Pattern lab core 2.7 ?

composer install — requirements could not be resolved to installable set of packages

After npm install, I'm getting this error when running composer install in the pattern-lab subdirectory:

> PatternLab\Installer::preInstallCmd
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Warning: The lock file is not up to date with the latest changes in composer.json. You may be getting outdated dependencies. Run update to update them.
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for pattern-lab/unified-asset-installer v0.5.5 -> satisfiable by pattern-lab/unified-asset-installer[v0.5.5].
    - pattern-lab/unified-asset-installer v0.5.5 requires composer-plugin-api 1.0.0 -> no matching package found.
  Problem 2
    - pattern-lab/unified-asset-installer v0.5.5 requires composer-plugin-api 1.0.0 -> no matching package found.
    - pattern-lab/core v0.7.2 requires pattern-lab/unified-asset-installer ~0.5 -> satisfiable by pattern-lab/unified-asset-installer[v0.5.5].
    - Installation request for pattern-lab/core v0.7.2 -> satisfiable by pattern-lab/core[v0.7.2].

Potential causes:
 - A typo in the package name
 - The package is not available in a stable-enough version according to your minimum-stability setting
   see <https://getcomposer.org/doc/04-schema.md#minimum-stability> for more details.

PHP Fatal error: Uncaught Twig_Error_Syntax: Unknown "asset" function

I encountered a problem when compiling our pattern lab theme on our Travis CI Runner.

The full write-up is here: https://github.com/michaellenahan/blog/wiki/PHP-Fatal-error:--Uncaught-Twig_Error_Syntax:-Unknown-%22asset%22-function

The problem was caused by a change to one of the dependencies of pattern lab, gulp-inject.

The commit which caused the issue was klei/gulp-inject@831d4b0#commitcomment-28486839

I am not a front-end developer, I am responsible for back-end development and deployment of my site - I just wanted to put a note here in case anyone else comes across the same problem.

I've also made a comment in the commit page for gulp-inject klei/gulp-inject@831d4b0#commitcomment-28486839 - the maintainer has kindly got back to me with some questions, maybe someone reading this is better able to answer them than I am.