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.

	<?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: "" };

	// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
	// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch

	// async function
	async function fetchAsync () {
	// await response of fetch call
	let response = await fetch('https://api.github.com');
	// only proceed once promise is resolved
	let data = await response.json();
	// only proceed once second promise is resolved

	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.