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

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

Responsive Web Design Patterns

Chelsea M

yers

Responsive Web Design Patterns

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 fi ts 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.

Who this book is written for

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.

$ 29.99 US£ 19.99 UK

Prices do not include local sales tax or VAT where applicable

Chelsea MyersVisit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

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 benefi ts of creating a pattern library and learn how to use it effi ciently

Pay attention to detail by reviewing commonly forgotten responsive elements, such as typography

See real-world examples of these patterns being used by popular websites such as Disney, NASA, and many more

Review techniques and best practices when it comes to building responsive websites

Responsive W

eb Design Patterns

"CommunityExperienceDistilled"

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 book’s 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.

PrefaceWebsites 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 coversChapter 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 fi rst 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 website—the 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 fi nal steps to polishing up a responsive library before archiving it or handing it to the client.

[ 1 ]

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 snowfl akes.

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?

Creating a Home for Responsive Patterns

[ 2 ]

The need for responsive web designLet'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 fi gures 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 fi rst 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 siteHTML is naturally responsive, but for years web developers were taught to force sites to remain fi xed 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/).

Chapter 1

[ 3 ]

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 effi ciently. Stuff & Nonsense's design requires some more advanced techniques, but can serve as an inspiration for what RWD can do.

Creating a Home for Responsive Patterns

[ 4 ]

Media queriesMedia 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 fi rst 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/) specifi cations on media queries to see what other media types and media features there are.

To use media queries, you fi rst 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 {

Chapter 1

[ 5 ]

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 }}

Creating a Home for Responsive Patterns

[ 6 ]

Downloading the example codeYou can download the example code fi les 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 fi les 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 fi le because there are not many of them. But as a CSS fi le 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 queriesA potential solution to this problem could be on the horizon. The W3C's Media Queries Level 4 specifi cations include a concept for custom media queries (http://dev.w3.org/csswg/mediaqueries-4/#custom-mq). It will allow aliases for media queries to be declared with @custom-media and reused throughout the site.

Both of these examples are using mobile fi rst design. Here, we write the styles for the smallest screen size fi rst and work our way up. Google Product Director, Luke Wroblewski, popularized the mobile fi rst concept in his book, Mobile First (http://abookapart.com/products/mobile-first). Designing mobile fi rst 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 fi nd one style sheet is getting too big, you can use @import to break out each pattern or media query into its own fi le and import it into one main style sheet. Whatever method you choose, just make sure that you keep your code organized and well commented.

Chapter 1

[ 7 ]

Responsive meta tagIf you start adding media queries to your CSS fi le without setting the proper meta tag in your HTML fi le, you'll fi nd 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 fi t 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 fi les 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 patternsTo 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.

Creating a Home for Responsive Patterns

[ 8 ]

Learning how to spot patternsAs 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:

Chapter 1

[ 9 ]

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 fi nd modules being repeated on different pages. Look at http://video.disney.com/movies or see the following image:

Creating a Home for Responsive Patterns

[ 10 ]

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 fi nd 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.

Chapter 1

[ 11 ]

Looking at the video thumbnail, the captions, the video gallery, and the overall page, we can fi gure out what elements are atoms, molecules, and organisms.

Atomic design Disney.comPage http://disney.com/

Template Media pageOrganism Video galleryMolecule Video thumbnail + captionAtom Video thumbnail

Building a home for your patternsSimply 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 fi rst 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.

Creating a Home for Responsive Patterns

[ 12 ]

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 libraryResponsive 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 fi nd 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 benefi t 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.

Chapter 1

[ 13 ]

Style guide versus pattern libraryAlthough 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 examplesPattern 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 fi t the job.

The Pattern LabThe 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

Creating a Home for Responsive Patterns

[ 14 ]

The Pattern Lab may not be the right fi t 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.

MailChimpMailChimp'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)

Chapter 1

[ 15 ]

Responsive PatternsResponsive 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 examplesWant 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 libraryDeveloping your own responsive library forces you to become a more organized developer. Creating a pattern library from scratch for the fi rst time or trying to scale down a larger pattern library may not be the best fi rst step. Provided with this book is a responsive pattern library template ready for you to use. Its name is simple—the responsive pattern library (RPL).

You can download the starter template at https://github.com/chelmyers/RPL or view the fi nished library at http://chelmyers.github.io/RPL/.

Creating a Home for Responsive Patterns

[ 16 ]

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 fi t them into your current workfl ow. I personally use Sass and create a .scss fi le 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.

Chapter 1

[ 17 ]

If you look at the fi nished 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 fi le, 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 fi le 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 libraryTo 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 fi nd 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 fi les. The following walkthrough will be using the fi lled 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.

Creating a Home for Responsive Patterns

[ 18 ]

Inside the RPL folder is the index.html fi le, 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 fi le, 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 fi le for the navigation section's landing page. You will also see HTML fi les named pat-01-simplyStacked.html. These HTML fi les are the individual patterns. The naming convention for the pattern fi les is pat-##-description.html. The pat lets me know that this is a pattern fi le. 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 fi le (pat-00-template.html) from the assets folder and rename it. Put the new pattern fi le into an already existing or new landing page folder. Next, open up the fi le 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>

Chapter 1

[ 19 ]

<meta name="viewport" content="width=device-width, initial- scale=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 fi ll 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>.

Creating a Home for Responsive Patterns

[ 20 ]

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-->

Chapter 1

[ 21 ]

The highlighted code is the information we will be changing. Follow these steps to do this correctly:

1. Add in a pattern title, pattern diffi culty level, pattern description, andthe pattern's pros and cons. If you are using this library for a personalproject or a client project, insert the pattern's usage guidelines here.

2. Replace all instances of pat-00-template.html with the name of thepattern fi le. The actual pattern fi le should be in the same folder as thesection landing fi le you are working on.

3. Set the height of the iframe (for example, height="100") to fi t the pattern. Itis set to 100px by default.

4. Replace &lt;!-- Markup goes here. --> with the markup (HTML) ofthe pattern. Replace all less-than characters, <, with its HTML entity, &lt;,to stop the tags from rendering in the browser.

5. And fi nally, 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 fi lled-out version on the pattern library, the patterns have some global styles. These styles can be found in assets/css/pattern-style.css. This fi le is empty in the starter version. After you have your RPL setup, feel free to jump right in and start poking around. The fi lled-out version has all the patterns we will be reviewing in this book. You can always download the starter fi les and make each pattern from scratch as we go along.

SummarySince 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 librar y to hold them all.

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:

Get more information Responsive Web Design Patterns