Lara Schenck

One-off Patterns

One-offs patterns are module patterns that are not parsed into directly into PHP. Their implementation in the pattern library and the production theme are separate. The one-offs in the pattern library are artifacts of the development process, and are not necessarily up to date with the production version. Their markup files should have a .html extension so that they are not parsed into PHP.

Writing One-off SCSS

When writing styles for a one-off, get as far as you can with utility and algorithm classes, then add additional styles that do not fit into utilities/algorithms in the One-off pattern’s SCSS file.

Class names for One-off patterns should have no namespace to indicate they are outside of the design system. For example, a one-off pattern for an author, might have the following styles in 09-one-offs/author/author.scss:

// Set up for the hover functionality
.author {
	opacity: 0;
	transition: opacity $transition-duration-300 ease-in;
	position: absolute;
}

.author__story-list li {
	list-style-type: square;
	color: map-get( $semantic-color-list, brand-red );
}

When adding these selectors to the markup, separate the one-off selector from system classes with a // for improved readability. For example:

<section class="author // pmc-u-padding-a-1 pmc-u-background-white u-hidden@desktop-max u-box-shadow-light u-max-width-300">

Using the Twig Parser for Prototyping

While the markup for One-offs should ulitimately have a .html extension, it might be useful to output the markup to PHP during development. This can be done with the following steps:

1. Scaffold the one-off pattern: npm run scaffold -- author
2. Write the markup, add utility classes, and build out the pattern in the pattern library.
3. Once it is in a good place and you are ready to work in PHP, run the parser: npm run parser. This will generate a PHP file in template-parts/patterns/oneoffs.
4. Move the file to template-parts/patterns/one-offs and delete the oneoffs directory. The parser should not add files to the appropriately named one-offs directory; those should be hand-written PHP.
5. Work on the PHP template in template-parts/patterns/one-offs.
6. Change the pattern markup file extension to .html to ensure it is no longer parsed into a PHP template.

It is important that the Twig parser does not directly output a one-off pattern to template-parts/patterns/one-offs so that it is clearly indicated that this markup is not linked to the pattern library. Be sure to delete the comment about "a generated file" from the initial PHP template.