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.
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.
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.
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
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 & Flexible Cards
Week Two of Pattrn Party
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
- Brad Frost’s post on Style Guides
- Anatomy of a Pattern in a Pattern Library
- For examples of how you might structure your CSS, take a look at SMACSS, particularly the chapters on Layout Rules and Module Rules
- BEM vs SMACSS explanations, pros and cons