Making a new pattern

Create the first pattern in our pattern library—the button styles for our website.

1 Set up project

We already have our pattern library set up so now we’re ready to create our first pattern.

We’ll set up our button styles then you can continue to finish them in this week’s homework assignment.

Let’s create a few new folders & code files:

  1. ecommerce-pattern-library
  2. README.md
  3. common
  4. images
  5. patterns
  6. buttons
  7. buttons.html
  8. buttons.css
  9. README.md
  1. Inside the patterns folder make a new folder named buttons
  2. Inside the buttons folder make the following empty files:
    • buttons.html
    • buttons.css
    • README.md
  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

    Don’t forget to follow the naming conventions.

2 Set up the HTML file

In our buttons.html file we’re going to put the generic HTML boilerplate and add a few buttons.

We’ll also point the buttons CSS file to all the common CSS files we have, and to whatever fonts we plan on using.

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Buttons</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="../../common/modules.css" rel="stylesheet">
  <link href="../../common/grid.css" rel="stylesheet">
  <link href="../../common/type.css" rel="stylesheet">
  <link href="../../common/theme.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Overpass:400,400i,700" rel="stylesheet">
  <link href="buttons.css" rel="stylesheet">
</head>
<body>

  <a class="btn" href="#">Standard button</a>
  <a class="btn btn-light" href="#">Light button</a>
  <a class="btn btn-ghost" href="#">Ghost button</a>

</body>
</html>

When writing the HTML for a pattern we want to be as minimal as possible. Notice there are no grids or <main> tags or <header> tags or anything like that above—just the buttons.

  1. HTML snippets

    Create the boilerplate with html5, viewport, css

  2. Lines G–J

    Here we’re hooking up all 4 common CSS files. Notice how the paths are different than normal, they include two ../ chunks in them. The ../ means go out of this folder.

    So the paths say:

    • “go out of this folder (buttons),”
    • “then go out of the next folder (patterns),”
    • “then go into the common folder,”
    • “and find theme.css
  3. Line K

    Hook up your Google Font, if you’re using one.

  4. Line L

    Finally point to the buttons CSS file. Notice how there is no css/ in this URL. That’s because the buttons.css file is in the same location as the HTML file.

  5. Lines P–R

    Add as many button styles as you need for your eCommerce website.

    If the default classes (like .btn-ghost) don’t make sense for your website make up some new ones, e.g. .btn-banner, .btn-pill, etc.

3 Start some CSS

Now, let’s write a little CSS, just style the buttons ever so slightly.

You’ll be finishing all the button stuff as your assignment this week.

.btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);

  color: #fff;
}

.btn-light {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);

  color: #fff;
}

.btn-ghost {
  background-color: transparent;
  border-color: var(--color-primary);

  color: var(--color-primary);
}

Notice how the above code extensively uses our variables that we created in the theme.css file.

  1. Don’t just copy

    Customize the CSS for your own buttons, using your own colours & fonts. Also add hover effects, transitions, etc.

    This is actually this week’s assignment.

4 Preview in the browser

We’re now ready to see what we have. Because we’re working on an individual pattern, it’s completely self-contained and we don’t need to use Patternbot yet.

Just open up the buttons.html in your browser by itself.

You should see something like this:

5 Write the README

Now we’re ready to describe the buttons and when to use them.

In the README.md file we can use plain Markdown—no YAML necessary—to describe the buttons:

The buttons use our primary colour to draw attention and stand out. Each button has a specific purpose:

- The regular buttons are for cards, forms and where the background is a light colour
- The light buttons are for dark background areas
- The ghost buttons should be used exclusively on banners where the background is an image

Feel free to mix them with the `font-size` classes to make different sizes of buttons.

Once we’re happy with the description we can build the buttons pattern into our library…

6 Generate in Patternbot

When we want to render new patterns into the library or when we want to update the content from the README.md we need Patternbot.

So drop your ecommerce-pattern-library folder into Patternbot. Then press ⌘B to view it.

If you click the “Buttons” link in the navigation you should see everything you’ve done.

When & when-not to use Patternbot

You don’t have to re-generate your whole library in Patternbot every time you make a small change—that’s too much waiting, so here are some scenarios:

  • “I changed a colour in the buttons.css file”
    Open your buttons.html file directly in the browser (like you’re used to) to see the changes.

  • “I added another button to the buttons.html
    Open your buttons.html file directly in the browser (like you’re used to) to see the changes.

  • “I fixed some grammar in the buttons README.md
    Regenerate your library with Patternbot and view with localhost (⌘B).

  • “I added a new pattern to my library”
    Regenerate your library with Patternbot and view with localhost (⌘B).

When working specifically on a single pattern open the HTML file directly in the browser. When adjusting the display of the pattern library page use Patternbot.

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.