Evan Willhite evanmwillhite

Pattern Lab: Atomic Design + Living Styleguide

Background

Automated (or "living") styleguides are a popular topic in Frontend development these days. And it's no suprise, as they benefit the integrity of the project as well as ease design and development (Link to Joe’s article on why styleguides). Four Kitchens has a long history of using static styleguides within projects, but as the Frontend team reevaluated our process this year, we wanted to standardize around an automated styleguide for future projects. By automating this part of our process, we ensure the styleguide always reflects the latest design and code during the entire life of the project.

We began by evaluating existing automated styleguide tools and narrowed the selection down to a couple that made sense alongside our existing toolset: KSS (Link to Randy’s article) and Pattern Lab. We then committed to testing these in real projects to expose strengths/weaknesses so that we could eventually choose the best tool

Introducing Emulsify: Pattern Lab Prototyping Tool and Drupal 8 Theme

Part 1: History

There is no question that the Frontend space has exploded in the past decade, having gone from the seemingly novice aspect of web development to a first-class citizen to deeper specialization. At the smaller agency level, being a Frontend engineer typically involves a balancing act between this general and specific knowledge. This makes it all the more important for agency Frontend teams to take a step back and determine some shared principles. We at Four Kitchens did this through late summer and into fall, and here's what we came up with:

1. Backend Agnostic

Even within Four Kitchens, we build websites and applications using a variety of backend languages and database structures, and this is only a microcosm of the massive diversity in modern web development. Our Frontend team strives to choose and build tools that are portable between backend systems. Not only is this a smart goal internally but also an importa

Introducing Emulsify: Pattern Lab Prototyping Tool and Drupal 8 Theme

Part 2: Getting started

In the last post, we introduced Emulsify and spoke a little about the history that went into its creation. In this post, we will walk through the basics of Emulsify to get you building lovely, organized components automatically added to Pattern Lab.

Prototyping

Emulsify is at it's most basic level a prototyping tool. Assuming you've met the requirements and have installed Emulsify, running the tool is as simple as navigating to the directory and running npm start. This task takes care of building your Pattern Lab website, compiling Sass to minified CSS, linting and minifying Javascript, even creating an SVG sprite from SVGs in the images/icons/src/ directory. Also, this single command will start a watch task and open your Pattern Lab instance automatically in a browser. So now when you save a fi

	(function () {

	'use strict';

	var mainMenuToggle = document.getElementById('main-menu-toggle');
	var mainMenu = document.getElementById('main-menu');
	var mainMenuList = document.getElementById('main-menu__list');
	var mainMenuClose = document.getElementById('main-menu__close');
	var mainMenuParent = document.querySelectorAll('.main-menu__item--with-child > a');
	var mainMenuBack = document.querySelectorAll('.main-menu__back');

	<div class="card-grid card-grid--icon">
	<div class="card card--icon">
	<div class="card__text card__text--icon">
	<div class="card__icon"><span class="sprite-icon sprite-money"></span></div>
	<h2 class="card__title card__title--icon">The highest salaries</h2>
	<div class="card__sub card__sub--icon">
	<p>Odio dignissimos ducimus qui blanditiis</p>
	</div>
	</div>
	</div>

	<div class="infographic">
	<div class="card--full infographic__card">
	<img src="../../../../themes/custom/nyunursing/images/infographic/info1.jpg">
	<div class="infographic__text">
	<h2 class="card__title--full infographic__title">214 <span>Graduates this year</span></h2>
	</div>
	</div>
	<div class="card--full infographic__card">
	<img src="../../../../themes/custom/nyunursing/images/infographic/info2.jpg">
	<div class="infographic__text">

	<div class="home-masthead">
	<div class="home-masthead__wrapper">
	<h2 class="home-masthead__heading">The point where data is most valuable and most vulnerable<span>is right in front of you.</span></h2>
	<a href="home-masthead__cta" class="button">Learn More</a>
	<ul class="home-masthead__list">
	<li class="home-masthead__list-item"></li>
	<li class="home-masthead__list-item"><a class="home-masthead__link" href="">Cloud Security</a></li>
	<li class="home-masthead__list-item"><a class="home-masthead__link" href="">Network Security</a></li>
	<li class="home-masthead__list-item"><a class="home-masthead__link" href="">Data & Insider Threat Security</a></li>
	<li class="home-masthead__list-item"><a class="home-masthead__link" href="">Cross Domain</a></li>

	<section class="capabilities">
	<ul class="capabilities__list">
	<li class="capabilities__item">
	<a href="#" class="capabilities__link">
	<h2 class="capabilities__title">Cloud Security</h2>
	<h3 class="capabilities__text">Keeping attackers out starts with better visibility into people's actions across the network, in data centers, branch offices and cloud environments.</h3>
	<span class="capabilities__btn button btn-green btn-arrow btn-small">Learn More</span>
	</a>
	</li>
	<li class="capabilities__item">

	1. Single Authoritative Source: A living styleguide becomes the authoritative source for your branding, design and code. Too often, authority is spread across multiple iterations - multiple rounds of mood boards, wireframes, mocks/prototypes (not to mention written conversations including email or ticketing systems). These are all necessary pieces, but a living styleguide serves as a final definitive source - one that should be authorized by the entire team including designers, developers and stakeholders.
	2. Quick Iteration: Speaking of authorization, a styleguide offers a faster way for designers and stakeholders to sign off on components while the backend or API is being developed. Free from these constraints, it is faster to iterate and easier to digest in terms of approvals, allowing the whole team to more rapidly move through the design and prototyping phase.
	3. Speed of Development: Along the same lines, styleguide-driven development - particulary one that emphasizes a component-based approach - great

	{#
	/**
	* @file
	* Default theme implementation to display a paragraph.
	*
	* Available variables:
	* - paragraph: Full paragraph entity.
	* - id: The paragraph ID.
	* - bundle: The type of the paragraph, for example, "image" or "text".
	* - authorid: The user ID of the paragraph author.