Pattern library set up

Create the first few basic files for your ecommerce pattern library and use Patternbot to generate the component website.


We’re going to start the pattern library that you’ll be working for the rest of the term in this lesson.

We’ll get the first bits set up and ready to use so you can move onto styling the typography.

  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!

Fork & clone

Start the lesson by forking and cloning the ecommerce-pattern-library repository.

Fork & clone the “ecommerce-pattern-library” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Get the Web Dev Tools CSS files

The first step is to get copies of all the Web Dev Tools.

  1. ecommerce-pattern-library This is the folder you forked
  2. common
  3. modules.css
  4. grid.css
  5. type.css
  1. Make a modules.css in a common folder—get a new version from Modulifier.
    Include only the modules you’ll need for your website. (You can always add more later.)
  2. Make a grid.css in a common folder—get a new version from Gridifier.
    Set up the columns and breakpoints you’ll need based on your wireframes.
  3. Make a type.css in a common folder—get a new version from Typografier.
    Set up the font-sizes and type scales based on your visual design choices.

Notice that the folder is called common, instead of css. This is because the CSS in this folder is common to every single pattern in the library.

  1. Naming conventions

    Don’t forget to follow the naming conventions.

2 Make the shared CSS file

Next up we’ll create a shared CSS file, named theme.css. In here we’ll be putting a bunch of CSS variables and styling the general typographic tags for your website.

  1. ecommerce-pattern-library
  2. common
  3. modules.css
  4. grid.css
  5. type.css
  6. theme.css

At the top of your theme.css file, add a few variables that match the visual design of your eCommerce website.

:root {
  --color-primary: goldenrod;
  --color-primary-light: gold;
  --color-secondary: lightcoral;
  --color-accent: greenyellow;
  --color-neutral-beige: #e2e2e2;
  --color-whatever: peachpuff;

  --font-primary: "Alegreya Sans", "Trebuchet MS", Arial, sans-serif;
  --font-secondary: "Source Code Pro", Menlo, Consolas, monospace;

html {
  font-family: var(--font-primary);

All the colours & fonts above should match your visual design—don’t just copy these values, they’re wrong.

  1. Line B

    Add a primary colour at least—Patternbot will use this in different situations.

  2. Line C

    If you have any variations of the primary colour (lighter, darker, tints, shades, etc.) name those similarly with descriptive words.

  3. Line D

    You can do the same for your secondary colour too.

  4. Lines E–G

    If you have more colours you can name them as accent or neutral colours, or just give them any ol’ name.

  5. Lines I–J

    Add in the different fonts you want to use. You’ll likely only need a primary & secondary font for your website. You can do accent font families too.

  6. Lines M–O

    Go ahead and set the body copy of your website to use your primary font.

3 Add your logo SVGs

Patternbot will detect your logo images and display them on the screen, so let’s add those into your pattern library folder.

  1. ecommerce-pattern-library
  2. common
  3. images
  4. logo-256.svg
  5. logo-64.svg
  6. logo-32.svg
  7. logo-16.svg

Put as many of the four sizes in as you can. Patternbot will figure out which are available and display those.

If you only made one logo and it works well at all four sizes just name it logo.svg

4 Put details into the README

We’ll spend more time on this file next week when we learn about Markdown. But for this week we’re going to put one line of code in it, just so our typography works properly.

First create a new file named exactly (Yes those are capital letters—gasp!)

  1. ecommerce-pattern-library
  2. common
  3. images

Now open up the README and type the following code. Be sure to substitute this Google Font URL with your own. Typekit works too.

font-url: ",400i,700|Source+Code+Pro:400,700"

Make sure the first set of triple dashes (---) touches the top of your file—it should be the very first thing.

This URL is the stuff inside the href="…" attribute of the <link> tag that Google/Typekit gives you.

  1. Line B

    Patternbot will use the font-url to make sure all the type in the builtin patterns is rendered in the correct font family. It will also use the weights and styles provided by the font service to display in the pattern library.

5 Drop it into Patternbot

We’re finally ready to run Patternbot. Drag and drop your ecommerce-pattern-library folder into Patternbot’s window.

Patternbot will generate a bunch of new things for you:

  • a new folder named patterns—with more folders inside
    Don’t touch the folders Patternbot generated inside patterns—they’ll just get replaced.

  • a new file named index.html
    This is your pattern library website!

We’ll spend more time on the patterns folder next week.

6 View the pattern library

Many of the features that Patternbot generates and uses are advanced features of browsers and require a web server to function properly.

If we pop our index.html page open in a browser we’ll see a bunch of error messages—and it won’t work quite right.

So we need to use Patternbot’s internal web server to load the website.

Press the Browse Patterns button (⌘B)—this will pop open your default browser with the URL to your pattern library running over with a web server.

The URL will most likely be: https://localhost:3000/

Next up we’ll see a security error about the connection not being private. The browser doesn’t believe the HTTPS certificate Patternbot uses is secure because it wasn’t signed by an authority.

You should never bypass this error message on websites. In this situation it’s okay because we’re loading our “localhost” testing server.

So, click “ADVANCED”.

Then click “Proceed to localhost (unsafe)”.

Now we should see our pattern library!

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.