Pattern Library customization

Pattern libraries need to provide more information than just the pattern code—they need to explain why.

Goal

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.

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

1 Company name & description

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"

Whenever you change the root, Jekyll, _config.yml file the changes won’t show up immediately. This is a limitation of Jekyll itself, the configuration is only read once: when Jekyll first starts in the Terminal.

So, we need to restart Jekyll:

  1. Go to “Terminal”
  2. Press Control-C
  3. Press Up: you should see bundle exec jekyll serve
  4. Press Return

Now go refresh your browser to see the changes.

  1. Indentation!

    YAML is very strict about indentation! If you mess up the indentation within this file, things won’t work.

  2. Line D

    The title key is the name of the company the pattern library is for, a.k.a. your eCommerce website.

  3. Line E

    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.

2 Type choice descriptions

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.

Start & top Jekyll. Then look in your browser at your typeface descriptions.

  1. Line C

    Make a new entry named rationales, this will describe all the typography (and eventually colour) related information.

  2. Line D

    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.

  3. Line F

    Also describe the typefaces.secondary typeface choice’s whys & whens.

3 Colour descriptions

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.

Start & top Jekyll—again. Then look in your browser at your colour descriptions.

  1. Lines D–G

    The entries can be colors.primary, colors.secondary, colors.neutral and colors.accent

4 Customize the pattern library

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.

  1. Line G

    Add the colors configuration option under the patternbot entry.

  2. Line H

    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.

  3. Line I

    The accent key will add foreground colours in a few places. Right now Patternbot is using your primary colour for this.

  4. Line J

    If you add a patterns entry within colors you can change the background color behind certain built-in patterns, like the brand logos section.

  5. Line K

    The key format is “pattern_group.pattern_name”.