Pattrn Party

Project Introduction

As you work on more and more projects, you’ll notice that you build variations of the same page elements many times over. We build lots of nav bars, modals, tabbed information, and other common layout structures and patterns. On large projects, we may even build the same type of elements numerous times in slightly different ways. This can quickly lead to visual inconsistencies, unclear design, and hard-to-maintain code. Small inconsistencies in implementation can become a big pain, leading to wasted time and a lot of duplication. Wouldn’t it be nice if we had a base template we could refer back to so we could get these elements built more quickly and more consistently the next time we need them? Well, good news! We can do just that using a style guide.

As defined by Brad Frost’s Style Guide Best Practices: “Style guides and pattern libraries are essential tools to help Web teams maintain sanity while creating experiences for our multi-device Web.” At it’s core, a style guide is about building a cohesive and reusable system of parts rather than building complete pages of a product. It’s an exercise in breaking down your project into its smallest components, rather than tackling your project as a whole. A style guide becomes a tool that allows us to direct other developers’ approach to working within out codebase, and guides how designers should approach creating additions to an existing visual language.

By focusing on the parts that make up the whole, we are allowing ourselves to maintain consistency of elements across our site, and to build content that is modular with a cohesive design approach tying it all together.

Project Overview

Every week you will be given a specific page element to build. It must be responsive and the HTML, CSS, and (when/if needed) JS must be written in a modular way. The goal is to create a small library of page components that can be quickly and easily dropped into a project with minimal work to integrate them into a codebase.

Project Requirements

You will be building this comp

By the end of the module you will have a created a small style guide. As outlined in Brad Frost’s Style Guide overviews, you will focus on creating a pattern library and code style guide for each element. This would be a great time to dig into and work with a CSS methodology like BEM or SMACSS.

Focus on semantic HTML, well organized and clear CSS, and DRY, well factored Javascript. Your final deliverable will be a gh-pages site displaying each of your solutions and the code for each, along with a README that includes a brief description of the elements so a developer new to your project can understand the intended use without further explanation.

Your final style guide deliverable must meet the following criteria:

  • One-page site that must be live (on gh-pages, or Heroku if you want to be fancy)
  • Each weekly exercise should be a section of the one-page site (as shown in comp)
  • Site must include the completed element and the associated code (for example: links to a Codepen would be appropriate)
  • All elements must be fully responsive and match the comp

Weekly Assignments

Design, fonts, and colors are provided in the comp. The final elements must be built in a way that is straightforward to maintain, user friendly, and easy to drop right into a new codebase.

We know you’ve got a lot on your plate, so we’ve broken this out across three weeks to help with pacing:

Week One of Pattrn Party

Accordion Tabs

Week Two of Pattrn Party

Flexible Cards

Week Three of Pattrn Party

Header Bar


Here is a collection of existing style guides for reference, and readings/documentation to help you understand what a style guide is and why they’re important.

Best Practices and Definitions

Reference Style Guides and Pattern Libraries