Pattern libraries need to provide more information than just the pattern code—they need to explain why.
In order to make our pattern library effective for other people we need to describe lots of the different pieces—saying when and why to use the patterns.
The config.yml files are used specifically for describing all the settings, patterns, etc. within our pattern library.
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!
Continue on with your ecommerce-pattern-library repository.
We’re going to update and add some information to the _config.yml file within our pattern library.
We’ll start by adding the company’s name and a quick description at the top.
permalink: pretty
theme: jekyll_patternbot
patternbot:
title: "Dino Rescue"
description: |
A small local dinosaur rescue organization specializing in herbivores. Dinos are in danger and we need to save them all!
font_url: "https://fonts.googleapis.com/css?family=Overpass:400,400i,700|Source+Code+Pro:400,700"
Now go refresh your browser to see the changes.
YAML is very strict about indentation! If you mess up the indentation within this file, things won’t work.
The title key is the name of the company the pattern library is for, a.k.a. your eCommerce website.
Use the description key to write a little description of the company. This is all Markdown and will be displayed after the company in the pattern library.
One of the major goals of the pattern library is to explain why the patterns exist and when to use the patterns. That equally applies to the type choices.
So next up, we’ll describe why we chose the fonts we did and when they should be used.
Remember you’re describing your eCommerce website—don’t just copy this information below.
⋮
font_url: "https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700"
rationales:
typefaces.primary: |
Georgia was selected because it’s a classic font—for classic creatures. Georgia is to be used for all body copy and most situations.
typefaces.secondary: |
PT Sans Narrow is only to be used for highlighting text: headings, buttons, banners, etc.
Then look in your browser at your typeface descriptions.
Make a new entry named rationales, this will describe all the typography (and eventually colour) related information.
Using the typefaces.primary entry we can describe the primary typeface—especially describe why you chose it and when to use it.
Notice the vertical pipe (|) this signifies a block of text—you can use Markdown in here.
Also describe the typefaces.secondary typeface choice’s whys & whens.
Next up is the color choices; describe primary, secondary, accent, etc. colours using a format similar to the type.
⋮
typefaces.secondary: |
PT Sans Narrow is only to be used for highlighting text: headings, buttons, banners, etc.
colors.primary: |
The primary colours represent herbivores & plants & greenery. They should be used for text and in foregrounds.
colors.secondary: |
The secondary colours are more neutral, continuing with the earth tones, and should be used for backgrounds.
Have a look in your browser at your colour descriptions.
The entries can be colors.primary, colors.secondary, colors.neutral and colors.accent
Using a few more configuration options we can even customize the look of the pattern library itself. It’s often a good idea to make the pattern library more closely match the website’s brand.
There’s a colors configuration entry that has a few options:
⋮
patternbot:
title: "Dino Rescue"
description: |
A small local dinosaur rescue organization specializing in herbivores. Dinos are in danger and we need to save them all!
font_url: "https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700"
colors:
background: "--color-secondary-light"
accent: "--color-primary-dark"
patterns:
brand.logos: "--color-primary-light"
rationales:
typefaces.primary: |
Georgia was selected because it’s a classic font—for classic creatures. Georgia is to be used for all body copy and most situations.
⋮
Only include the colours you want—leave anything off that you don’t want to change.
Check it out in your browser to see the colour customizations.
Add the colors configuration option under the patternbot entry.
If you add a background key the whole page background of the pattern library will change.
You don’t have to use your variables here—you can use hex colours—but it does make the most sense.
The accent key will add foreground colours in a few places. Right now Patternbot is using your primary colour for this.
If you add a patterns entry within colors you can change the background color behind certain built-in patterns, like the brand logos section.
The key format is “pattern_group.pattern_name”.