Keep track of responsive web design (RWD) patterns by

building your own pattern library and creating some of

RWD's most popular patterns. For beginners and pros,
this book provides a toolset to help plan the design and
functionality of a responsive website.
The book begins with creating a home for all your
patterns by setting up your own pattern library. Each
chapter is broken down into the different sections of
a website, presenting patterns for each section. You
will then move on to build responsive layouts of varying
degrees of complexity to house the type of content you
need. Develop menu systems and see which type of
responsive navigation fits the size of your website. Next,
you'll learn tactics to present media and data elegantly on
different screen sizes. Finally, you'll tie up all those loose
ends in your responsive website and pattern library to get
it ready for launch.

What you will learn from this book

Gain knowledge of the pros and cons of
popular responsive patterns
Build each pattern on your own using
HTML, CSS, and JavaScript by following
the examples and guidelines provided in
each chapter
Know how to combine patterns to create
unique solutions for your own projects
Understand the benefits of creating a pattern
library and learn how to use it efficiently

C o m m u n i t y

E x p e r i e n c e

D i s t i l l e d

Pay attention to detail by reviewing

commonly forgotten responsive elements,
such as typography

Who this book is written for

See real-world examples of these patterns

being used by popular websites such as
Disney, NASA, and many more

This book is intended for HTML and CSS beginners who

want to know where to start when creating a responsive
website. It is also for more experienced developers who
perhaps need a little inspiration for their next project.

Review techniques and best practices when

it comes to building responsive websites

Responsive Web Design

Patterns
Chelsea Myers

$ 29.99 US
19.99 UK
"Community
Experience
Distilled"

Responsive Web Design Patterns

Responsive Web Design

Patterns

Learn how to build your own pattern library and fill it with the
most popular responsive web design patterns

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

Chelsea Myers

In this package, you will find:

The author biography

A preview chapter from the book, Chapter 1 'Creating a Home for
Responsive Patterns'
A synopsis of the books content
More information on Responsive Web Design Patterns

About the Author

Chelsea Myers, throughout her career so far, has been a student, freelancer,

full-time employee, teacher, assistant, researcher, and business owner in the web
development industry. She is passionate about responsive frontend development
and building out user-focused designs. Every new project allows her to learn and
try something new. And to her, that's the best part of the job.
She graduated from Drexel University with a degree in digital media. Currently,
she works for an award-winning digital studio, Happy Cog, and teaches web
development and user experience at Drexel. When she is not doing all this,
or freelancing herself, she also manages her cofounded animation studio,
Coffeebot Studios.

Preface
Websites come in varying shapes and sizes. In our lifetime, we may work on sites
that have four or 400 different pages. And the devices these websites are viewed
on are just as different. Creating websites for all these variables is a daunting
task. Breaking sites down to bite-sized pieces, or patterns, can make this task
more manageable.
Web design and development is a great industry to be a part of because the people in
it love to share. When developing a responsive website, it can be a challenge to come
up with solutions for scaling content from small to large screens. Luckily, we can
look to responsive patterns and responsive pattern libraries shared by the companies
and individuals that make up this industry.
Together, let's look at the most popular responsive web design patterns and how
they are built. Responsive patterns, just like patterns in the analog world, can be
used as a guide, a foundation, or solely inspiration for your own work.

What this book covers

Chapter 1, Creating a Home for Responsive Patterns, builds a home for all the patterns
reviewed in this book and looks into why pattern libraries should be used in the
first place.
Chapter 2, The Main Stage Building Responsive Layouts, reviews the top most
common responsive layouts and what type of content is suited for each.
Chapter 3, Make Way for Responsive Navigations, explores patterns for one of the
most tricky aspects of a responsive websitethe menu system. It looks at popular
navigational patterns used in modern websites and the pros and cons of each.

Preface

Chapter 4, From Static to Dynamic Embedding Media, shows how to deliver catered
images for different quality displays and how to make media such as images and
video scale with a responsive website.
Chapter 5, Gathering and Displaying Information, covers patterns and guidelines for
developing the more analytical elements of a website such as forms and tables.
Chapter 6, Combining Responsive Patterns, teaches how to decide whether a responsive
pattern is the right one to use and how to combine patterns to create a more
custom solution.
Chapter 7, Ship It Finalizing Your Pattern Library, lays out the final steps to polishing
up a responsive library before archiving it or handing it to the client.

