Pattern Library README

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

1 Company name & description

We’re going to update and add some information to the README.md file within our pattern library.

We’ll start by adding the company’s name and a quick description at the top.

---
name: "Super Company"
fontUrl: "https://fonts.googleapis.com/css?family=Overpass:400,400i,700|Source+Code+Pro:400,700"
---

This is the company introduction—we’re so amazing and our brand signifies awesomeness!

If you re-generate your pattern library and give it a look you should see your information now.

If you can’t see what you wrote, drop the folder into Markbot and make sure there are no error messages.

  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!

  2. Naming conventions

    Yes, the README files completely break our naming convention. But it’s a community convention, all on its own, to name readmes with capital letters.

  3. Line B

    This is the name of the company the pattern library is for, a.k.a. your eCommerce website.

  4. Line F

    After the chunk of YAML we’ll 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.

---
name: "Super Company"
fontUrl: "https://fonts.googleapis.com/css?family=Overpass:400,400i,700|Source+Code+Pro:400,700"
fonts:
  primary: |
    The primary typeface represents a strong and bold face with lines that show stability and arrogance to fully express the power and dominance of our company.

    Use the primary typeface for body copy, captions and should really anything by default.
  secondary: |
    The secondary typeface is a compressed serif that really shows strength and dominance over our domain.

    The secondary typeface should be used for headings, buttons and to highlight important things.
---

This is the company introduction—we’re so amazing and our brand signifies awesomeness!

Be really careful with your indentation—YAML treats indentation with extreme importance.

  1. Line D

    Make a new entry named fonts, this will describe all the typography related information.

  2. Line E

    Using the 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 I

    Also describe the 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.

⋮
  secondary: |
    The secondary typeface is a compressed serif that really shows strength and dominance over our domain.

    The secondary typeface should be used for headings, buttons and to highlight important things.
colors:
  primary: |
    The primary colours are amazing and represent amazingness. Use them for headers, footers and emphasis.
  secondary: |
    The secondary colours represent things and stuff. Use them for links or when you want an extra pop.
  neutral: |
    The neutral colours are bland. Their real purpose is for body copy, captions, tables, etc.
---

This is the company introduction—we’re so amazing and our brand signifies awesomeness!

Re-generate your pattern library with Patternbot and make sure the text is all visible and looks the way you want.

  1. Line F

    Add a colors entry to start describing the colours. Patternbot is cool and will accept the correct spelling with a “u” too.

  2. Lines G–L

    The entries can be primary, secondary, neutral and accent

Drop it into Markbot

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

Be sure to keep the green check open to show the teacher!

  1. Can’t submit

    Markbot won’t let you submit this exercise because it’s getting checked by the teacher during class.