Chris Coleman freshyill

Earlier today @_beneverard tweeted about a common problem with managing style guides. He said:

For those who have created extensive pattern libraries, how do you go about using that CSS in a project? Manually copy it across?

I started thinking about how we could encourage this in Pattern Lab. A lot of my recent work on PL has revolved around creating packages for Composer and it seemed like this was a similar problem. After playing around I'm curious if folks would think the following process was an onerous workflow. Let's say we're going to track our styles and grunt/gulp uses public/styles/ as a target directory:

Delete all files under public/styles
Commit the deletion
Add public/styles to .gitignore
Create a new repo just for your production styles

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

First install patternlab/edition-node-gulp.

Then update package.json and run npm install in the command line.

Then update gulpfile.js, then patternlab-config.json.

If you're renaming your default stylesheet, update it in source/_meta/_00-head.mustache.

Once everything is updated, test with gulp patternlab:build.

I have had a few requests for more information about using Lando with Drupal 8, the Emulsify theme and Gulp. In order to put what I've learned in one place, I'm adding my notes here.

My initial problem was reported here, but since then I have discovered a few additional things worth noting.

Once you have a working site on Lando and are ready to install Emulsify use the following directions instead of what has provided by the Emulsify developers. These instructions assume you have used Composer to install Drupal and that the root Drupal files are in the /web directory.

NOTE: To follow these instructions, you will need to run NPM commands from your host machine, which means you must have Node and NPM installed. Fortunately, they are installed together in one installation. If you wish to confirm you have them installed, run node -v and npm -v. To install, visit nodejs.org and follow the i

	<?php
	// This is the cleaner code per request of a thread in the LinkedIn group "WordPress"

	// ...

	// register and enqueue loadCSS
	function load_scripts_and_styles() {

	// register loadCSS
	wp_register_script( 'load-css-async', get_stylesheet_directory_uri() . '/path/to/js/loadCSS.js', array(), '', false );

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}

	import React from "react";
	import { render } from "react-dom";

	const ParentComponent = React.createClass({
	getDefaultProps: function() {
	console.log("ParentComponent - getDefaultProps");
	},
	getInitialState: function() {
	console.log("ParentComponent - getInitialState");
	return { text: "" };

	1. Highlight a recommended option,
	2. Allow users to switch currency (€/$/£)
	3. Allow users to switch pricing monthly/yearly
	4. Keep the entire pricing plan area clickable
	5. Use slider to calculate how much a user would save
	6. Provide free first month for good engagement
	7. Prominently highlight testimonials prominently
	8. Repeating call to action on top and bottom
	9. Sell benefits instead of features
	10. Indicate that users can cancel any time

	# One liner
	wget --recursive --page-requisites --adjust-extension --span-hosts --convert-links --restrict-file-names=windows --domains yoursite.com --no-parent yoursite.com

	# Explained
	wget \
	--recursive \ # Download the whole site.
	--page-requisites \ # Get all assets/elements (CSS/JS/images).
	--adjust-extension \ # Save files with .html on the end.
	--span-hosts \ # Include necessary assets from offsite as well.
	--convert-links \ # Update links to still work in the static version.