Creating a Home for

Responsive Patterns
In 2010, Ethan Marcotte coined the term "responsive design." Since then web design
has only been improving. The web community came together and stood behind this
new concept. Beautifully responsive websites can now be seen all over the Internet.
As a web developer, when I stumble upon a new responsive site, I love to evaluate
the patterns that make up its system. It's like looking at the individual brush strokes
that make up a painting.
Pattern libraries house the elements that make up a design system. A responsive
pattern library houses elements for a responsive system. When we create these
libraries ourselves, they act like a tool for archiving designs, modules, and templates
for future reference. Developers can also use existing frameworks with responsive
patterns premade, such as Bootstrap and Foundation. Unfortunately, using these
patterns with few to no alterations has produced a lot of websites that look the
same. But when we use these responsive patterns as a base, and not the solution,
responsive websites can be as unique as snowflakes.
Because of its mass support, best practices have formed around responsive web
design (RWD). There are popular patterns that developers and designers agree
upon to be good solutions for websites catering to multiple devices. This book's goal
is to familiarize you with these patterns and show you how to use them. The next
step is to use these patterns as a stepping-stone to creating your own responsive
designs. In this chapter, we will have a look at the following topics:

What is RWD?

What makes up a responsive website?

What is a pattern library?

How do I create my own pattern library?

[1]

Creating a Home for Responsive Patterns

The need for responsive web design

Let's say it is 2007, and I am waiting for a bus and browsing the Internet on my
shiny new iPhone. If I wanted to see the latest from my favorite web comics, Hark! A
Vagrant (http://www.harkavagrant.com/), the page would take around 50 seconds
to download. 50 seconds! If I did this today on my iPhone 6, the same page would
take 6 seconds to download. Both of these figures are relying on the fact that I have
a decent signal as well. And since I live in a city, I probably wouldn't even be using
my data plan. With hotspots popping up all over the world, I would most likely
be connected to one of those. Meaning that even the largest comics from Hark! A
Vagrant wouldn't even take a full second to load.
When the iPhone first appeared on the EDGE network, accessing the Internet was
a hassle and took patience for each page to load. I remember using the browser on
my Blackberry Bold and hating the experience. Flash-forward to today, and I do
everything on my smartphone. According to Pew Research Center (http://www.
pewinternet.org/), in 2015, 64% of American adults own a smartphone and 89%
of them use it to access the Internet. And the most common time to do this? When
they are at home or traveling. No longer can we as designers and developers ignore
that fact that any site we create will be accessed through a mobile device. It is our
job to make that experience as easy as possible.

Why and how to create a responsive site

HTML is naturally responsive, but for years web developers were taught to force
sites to remain fixed at one size. In 2010, Ethan Marcotte brought to our attention
the fact that people are no longer accessing the Internet through only desktops and
laptops. With the launch of the iPhone came hundreds of other devices that put
the Internet on small screens and in our pockets. But the Web wasn't ready to be
viewed on such small devices. Marcotte's article, Responsive Web Design (http://
alistapart.com/article/responsive-web-design) acted like a wake up call
ushering us into a new realm of web design.
If web design is new to you, you may not be familiar with what RWD is. RWD is
creating one website that responds to the size of the viewport. The same website
renders on both smartphone and desktop devices. It is the same markup, but with
CSS media queries changing styles depending on the browser's resolution. A
delightful example is UK web design agency, Stuff & Nonsense's website
(http://www.stuffandnonsense.co.uk/).

[2]

Chapter 1

The preceding images are of Stuff & Nonsense's website at 400px, 800px, 1100px,
and 1400px wide, respectively. The same site is served on both my smartphone and
my laptop. The biggest difference between each screen size is the imagery in the
header. Yes, the navigation, font sizes, and layout of the page are changing between
each size as well. But the best part of this site is the advancing monkey army in the
background as your browser size changes.
This is what RWD is doing technically. As developers, we are changing how the site
appears depending on the viewport. As designers, we are rethinking the content
that appears on smaller screens to make sure our users are receiving the information
they need quickly and efficiently. Stuff & Nonsense's design requires some more
advanced techniques, but can serve as an inspiration for what RWD can do.

[3]

Creating a Home for Responsive Patterns

Media queries
Media queries were introduced with the debut of CSS3. They allow web developers
to control what CSS styles are applied depending on variables such as the device
width, height, aspect ratio, resolution, and orientation. The following is an example
of a standard media query:
@media screen and (max-width: 500px) {
body {
color: red;
}
}

The first part, screen, indicates what media type the media query applies to. In this
case, screen refers to computer, mobile, and tablet screens. Another commonly used
media type is print. The @media print annotation will apply only when the page is
being printed.
Next and (max-width: 500px) is setting the media feature. Instead of max-width,
we can also use features such as min-width, orientation, and resolution. Right
now, this media query will only apply the CSS style, body{color: red;}, when the
site is being viewed on a screen when the viewport is less than 500px wide. When
both of these requirements are met, the site's font color will be red.
Check out the W3C's (http://dev.w3.org/csswg/
mediaqueries-4/) specifications on media queries to see
what other media types and media features there are.

To use media queries, you first must place them in your style sheet. Throughout my
time working on responsive websites, I have found two methods commonly used
for organizing media queries. I have listed the methods in the following steps and
shown a version of each with the media queries highlighted:
1. Grouping styles by pattern (header, navigation, footer, and so on) and
writing a new media query for each:
/*HEADER*/
header {
background-color: blue;
}
@media screen and (min-width: 800px) {
header {

[4]

Chapter 1
background-color: red;
}
}
/*NAVIGATION*/
nav li {
display: block;
}
@media screen and (min-width: 800px) {
nav li {
display: inline-block
}
}

This method works better if you are working on a larger website and using
a CSS precompile such as Sass. Sass allows you to nest your CSS, meaning
you can nest media queries within a rule. I personally use this method on my
projects. It works best when you break up your CSS into separate files and
keep your CSS modular.
2. Grouping styles by media query and writing pattern styles under each:
/*Base Styles*/
header {
background-color: blue;
}
nav li {
display: block;
}
/* Width 800px and up */
@media screen and (min-width: 800px) {
header {
background-color: red;
}
nav li {
display: inline-block
}
}

[5]

Creating a Home for Responsive Patterns

Downloading the example code

You can download the example code files from your account at
http://www.packtpub.com for all the Packt Publishing books you
have purchased. If you purchased this book elsewhere, you can visit
http://www.packtpub.com/support and register to have the
files e-mailed directly to you.

Grouping the CSS rules together under one media query works better on smaller
websites where the CSS is not as extensive. We will be using this method for our
pattern library because the design system is very simplistic. If the CSS gets larger,
this method can become cumbersome. Right now, the rules are close together in their
file because there are not many of them. But as a CSS file grows, there can be a lot
of distance between a rule that dictates styles on mobile and the media query that
changes it on a larger viewport. This means there is a lot of scrolling back and forth
to make tweaks.
Custom media queries
A potential solution to this problem could be on the horizon. The W3C's
Media Queries Level 4 specifications include a concept for custom media
queries (http://dev.w3.org/csswg/mediaqueries-4/#custommq). It will allow aliases for media queries to be declared with @custommedia and reused throughout the site.

Both of these examples are using mobile first design. Here, we write the styles for
the smallest screen size first and work our way up. Google Product Director, Luke
Wroblewski, popularized the mobile first concept in his book, Mobile First (http://
abookapart.com/products/mobile-first). Designing mobile first means designing
the mobile experience before the rest of the site. Working within mobile constraints
from the beginning forces designers and clients to prioritize and focus their content.
It is easier to work your way up to a complex desktop website than squish a desktop
site onto a small screen. If you start adding media queries and find one style sheet is
getting too big, you can use @import to break out each pattern or media query into its
own file and import it into one main style sheet. Whatever method you choose, just
make sure that you keep your code organized and well commented.

[6]

Chapter 1

Responsive meta tag

If you start adding media queries to your CSS file without setting the proper meta
tag in your HTML file, you'll find your website looking no different when it loads
on a mobile device. Most mobile devices automatically zoom out and increase the
browser's size to fit the website. Setting a responsive meta tags forces the device's
browser to be the same width as the device's screen:
<meta name="viewport" content="width=device-width,
initial-scale=1">

Put this meta tag in the <head> of your HTML files to overcome the device's
zooming. This meta tag sets the browser width to the width of the device
(width=device-width). The second part, initial-scale=1, makes sure
that no automatic zooming occurs by setting the browser's scale to 1.

Breaking websites down to their patterns

To begin spotting responsive patterns, you have to look at websites modularly. Pick
a website and start breaking down the design into its components. These repeated
components are the patterns that make up the design system. Designing and
developing modularly allows the site to be easily scaled up in the future. Creating
templates and pages alone only accounts for the content on the website at the time
of its development. They do not account for what's to come. A pattern library can be
used to house all of a website's patterns.
Pattern libraries can be used in a team setting to simplify collaboration. If a project
uses a pattern library containing the entire site's existing patterns, developers can
see what work has already been done and what still needs to be completed. If a
developer is putting together a contact page and needs a form, he or she can look
through the pattern library and see whether a form pattern already exists. If it does
exist, the developer has now avoided creating a pattern that was previously created.

[7]

Creating a Home for Responsive Patterns

Learning how to spot patterns

As mentioned, a great way to learn how to spot patterns is to break down existing
sites. Let's look at Disney's website (http://disney.com/) together and see what
patterns make up the site:

[8]

Chapter 1

First, let's look for elements that are repeated and used throughout the website. An
easily spotted repeating pattern on most websites is the navigation. The preceding
images show Disney.com's navigation closed in the top row and open in the bottom.
By looking at the home page like this, we can observe the global pattern for the
navigation. Here, we can see that on larger screens, the main navigation (Games,
Video, Blogs, and so on) is on the page while the rest is hidden in a drop-down menu.
On smaller screens all the navigation links are put in an off canvas menu that slides in
and out with clicking on the
icon (known as the "hamburger" icon). This responsive
pattern is referred to as an off canvas navigation. Navigation patterns such as this will
be covered in greater depth in Chapter 2, The Main Stage Building Responsive Layouts.
Digging through Disney's site, we can find modules being repeated on different
pages. Look at http://video.disney.com/movies or see the following image:

[9]

Creating a Home for Responsive Patterns

This page repeats modules used on the home page. The video gallery modules,
as seen under See Tomorrow Today on the video page, are repeated again and
again throughout the site. This module can be considered a video gallery pattern.
And since this pattern's style changes depending on the browser's width, it is a
responsive pattern.
If you want to break down this pattern even more, we can see that the video galleries
are comprised of thumbnail images. These thumbnails can be considered their own
pattern. They always have a 16:9 aspect ratio, with the video duration
in the bottom right corner.
Now we are getting pretty detailed. Depending on the project or client, this level
of detail may be required when creating patterns. If you find this happening, you
might be interested in atomic design. Atomic design is a concept popularized by
web developer Brad Frost and implemented in a project called Pattern Lab. It is a
great example of how far you can break down a website. On his website, http://
patternlab.io/, Frost breaks down patterns into the following categories:

Atoms: The design elements that cannot be broken down any further and
make up the building blocks of the design system

Molecules: Atoms combined "that function together as a unit"

Organisms: Combination of molecules and/or atoms that create sections

of an interface

Templates: Structured guidelines for combining organisms

Pages: A "single instance" of a template with real content

If we apply this concept here, the home page will be a "page" and its structure
will be a "template". To break this down further, let's look at a section, like the
video gallery, on the page.

[ 10 ]

Chapter 1

Looking at the video thumbnail, the captions, the video gallery, and the overall page,
we can figure out what elements are atoms, molecules, and organisms.
Atomic design
Page

Disney.com
http://disney.com/

Template

Media page

Organism

Video gallery

Molecule

Video thumbnail + caption

Atom

Video thumbnail

Building a home for your patterns

Simply put, a pattern library is a home for your patterns. It acts as a point of reference
for designers and developers to view the pieces that make up a design system. A good
pattern library illustrates how to implement the patterns making up a website. In a
responsive pattern library, every pattern should be accompanied with:

An example: The actual pattern embedded, showing off its design and
functionality on small to large screens

The code: How the patterns can be implemented (that is, what is the HTML
and CSS? Is JavaScript needed?)

The usage: When and where should the pattern be used (that is, what
templates can it appear on? Where can it not appear?)

For example, if I were adding Disney's video gallery module to a pattern library, I
would first embed the pattern on a page. I would then display the code necessary to
build that pattern. Lastly, I would list usage guidelines explaining how and when to
use it. Some example usage guidelines may be:

Use no less than four (4) video thumbnails in each video gallery

Video galleries must span 100% of the page

The thumbnail image must have an aspect ratio of 16:9 with descriptions
under each thumbnail if needed

These are not Disney's real rules. I just made them up as an example. But
documenting patterns like this means that if I ever needed to add the video gallery
pattern to another page, I would have a clear set of rules on how to do it.

[ 11 ]

Creating a Home for Responsive Patterns

A responsive pattern library focuses on how patterns change across screen sizes.
For small screens, we can see that the video gallery loses the right arrow and
allows thumbnails to be cropped-off screen.

Documenting these style changes is what differentiates a basic pattern library

from a responsive pattern library.

Use of a pattern library

Responsive pattern libraries are not just for big team projects. Let's be honest, how
good is your memory? Can you remember how much padding buttons get, months
after you already developed them? And if the padding decreases on smaller screens,
you are doubling the amount of information you need to remember with just one
design element. Personally, I have a tracking tag on my own keys. So, if I can't
remember where I left my keys this frequently, I doubt I will remember
month-old code.
Without a pattern library, you need to comb through pages to find where a pattern
may live. Only after this hunt can you test it or use it as a reference. A pattern library
lets you quickly test all patterns on different browsers and devices. There is a benefit
to having all your patterns in one place instead of hiding them away in distant
corners of a website. Also, whenever you add more patterns to a system, you can see
if the new styles affect older patterns. In short, instead of trying to remember every
element you develop, use this book to create a responsive pattern library
and begin cataloging your patterns.

[ 12 ]

Chapter 1

Style guide versus pattern library

Although these terms are often used interchangeably, there is a slight
difference. A style guide is a document that contains rules for how
everything should look. This can be a PDF or an interactive guide online.
A pattern library contains rules for how everything should work. A
pattern library will be able to show the functionality of each pattern.

Pattern library examples

Pattern libraries are becoming a common tool in the web industry. Developers are
releasing premade templates to help others build their own. Large companies such
as Google and MailChimp have released their internal libraries, which serve as
wonderful examples for the rest of us. I highly recommend viewing these templates
and examples before you start your own. Even though pattern libraries may seem
similar, they should always be tailored in some way. The tool has to fit the job.

The Pattern Lab

The Pattern Lab is Frost and Dave Olsen's example of a pattern library broken
down using atomic design. This is not a company's pattern library, but a template
for developers.
You can view a demo of the library at http://demo.patternlab.
io/ or download it yourself from Frost's GitHub repository at
https://github.com/pattern-lab/patternlab-php.

The Pattern Lab organizes patterns by atoms, molecules, organisms, templates,

and pages. The Pattern Lab also has awesome features such as the following:

Resize each pattern without resizing the browser

The browser width and height are always displayed on the top bar

Use quick-select options to view the patterns at small (S), medium (M),
and large (L) screen sizes

[ 13 ]

Creating a Home for Responsive Patterns

The Pattern Lab may not be the right fit for all projects and teams. The concept of
atomic design can be confusing to other team members and clients. They might not
understand what an "atom" means and how it should be used. If you are a more
experienced web developer, you can always download the Pattern Lab repository
from GitHub and make changes. You can change the language to something more
approachable (that is, "Basic Elements" instead of "Atom") and scale down the
library. If you don't think you have the skills to do this, don't worry; this is not
your only option.

MailChimp
MailChimp's responsive pattern library is my favorite example.
You can view this example at http://ux.mailchimp.com/patterns/.

MailChimp breaks down each pattern by showing an example, providing the

code to create it, and including notes about how to use the pattern. As seen in
the following screenshot, you can also decrease and increase the width of the
browser and see how each pattern reacts since all patterns are functional:

The MailChimp Pattern Library (http://ux.mailchimp.com/patterns)

[ 14 ]

Chapter 1

Responsive Patterns
Responsive Patterns is another pattern library developed by Brad Frost. That guy
must love pattern libraries, am I right? Responsive Patterns (https://bradfrost.
github.io/this-is-responsive/patterns.html) is a catalog of popular patterns
being used across the Web. Along with showing examples of these patterns, Frost
includes a CodePen (http://codepen.io/) to show the code behind each pattern.
And since Frost accepts submissions, this site is always growing.

Other examples
Want to look at more responsive pattern libraries? Check out the following list for
some great examples:

Starbucks (http://www.starbucks.com/static/reference/styleguide/)

Google (https://developers.google.com/web/fundamentals/
resources/styleguide/)

A List Apart (http://patterns.alistapart.com/)

Code for America (http://style.codeforamerica.org/)

Your very own pattern library

Developing your own responsive library forces you to become a more organized
developer. Creating a pattern library from scratch for the first time or trying to scale
down a larger pattern library may not be the best first step. Provided with this book
is a responsive pattern library template ready for you to use. Its name is simplethe
responsive pattern library (RPL).
You can download the starter template at https://github.
com/chelmyers/RPL or view the finished library at http://
chelmyers.github.io/RPL/.

[ 15 ]

Creating a Home for Responsive Patterns

Like Frost's Responsive Patterns, this library is a catalog of popular responsive

patterns found all over the Web. By changing the title and content though, it
can easily be used (and is meant to be) for clients or personal projects.

The Responsive Pattern Library (http://chelmyers.github.io/RPL/)

I developed this template with both beginners and more experienced developers in
mind. These pages are static and created with HTML, CSS, and Prism.js (http://
prismjs.com/). If you are a more advanced web developer, feel free to modify these
templates and fit them into your current workflow. I personally use Sass and create a
.scss file for each pattern. I then pull them all into one style sheet. I also use PHP to
organize my markup.. The Pattern Lab uses Mustache to do this. If you don't know
how to do any of this, do not worry; you don't need to. The library is good-to-go
as is.

[ 16 ]

Chapter 1

If you look at the finished site and click on the Navigation link on the side menu, you
will be brought to a section's landing page. Here, you can see popular responsive
solutions for navigations. At the top of the page is the section's title and a brief
description about its content. Each pattern following has a working example, the
code to implement the pattern, and the guidelines for the pattern's usage.
The pattern example is being displayed using the <iframe> tag. Each pattern has
its own HTML file, with styles in the <head> tag, being embedded into the section's
landing page.
The code is being highlighted using Lea Verou's (http://lea.verou.me/) Prism.js,
a syntax highlighter.

Each pattern has a View Pattern button next to its title. The View Pattern button
takes you to the pattern's HTML file where you can view it alone outside the landing
page. Since the point of this book it to teach you how to use these patterns and why,
each pattern has:

A level of difficulty to implement (easy, medium, or hard)

A description of the pattern
The pros and cons of using this pattern

These are the pattern's usage guidelines. The guidelines in the actual library are
brief. Look for more information about each pattern in later chapters.

Setting up your responsive pattern library

To download the pattern library, visit https://github.com/chelmyers/RPL and
click the Download Zip button at the bottom of the right column. You can find an
empty starter version at https://github.com/chelmyers/RPL-starter. After you
have downloaded the library, unzip it. You will see a folder called RPL-master or
RPL-starter-master if you are using the starter files. The following walkthrough
will be using the filled library. Put this folder in a safe directory on your computer.
By safe, I mean someplace you won't lose or delete it. I keep all my pattern libraries
and style guides under a folder called Sites on the same level as Documents.
[ 17 ]

Creating a Home for Responsive Patterns

Inside the RPL folder is the index.html file, the assets folder, and a folder for every
landing page and patterns on that page. The assets folder contains the CSS for the
library, images used, a template for a pattern file, a template for a section's index
page, and the Prism.js plugin.

Now, let's explore how the sections are set up. Open up the navigation folder.
Here you will see another index.html. This is the HTML file for the navigation
section's landing page. You will also see HTML files named pat-01-simplyStacked.
html. These HTML files are the individual patterns. The naming convention for the
pattern files is pat-##-description.html. The pat lets me know that this is a pattern
file. The number tells me what order on the page it appears. The description gives me
information on what the pattern actually is in one or two words.
To add a pattern to a section, copy the pattern template file (pat-00-template.html)
from the assets folder and rename it. Put the new pattern file into an already existing
or new landing page folder. Next, open up the file in your text editor of choice. I
recommend Sublime Text (http://www.sublimetext.com/) or Atom (https://atom.
io/). Or you can copy the pattern template code from the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Pattern Library</title>

[ 18 ]

Chapter 1
<meta name="viewport" content="width=device-width, initialscale=1">
<!-- Load in template styles -->
<link rel="stylesheet" href="../assets/css/pattern-style.css">
<!-- Load in Google Font: Lato -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,700'
rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-->
<style>
/*Pattern ## - Description*/
/*Insert CSS here*/
</style>
</head>
<body>
<!-- Insert pattern markup here -->
</body>
</html>

The preceding highlighted code is where we will be adding the styles and markup
for each pattern. Nothing will show up just yet though. Let's go over how to set up
a section's index page and add a pattern to it.
To create a section, make a new folder in the main folder (RPL-master or whatever
you renamed it to) and give it a descriptive name. Duplicate index-template.html
from the assets folder, place it in the new section folder, and rename it index.html.
To fill out the section page, complete the following:
1. Add a new list item to the navigation under <ul class="menu"> so that
your new section is included. Unfortunately, you will have to update the
other pages as well since these templates are only HTML and CSS. Look for
the comment <!-- Include new section page --> to see where to add
the new list item.
2. Add in the section's title in <h2 class="page-title">Section
Title</h2>.
3. Add a section description at <p>Section description.</p>.

[ 19 ]

Creating a Home for Responsive Patterns

Now, we can start adding patterns to the page. Use the following code for each
pattern you want to add. This can be seen in index-template.html as well:
<div class="pattern">
<h3>Pattern Title<span class="btn">
<a href="pat-00-template.html">View Pattern</a></span></h3>
<p><span class="difficulty">Level</span> Pattern
description.</p>
<ul class="list-compare">
<li><h4>Pros:</h4></li>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul class="list-compare">
<li><h4>Cons:</h4></li>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h4>Example</h4>
<iframe src="pat-00-template.html" frameborder="0"
height="100"></iframe>
<h4>HTML</h4>
<pre>
<code class="language-markup">
&lt;!-- Markup goes here. -->
</code>
</pre>
<h4>CSS</h4>
<pre>
<code class="language-css">
/*Styles go here*/
</code>
</pre>
</div><!--end pattern-->

[ 20 ]

Chapter 1

The highlighted code is the information we will be changing. Follow these steps
to do this correctly:
1. Add in a pattern title, pattern difficulty level, pattern description, and
the pattern's pros and cons. If you are using this library for a personal
project or a client project, insert the pattern's usage guidelines here.
2. Replace all instances of pat-00-template.html with the name of the
pattern file. The actual pattern file should be in the same folder as the
section landing file you are working on.
3. Set the height of the iframe (for example, height="100") to fit the pattern. It
is set to 100px by default.
4. Replace &lt;!-- Markup goes here. --> with the markup (HTML) of
the pattern. Replace all less-than characters, <, with its HTML entity, &lt;,
to stop the tags from rendering in the browser.
5. And finally, replace /*Styles go here*/ with the CSS styles for the pattern.
The library itself is already responsive and has some basic styles applied. The library's
styles can be found in assets/css/lib-style.css. In the filled-out version on the
pattern library, the patterns have some global styles. These styles can be found in
assets/css/pattern-style.css. This file is empty in the starter version. After you
have your RPL setup, feel free to jump right in and start poking around. The filledout version has all the patterns we will be reviewing in this book. You can always
download the starter files and make each pattern from scratch as we go along.

Summary
Since its introduction, web designers and developers all over the world have rapidly
adopted RWD. For us, RWD means designing an experience that holds up across
multiple screen sizes. Responsive pattern libraries aid us in organizing large design
systems that accommodate the smallest smartphone to the largest desktop monitor.
As you can see, the library already has four sections: layouts, navigation, media,
and forms and data.. All of these topics and their patterns will be covered in the
following chapters. We will also be reviewing RWD best practices along the way.
Hopefully, by the end of this book, you will feel inspired to start designing and
developing your own patterns, while using a pattern library to hold them all.

[ 21 ]

Get more information Responsive Web Design Patterns

Where to buy this book

You can buy Responsive Web Design Patterns from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: