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.

Here is the link to the code on GitHub: https://github.com/chelmyers/RPL

Here is the live version of our website: http://chelmyers.github.io/RPL/

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <copyright@packtpub.com> with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

If you have a problem with any aspect of this book, you can contact us at <questions@packtpub.com>, and we will do our best to address the problem.

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.

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:

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.

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.

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.

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:

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:

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:

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.

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.

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.

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.

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)

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 simple—the responsive pattern library (RPL).

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.

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:

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.

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

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

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 <!-- Markup goes here. --> with the markup (HTML) of the pattern. Replace all less-than characters, <, with its HTML entity, <, 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 filled-out 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.

Let's start by looking at the easiest layout pattern. This pattern doesn't require much effort. The layout is similar to the example reviewed under a past section, The Web is naturally responsive. It is typically a single-column web page.

Our layout has a header and a section containing the site's content. Since these elements automatically stretch and scale to the browser's width, only some minor changes are needed to make it more mobile-friendly.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<section>
  <p>Paragraph (p) - Collaboratively administrate empowered...<p>

  <h2>Heading 2 (h2)</h2>

  <p>Paragraph (p) - Efficiently unleash cross-media...</p>

  <ul>
    <li>List Item 1. Objectively innovate empowered...</li>
    <li>List Item 2. Proactively envisioned multimedia..</li>
    <li>List Item 3. Completely pursue scalable customer...</li>
  </ul>
</section>

The header section contains an h1 tag while a section tag contains the rest of the page's content. Inside the section tag, we have a second heading, paragraphs, and an unordered list.

CSS

body {
  font-size: 1em;
}

header, section {
  padding:0.75em;
}

@media screen and (min-width: 600px) {
  body {
    font-size: 0.875em;
  }

  header, section {
    padding:1em;
    margin-bottom:1em;
  }
}

Here, we have the styles for this layout with the media query highlighted. Now, remember we are styling these patterns mobile first; meaning the smallest screen-size styles are applied first and built on top of. This layout already scales width-wise the way we want it to, so we don't have to do much. All we are doing with CSS here is changing the font and padding sizes to make reading easier on smaller screens. I am setting font-size: 1em initially for the body and then decreasing it to font-size: 0.875em on screens larger than 600px. I am also setting the padding of the page (using the header and section tags) to a smaller value at first and increasing it on larger screens. This way there is more space for the content on smaller screens.

Since I am using ems instead of pixels for these examples, changing the font-size property on the body tag scales everything being styled with ems. Now, my whole typography system shifts by changing only one property. The padding and margin are scaling as well. That's why using ems in responsive design is so helpful!

Like the tiny tweaks layout, mostly fluid layouts are simple to implement as well. As seen in the following example, the layout is based on a fluid grid system that shifts depending on the viewport's size. Usually, the layout is comprised of columns that stack on smaller screens. The mostly fluid layout is the most popular of the ones presented in this chapter.

The preceding example has a primary article that spans the full width of the page and three smaller secondary articles. On smaller screens, the primary image centers itself on screen, while the three columns stack on top of each other.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<section class="clearfix">
  <!--Primary Article -->
  <article class="primary">
    <h2>Primary Article (h2)</h2>
    <img src="http://placehold.it/400x300" alt="">
    <p>Paragraph (p) - Collaboratively administrate...</p>
    <p>Efficiently unleash cross-media information without...</p>
    <p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one...</p>
  </article>

  <!-- Secondary Articles -->
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
</section>

Again in this example, we have a header. Next, we have the primary article with a class of primary, a heading, an image, and three paragraphs. After the primary article, we have the secondary articles. Each has a class of secondary, a heading, and a paragraph. To apply styles to all the articles, we can use the article tag.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

CSS

The mostly fluid example uses the same CSS as tiny tweaks, but adds the following styles. Let's look at the mobile styles first:

article {
  padding: 1em;
}
  article img {
    width: 100%;
    height: auto;
    max-width: 400px;
    display: block;
    margin: 0 auto;
  }

.primary {
  padding-top:0;
}

.secondary p {
  margin-bottom:0;
}

h2, h3, h4 {
  border-bottom: 1px solid darkgray;
}

The first important part is to make sure static width elements, such as images, scale with their columns. Here, we set all images inside the article to width: 100% and height: auto. We then give them a max-width and use margin: 0 auto and display: block to center them. Everything else except what is in the media query is there just for styling. The media query then looks like this:

@media screen and (min-width: 600px) {
  .primary img {
    float:left;
    margin: 0 0.5em 0.5em 0;
  }

  .secondary {
    width: 33.33%;
    float: left;
  }
}

Inside the media query, we are setting the image in the primary article to float: left at 600px or larger. This lets the text wrap around it, so we add a margin as well. Next, we set the width of each secondary article to 33.33% and apply float: left. The articles now appear on the same row. In the pattern-style.css file, we are using the universal selector, *, to apply box-sizing: border-box to all the elements. If you are familiar with the box model, you know that naturally if we set an element to be 100px wide, we then add 10px padding; the element will then be 120px wide (100px for the content and 10px on each side). Using box-sizing: border-box allows us to keep our set widths and have the padding subtract from the content area.

Websites can have side columns that contain additional information. We are used to seeing secondary navigation on the sides of pages. The column drop layout accommodates websites that utilize sidebar modules such as these. Normally, on larger screens, the columns are displayed while, on smaller screens, all sections are stacked on top of each other. Navigation columns are typically placed on top so the user can easily access them. Our example here has two columns and a section for the main content.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<aside>
  <h3>Secondary Nav (h3)</h3>
  <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
  </ul>
</aside>

<section>
  <h2>Heading 2 (h2)</h2>
  <p>Paragraph (p) - Collaboratively administrate empowered...</p>
  <p>Efficiently unleash cross-media information without...</p>
  <p>Completely synergize resource sucking relationships...</p>
</section>

<aside>
  <h3>Heading 3</h3>
  <p>Paragraph (p) - Phosfluorescently engage worldwide...</p>
</aside>

This pattern has three columns; two sidebars and one main column. The first aside holds what would be a secondary navigation, while the second holds complementary information.

CSS

aside, section, header {
  padding: 0.75em;
}

@media screen and (min-width: 600px) {

  aside {
    width: 25%;
  }

  section {
    width: 50%;
  }

  aside, section {
    float: left;
  }

}

First, we are giving all three columns padding. All that is left to make this pattern work is a media query to set the width of the columns on larger screens. At 600px or higher, we are applying width: 25% to both aside tags and width: 50% to the main section tag. We are then applying float: left to both so they appear next to each other.

The layout shifter pattern starts to get a little more complicated. It is similar to the last two examples, but requires a little more effort. This pattern changes the most for different viewport sizes. It usually has a different layout for small, medium, and large screen sizes. The example we are using changes at 600px and 800px.

This pattern has three different layouts—small, medium, and large:

The layout shifter pattern with a one, two, and three column layout

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<aside>
  <h3>Secondary Nav (h3)</h3>
  <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
  </ul>
</aside>

<section>
  <h2>Heading 2 (h2)</h2>
  <p>Paragraph (p) - Collaboratively administrate empowered...</p>
  <p>Efficiently unleash cross-media information without...</p>
  <p>Completely synergize resource sucking relationships...</p>
</section>

<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</article>

Here again we have a side column, a main section, and secondary articles. Having six items on a page is great for the layout because six is divisible by two and three. This means we can have three equal rows of two each and two rows of three. In the layout shifter pattern, we will do just that. We will also repeat what we did for the column drop pattern and shift the aside tag's position as well:

CSS

.secondary h3 {
  border-bottom: 1px solid darkgray;
}

@media screen and (min-width:600px) {
  aside {
    width: 25%;
  }

  section {
    width: 75%;
  }

  .secondary {
    width: 50%;
  }

  aside, section, .secondary {
    float: left;
  }
}

@media screen and (min-width:800px) {
  .secondary {
    width: 33.33%;
  }
}

Now we are seeing two media queries altering the page's layout. The first is changing the width of the aside tag and the section tag for screen sizes larger than 600px. Here, they are now split 25/75. Next, we are setting each secondary article to take up half the screen creating three rows of two. Lastly, for this media query, we set float: left to all three elements so they appear on the same row.

The next media query kicks in on screen sizes larger than 800px. The only thing we are changing here is how many secondary articles appear in a row. Setting the width of each secondary article to 33.33% creates two rows of three.

The biggest problem we have seen with these patterns so far is that most of them put all the content in one column at smaller sizes. Off canvas layouts are a solution to this. You may have used an off canvas layout in a mobile app. Usually, they have menus in columns that slide in from the right or left when opened. This doesn't mean we don't see this on the Web. Off canvas layouts require JavaScript (JS), though. There are purely CSS solutions, but these are hacks and come with their own problems.

The first two screenshots show what secondary navigation looks like when closed and opened on smaller screens. To toggle the navigation in this pattern, we will detect clicking on the Menu button with JS.

HTML

<body>
  <header>
    <h1>Page Heading (h1)</h1>
  </header>

  <aside>
    <h3>Secondary Nav (h3)</h3>
    <ul>
      <li><a href="#">List Item 1</a></li>
      <li><a href="#">List Item 2</a></li>
      <li><a href="#">List Item 3</a></li>
    </ul>
  </aside>

  <section>
    <button class="menu-toggle">Menu</button>
    <h2>Heading 2 (h2)</h2>
    <p>Paragraph (p) - Collaboratively administrate...</p>
    <p>Efficiently unleash cross-media information without...</p>
    <p>Completely synergize resource sucking relationships...</p>
  </section>
</body>

This layout's elements are the same as we've been using in other examples. The only difference is the Menu link. Here, I added a button with class="menu-toggle". Again, this will come into play when we get into the JS.

CSS

aside {
  display: none;
  width: 30%;
  max-width:200px;
}

section, aside {
  float: left;
}

.open aside{
  display: block;
}

.open section {
  width: 70%;
}

@media screen and (min-width: 600px) {
  .menu-toggle {
    display: none;
  }

  aside {
    display: block;
  }

  section {
    width: 70%;
  }

}

First, I am hiding the aside tag using display: none since we want it to be "off canvas" on smaller screens. Notice that we are not really having the aside element pushed off screen. Instead, we will create the illusion it is waiting right where we can't see it.

The next important style is for the open class. You may have noticed that we are not using the open class yet in the HTML. We will be! Using JS, we will add and remove the class from the body element. When the open class is added, display: none will change to display: block for the aside. Also, the main section will shrink to a width of 75%.

On larger screens above 600px, we set aside to display: block, so it doesn't matter if there is or is not a class of open on the body tag; the aside element will show. We also hide the Menu toggle link since we will no longer need it.

JavaScript

var menuTog = document.getElementsByClassName("menu-toggle")[0];

menuTog.onclick = function() {
    document.getElementsByTagName('body')[0].classList.toggle('open');
}

Out of all the layout patterns, this requires the most complex code. Don't worry though; this is actually very simple JavaScript! If you don't know JS, you can just use the code provided. I recommend reading the following explanation though to understand what is going on. Don't be afraid of JS. It is very easy to learn.

This snippet of JS first creates a variable, menuTog, that stores the first instance of the class menu-toggle. Next, we will create a function to trigger when the menu button is clicked. Inside this function, we are using the toggle method. We want to use this to toggle the open class on body. If body does not have a class of open, it will add it. If it already does, it will remove it. The CSS then does the rest and changes the styles depending on whether the open class is present.

When designing a website, we don't place content, modules, and text whenever we want. Websites such as these may look more like a cubist painting than a functional site. Website designs should be simple, usable, and approachable. A way to maintain order throughout a website is to base templates and pages off a grid system. The grid system is comprised of columns, typically in the range of 10-16 on large screens. Elements on a template are then aligned with the edges of the columns to bring order to the page.

Between each red column, there is space called the gutter. By always keeping this same sized space empty between elements, the page has breathing room and white space. The famous shoe brand, Vans, implements a 12-column grid system.

The Vans' website (http://www.vans.com/) with an example grid system

On Vans' home page, different sections of the page line up with the grid. The carousel spans the full width of the grid system, taking up 12 columns. The featured shoes underneath only take up two columns each. The articles under the OFF THE WALL section spans three columns each. Even the BE ORIGINAL banner at the bottom of the site lies on the grid. We see not only each section lined up with the grid system, but the images and text within each as well.

We don't have to create these grids from scratch though. Back when websites were acceptably one size and static, a popular tool to create these grid systems was 960 Grid System (http://960.gs/). This tool provides grid overlays in Photoshop, Flash, Fireworks, Illustrator, and many others. Each overlay is a 12, 16, or 24-column grid system with a 960-pixel width. Along with each column version, 960 Grid System also provides all the CSS needed to have page elements span across a certain number of columns.

We are not designing websites that are only 960-pixel wide. For a responsive website, we can use a responsive grid system. The patterns reviewed in this book can all be applied projects using a responsive grid system. Grid systems can help you determine how wide a pattern should span. With a responsive grid system, even though every column should be the same size, this one size can be a percentage and scale. This means that, on smaller screens, each column's width is narrower. Also with media queries, columns can be dropped too. A 12-column layout can become a 6-column one on smaller devices. Determining how a responsive grid system scales down for a project can help figure out how the project's patterns scale down too.

There are again tools already out there that help us create these responsive grid systems. Gridpak (http://gridpak.com/) lets us create a responsive grid system right there in the browser. By default, each column, column padding, and gutter value is a percentage. This allows the system to scale up and down depending on the browser's size. We can even add breakpoints to the system and change each value. When we download the file, Gridpak provides a .png file for design and the CSS files for implementation.

As mentioned, a common method for creating a responsive navigation is to let it simply stack up on smaller screens. This is why we'll call it the simple stack pattern. For small navigations, this pattern can do the trick. It is typically where newcomers to RWD start when building smaller websites. As seen here, the navigation floats to the right on large screens, but stacks on small ones.

Small sites can grow over time and navigation needs to be updated. Just like stacking content on small screens for layouts, stacking navigational items inhibits a website's navigation from growing. When a stacked navigation grows, it will get longer and take up more vertical space. A mobile user might visit the website, and only see the navigation.

HTML

<header class="clearfix">
  <div class="header-inner">
    <h1>Page Heading (h1)</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Our Portfolio</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</header>

The markup for this pattern is fairly straightforward. We have a header tag containing our h1 page heading and a nav tag containing an unordered list. The unordered list has a list item, li, for every navigation item we want.

CSS

header h1 {
  margin-bottom: 0.25em;

}

nav li {
 list-style: none;
 padding: 0.25em 0.5em 0 0;
}
 nav li a {
  text-decoration: none;
 }

@media only screen and (min-width: 750px){
  header h1 {
    float: left;
    margin:0;
  }

  nav {
    float: right;
  }
   nav li {
    display: inline-block;
   }
}

First off, we are using the clearfix class again so the header accounts for its floated children. Pretty much everything else outside the media query is for style, not functionality.

Unordered lists naturally stack. In the media query, we are breaking this. At a 750px width, we set the h1 tag to float: left and the nav tag to float: right. We then style the navigation to appear on one row by setting the list items, li, to display: inline-block. No longer will each item take up its own row. They will appear inline with each other.

If the simple stack pattern had an evil twin, it would be the anchor and footer pattern. To be honest, this isn't fair to say. The anchor and footer pattern is not evil or bad, it is just the same pattern but at the opposite position on the page. This pattern typically looks the same as the simple stack pattern on larger screens. On smaller screens, though, the navigation can be found in the footer of the site. As seen in the following screenshot, instead of a menu in the header, there is a link that jumps to the footer when clicked:

HTML

<header class="clearfix">
  <h1>Logo</h1>
  <a class="menu-btn" href="#menu">Menu</a>
</header>

<div class="content">
  <p>Content goes here.</p>
</div>

<footer>
  <div class="footer-inner">
    <h3>Footer</h3>

    <nav id="menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Our Portfolio</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</footer>

For this example, we almost have the full HTML structure for a whole page. We have a header, some content, and a footer. The navigation lives in the footer of the markup though. We will be using CSS to reposition it on larger screens. The anchor tag with a class of .menu-btn in the header is a jump link set to jump to the element with an ID of "menu." We can see that the nav tag in the footer has this ID. This means when we click the menu button in the header, we will jump to the footer.

CSS

.menu-btn {
  float:right;
}

header h1 {
  float: left;
}

nav li {
  list-style: none;
  padding: 0.50em;
}
  nav li a {
   text-decoration: none;
 }

footer {
  padding: 0.75em;
}

@media screen and (min-width: 750px) {
  .menu-btn {
    display: none;
  }

  nav {
    position: absolute;
    top:0.75em;
    right:0.75em;
  }
   nav li {
    display: inline-block;
   }
}

On small screens, we have only a heading and a jump link. We float the menu link to the right and apply some styling to the header, navigation, and footer. For larger screens, we hide the jump link with display: none and reposition the navigation in the media query. Remember, the navigation will appear naturally in the footer because that is where it lives in the markup. To get it to the top of the page, we use position: absolute and position the navigation 0.75em from the top and right of the page. This means that, on screens larger than 750px wide, the navigation leaves the footer and appears at the top right of the website.

The next two patterns are the most common RWD navigational patterns and will need JS. The toggle is a navigation that is hidden in a drawer on small devices. The drawer can then be toggled open and shut using JS. In the RPL example, as seen here, we are using the same navigation as before but giving it a different background color so that we can see this drawer effect more clearly. Look at the first two images to see the drawer closed and then opened. On large screens, the navigation is always visible.

HTML

<body>
  <header>
    <div class="header-inner">
      <h1>Logo</h1>
      <button class="menu-toggle">Menu</button>
    </div>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Our Portfolio</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </header>
</body>

The main difference between this pattern's markup and the past two is a new div tag wrapped around the page heading and the menu button. This helps separate the top section from the navigation on smaller screens. And just like the off canvas layout pattern in Chapter 2, The Main Stage – Building Responsive Layouts, we will be using JS here to toggle a class on the body tag.

CSS

header {
  padding:0;
}

header h1 {
  float: left;
}

nav {
  padding: 0.75em;
  background: lightgray;
  display: none;
}

  nav li {
    padding: 0.25em 0 0 0.5em;
  }
    nav a {
      display: block;
    }

.menu-toggle {
  float: right;
  text-decoration: none;
  padding: 0.5em;
  border: 1px solid lightgray;
  border-radius: 3px;
}
  .menu-toggle:hover {
    background-color: lightgray;
  }

.open nav {
  display: block;
}


@media screen and (min-width: 750px) {
  .menu-toggle {
    display: none;
  }

  nav {
overflow: auto;
display: block;
}
  nav ul {
    float: right;
  }
    nav li {
      display: inline-block;
    }

}

Most of the preceding CSS is just styling the pattern. We are giving the navigation a different background color and styling the menu button and its hover state. Just like in the previous chapter, we are using the .open class to show and hide the navigation. Using JS, we will apply a class of open to the body and style elements on the page with that class. Here, we will set the navigation to display: block when the open class is applied. Using a media query, we will then make sure that the menu button is hidden and the navigation is always shown (by using display: block).

JavaScript

var menuTog = document.getElementsByClassName("menu-toggle")[0];

menuTog.onclick = function() {     
  document.getElementsByTagName('body')[0].classList.toggle('open');
}

The JS for this pattern is the same as the off canvas layout pattern in Chapter 2, The Main Stage – Building Responsive Layouts. For a more in-depth overview of what this JS is doing, please refer to the off canvas pattern in that particular chapter. The JS again is toggling the class open on the body tag when the menu button is clicked. This allows us to toggle the CSS styles that show and hide the navigation on smaller screens.

We have essentially covered the off canvas pattern in Chapter 2, The Main Stage – Building Responsive Layouts. Both the off canvas layout pattern and the off canvas navigation pattern work the same way. The content is hidden off screen until the menu button is clicked. The page then moves to the side, making the off canvas section appear to be shifted back on stage. It uses the same JS as the last pattern as well. View the following example to see the similarities:

HTML

<body>
  <div class="on-canvas">
    <header>
      <div class="header-inner">
        <h1>Logo</h1>

        <button href="#" class="menu-toggle">Menu</button>

        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Our Portfolio</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>

  <nav class="off-canvas">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Our Portfolio</a></li>
      <li><a href="#">Our Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</body>

The biggest difference with the off canvas pattern is that the navigation markup needs to be in two places. Here, we have two main sections, "on canvas" and "off canvas". All of the page's content is within the "on canvas" section, including the navigation we see on larger screens. The "off canvas" section contains the mobile navigation that will push all the on canvas content over. There are more advanced methods to get this pattern to work that don't require duplicating the navigation, but they require about three times the amount of CSS. For now, this approach is widely used and perfectly acceptable.

CSS

The styles for the header and navigation are the same as in the past examples. Since this requires a little more CSS, though, let's look at it piece by piece. To view all the CSS used, visit the live RPL.

.on-canvas nav {
  display: none;
}

.off-canvas {
  display: none;
  width: 200px;
  position: absolute;
  right:0;
  top:0;
  bottom:0;
  background: lightgray;
}

First, we are styling the off canvas navigation. We are hiding it with display:none, but are also setting its location when it does show by positioning it to the top-right corner of the page.

.open .off-canvas {
  display: block;
}

.open .on-canvas {
  width: 100%;
  position: absolute;
  left: -200px;
}

Next we are setting the styles for when the navigation is open. We set the off canvas section to display:block and then shift over the on canvas section by -200px. This offset is not a random number. The -200px gives the off canvas section 200px of screen space. And this is exactly the width of the navigation.

@media screen and (min-width: 750px) {
  nav li {
    display: inline-block;
  }

  .menu-toggle {
    display: none;
  }

  .open .on-canvas {
    position: static;
  }

  .open .off-canvas {
    display: inline-block;
    float:right;
  }

  .open .off-canvas, .off-canvas {
    display: none;
  }
}

Finally, we have the media query. For screens larger than 750px, we hide the menu button and the off canvas navigation. We are then showing the first navigation that is actually in the header, floating it to the right, and styling it to display on one row.

JavaScript

The JS for this is the same as the last pattern. We are just using it to toggle the open class on the body tag again. Isn't it amazing how versatile JS can be? We have used this one JS snippet three times so far!

A navigation pattern that has recently popped up is what I call the overlay menu. On larger screen sizes, it looks the same as the last few patterns we have reviewed. As you can see here, even on small screens, it looks the same. When the navigation is open on smaller screens, though, it looks completely different. The navigation takes up the whole screen and covers the page. The menu is then centered on top of a usually slightly transparent background. The whole navigation is an overlay on top of the page; hence the name.

HTML

<header>
  <div class="header-inner">
  <h1>Logo</h1>
  <button href="#" class="menu-toggle">Menu</button>
  <nav>
    <button class="close">×</button>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Our Portfolio</a></li>
      <li><a href="#">Our Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  </div>
</header>

The HTML for this pattern contains less than the previous ones. The menu does not need to repeat in the markup. No on or off canvas sections are needed either. We will simply be making the navigation appear fullscreen with CSS on smaller screens. The only real addition is the button with a class of close in the nav tag. This button contains an HTML entity for the multiplication symbol (×). As you can see in the example, this is the "x" that pops up when the navigation is open. We will be using JS to close the navigation when that "x" is clicked.

CSS

A little more CSS is needed to get this pattern up-and-running. Most of it is the same as the previous patterns. Let's go through what is new and unique to this pattern:

nav {
    display: none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(255,255,255, 0.8);
    text-align: center;
}

Since we are developing mobile first, the overlay styles are first applied to the nav element. To make the nav element go fullscreen, we will use position: absolute and set each corner to zero. We are also giving the nav element a slightly transparent white background and setting text-align: center. We are then centering the ul containing the navigation items.

nav ul {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

nav a {
    font-size: 2em;
    margin: 0.5em 0;
    line-height: 1;
}

Setting position: absolute and top and left to 50% centers the top-left corner of the ul element. Then, transform: translate(-50%, -50%) moves the element 50% of its own height up and 50% of its own width to the left. Now, the center of the ul element is 50% from the top and left of the nav element instead of its top-left corner. Then, we are adding some styles to the menu links to make them less crowded.

.close {
    border:0;
    background: transparent;
    font-size: 2em;
    color: black;
    position: absolute;
    right:0;
}

.open nav {
    display: block;
}

.open .menu-toggle {
    display: none;
}

Next, we are styling the close button and positioning it in the top-right corner. We are also making sure that the navigation shows and the menu button is hidden when the open class is applied.

@media screen and (min-width: 750px) {
  nav {
    display: block;
    position: static;
    background: transparent;
    text-align: left;
    float: right;
  }

  nav ul {
    position: static;
    transform: translate(0,0);
  }

  nav ul {
    position: static;
    transform: translate(0,0);
  }
    nav li {
      display: inline-block;
    }
      nav a {
        font-size: 1em;
      }

  .menu-toggle, .close {
    display: none;
  }
}

Finally, for larger screens, we are reverting the fullscreen styles for the navigation and hiding the close button.

JavaScript

var menuTog = document.getElementsByClassName("menu-toggle")[0];
var closeTog = document.getElementsByClassName("close")[0];
var body = document.getElementsByTagName("body")[0];

menuTog.onclick = function() {
    body.classList.toggle('open');
}

closeTog.onclick = function() {
    body.classList.toggle('open');
}

The JS for this pattern is almost identical to the other patterns. The only addition is a function to toggle the open class when the close button is clicked. This function works the same as the first, but is just detecting a click on a different element.

Websites using this pattern typically have big beautiful images displaying their work or company. For the sake of this example, I grabbed a pattern from Subtle Patterns (http://subtlepatterns.com/) and created two images: banner-2000.png and banner-1400.png. As we saw earlier in this chapter, these big hero images normally have text overlaid on top of them. As you can see in the following image, we are doing just that:

Right now, there is not much going on with this pattern. This is on purpose. There is a lot you can do with big hero images. You can overlay other images, navigation, and more text. But this pattern right here shows you the basics.

HTML

<header>
  <img class="banner-img" src="i/banner-1400.png" srcset="i/banner-2000.png 2x"  sizes="100vw" alt="Banner Image"/>

  <div class="banner-overlay">
    <h1>Company Name</h1>
    <p>A very catchy and cool tagline.</p>
  </div>
</header>

The markup in this pattern consists of a header tag containing the image to go full span and the text. The image has a class of banner-img that we will use in the CSS. There is a div element with a class of banner-overlay containing h1 and p tags.

We are also using the srcset attribute here. It looks a little different though. This time we added the sizes attribute to the image tag. This gives the browser information about how much space the image will take up. Setting sizes to 100vw is saying that the image will take up 100% of the page's width. The unit vw stands for viewport width. One unit of vw is 1% of the containing element. Since the header tag spans the full width of the page already, sizes="100vw" is saying take up 100% of that space too. This is just giving the browser more information to help pick the best image to display.

CSS

header {
  position: relative;
}

.banner-img {
  width: 100%;
}

.banner-overlay {
  position: absolute;
  text-align: center;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

First, we set the header's position to relative. We do this because we want to position one of its children, .banner-overlay, relative to it. We then set the image's width to 100% since spanning the full width of the page is the whole point of this example.

For .banner-overlay, we are setting position to absolute since we will be moving it on top of the image. Since header is relative, .banner-overlay will move relative to it instead of to the browser's window. We are then centering the overlay in two different ways. First, text-align: center is centering the text while the last three lines are centering the overlay in the middle of the header element. We went over this centering technique in Chapter 3, Make Way for Responsive Navigations, for the overlay navigation pattern. If you are interested in using another centering technique, flexbox has its own solution. To use this, apply these settings to the parent of the item you wish to center:

display:flex;
justify-content:center;
align-items:center;

If the child you are trying to center is text, the only other thing you need to do is apply text-align:center to that child so the text is centered too

Whether it is a search results page or an image gallery, at some time in your career, you will need to create an image grid. Just like we arranged multiple columns and rows of articles in Chapter 2, The Main Stage – Building Responsive Layouts, we can create a grid of images. This can be as simple or complex as you like. This biggest question here is, How many images will appear per row? And how will this number change on different screen sizes? In our example here, one row is going to be comprised of 1, 2, 4, and 6 images per row from small to large screens. You may need more or fewer steps in between the smallest and largest screen sizes for your site, though.

To make this happen, we will style for the smallest first; one image per row. That's pretty easy. Then, we will be using media queries to add more images per row.

HTML

<ul class="img-grid">
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
</ul>

For the HTML, there is nothing special here. We have an unordered list with a class of img-grid and 12 list items. Each list item holds an image that will appear in our grid.

CSS

.img-grid {
  padding:0.15em;
  margin:0;
}

.img-grid li{
  list-style: none;
  padding: 0.30em;
}

.img-grid img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

The CSS is controlling everything here. We are first setting the padding on the <ul> and taking off any margins. The padding is set to 0.15em because this is half of what the padding on each <li> will be. On the <li> elements, we will set list-style to none to get rid of the bullets and then giving each one padding.

For the images, we are setting them to scale with max-width: 100% and height: auto. The last declaration sets vertical-align to bottom. If we didn't do this, there would be a 4px gap under each image. Images are inline elements and sit on the baseline like text would. This gap underneath the images is actually room for a descender (like that found in the lowercase "j" or "g"). Setting vertical-align: bottom gets rid of this extra space.

/*2 in a row*/
@media screen and (min-width: 600px) {
  .img-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .img-grid li {
    width: 50%;
  }
}

/*4 in a row*/
@media screen and (min-width: 800px) {
  .img-grid li {
    width: 25%;
  }
}

/*6 in a row*/
@media screen and (min-width: 1200px) {
  .img-grid li {
    width: 16.66%;
  }
}

Now, we start to get into the media queries. Without them, we would have one column of images. In the first media query, we apply flexbox styles and set them each to be 50% wide. For flexbox to work the way we want, we will set flex-direction to row and flex-wrap to wrap. This is saying that we want our flexbox items, <li>, to be organized in rows going left to right. Other flex-direction properties are row-reverse, column, and column-reverse. Flexbox will also naturally try to put everything on one line. Setting flex-wrap:wrap stops this. Other properties for flex-wrap are nowrap and wrap-reverse. From here, we only have to change the width of each <li>. If we want four images per row, we will set their widths to 25%. If we want 6, each is 16.667%.

Flexbox is not supported by IE9 and earlier. If you need to support these browsers, you can use float instead of flexbox. This solution can be found commented out in the style section of this pattern on the RPL.

As mentioned, you can host your videos yourself or through a third party. Both can be responsive, but using the HTML5 video element makes it a lot easier. For my example, I am using a video of an animated series I worked on. If you don't have your own video, feel free to practice with these (for example, http://chelmyers.github.io/RPL/media/v/cbmd.mp4). In the following screenshot, you can see this video scaling along with the browser:

HTML

<video controls>
  <source src="http://chelmyers.github.io/RPL/media/v/cbmd.mp4 " type="video/mp4"/>
  <source src="http://chelmyers.github.io/RPL/media/v/cbmd.webm" type="video/webm"/>
  <source src="http://chelmyers.github.io/RPL/media/v/cbmd.ogv" type="video/ogv"/>
  Your browser does not support the HTML5 video tag.
</video>

We are just using the basic HTML5 video element here. I have one video in three different formats so it appears on every browser. I even have a message in case the browser does not support the video tag.

CSS

video {
  max-width: 100%;
  height: auto;
}

Yup, that's it. You can scale videos the same way you scale images. The max-width makes sure the video doesn't scale past its actual size and height:auto helps keep its aspect ratio. What were you hoping for, something more difficult?

I wish I could say that scaling iframes are just as easy as video elements, but sadly I cannot. The iframe takes a little bit more work. However, as you can see in the following image, it is still possible:

HTML

<div class="video-wrap">
  <iframe width="560" height="315"
    src="https://www.youtube.com/embed/l9uqeTHrD9U"
    frameborder="0" allowfullscreen></iframe>
</div>

To get iframes working, we must wrap them in a container. With CSS, we will then make the container the size we wish the iframe to be. We will then stretch the iframe to fit this container. So, when the container scales up or down, the iframe will too.

CSS

.video-wrap {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* % of element's width. Ex. 9/16 = 0.5624 */
  padding-top: 32px; /*height of controls*/
}

.video-wrap iframe {
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

For the iframe's container, or .video-wrap, we are setting position to relative so that we can position the iframe relative to it. We are setting the height to 0 because padding-bottom will be giving us the height we need. Setting the padding-bottom to 56.25% will make .video-wrap height 56.25% of its width. So, if our video has a 16:9 resolution, to figure out what the padding-bottom value should be, we divide 9 by 16 (that's 0.5625) and multiple it by 100. The padding-top value is making space for the videos controls. The second part, for .video-wrap iframe, is stretching the iframe to fit this new container.

It takes a little bit more work, but it is still easy to set up. Whether you use the HTML5 video elements or keep your videos on YouTube, there's no reason why they shouldn't scale as well.

The biggest issue tables pose is their uncertain width. Long tables with lots of rows are no problem. Our web page can be as long as a table needs. However, a table that is very wide, with lots of columns, starts to break our beautiful responsive websites. As our website scales down, we will have a table busting out of its container. We can scale down images and videos, but how can we scale down tables? We cannot just scale down the font-size attribute. It may become too tiny to read. We just can't decrease the padding. The table's cell would cramp. This solution uses a horizontal scroll to fix this issue, and a fade to the right like the following screenshot:

On smaller screens, shown on the left of the screenshot, the table starts to scale down and fit the browser's width. When the table is too wide, columns appear off stage and the user can scroll to the right to see them. The right fade is present to tell the user that there is more data to be seen. A visible scrollbar can also do this, but some browsers (such as Chrome and Safari) hide theirs by default. Another option can be to take out the fade, and force the browser to also show the scrollbar. This is totally acceptable, but to me, not as elegant.

HTML

<h3>Weekly Workout in Minutes</h3>

<table class="table-overflow">
<thead>
  <th></th>
  <th>Monday</th>
  <th>Tuesday</th>
  <th>Wednesday</th>
  <th>Thursday</th>
  <th>Friday</th>
  <th>Saturday</th>
  <th>Sunday</th>
</thead>
<tbody>
  <tr>
    <td>Yoga</td>
    <td>60</td>
    <td>15</td>
    <td>-</td>
    <td>90</td>
    <td>60</td>
    <td>90</td>
    <td>30</td>
 </tr>
</tbody>
...
</table>

The preceding code is a shortened version of the markup. The only thing special about this table is it has a class of table-overflow. Some tables may be small enough that they do not need special treatment. In such cases, we can add our responsive styles to this class and only apply it to tables that need it.

CSS

td, th {
  padding: 10px;
}

table {
  border: 2px solid #eee;
  border-collapse: collapse;
  border-spacing: 0; 
}

@media screen and (max-width: 600px) {
  .table-overflow {
    display:block;
    overflow-x: scroll;

    -webkit-box-shadow: inset -28px 0px 40px -30px #ddd;
    -moz-box-shadow: inset -28px 0px 40px -30px #ddd;
    box-shadow: inset -28px 0px 40px -30px #ddd;
  }
}

Pretty much everything here is for styling the table except for what's inside the media query. Inside the media query, we are setting the table to be display:block when the viewport is under 600px wide. We then set overflow-x: scroll so the table can scroll horizontally. After this, we will use the box-shadow property to create a gradient, or fade, on the right of the table. When using the box-shadow property here, make sure you are creating an inset shadow that appears inside the table. The values here may seem a little large (such as 40px), but these values make sure the shadow only appears to the right of the box and not on the other edges. You can use a custom-made transparent image or CSS3 gradients for the fade, but I find using box-shadow to be the simplest way so far.

The only problem with the previous pattern is that users can forget what the rows represented when scrolling too far to the right. Stacked tables look the same as fading tables on desktop, but take on a whole different layout on small screens. As shown in the following screenshot, the stacked table doesn't even look like a table on smaller screens:

Every row has its own section with the column headings being repeated for each. This pattern takes up more vertical space, but we have more of that on smaller portrait-oriented screens.

HTML

<h3>Weekly Workout in Minutes</h3>

<table class="table-overflow">
  <thead>
    <th></th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>Sunday</th>
  </thead>
  <tbody>
    <tr>
      <td>Yoga</td>
      <td data-label="Monday">60</td>
      <td data-label="Tuesday">15</td>
      <td data-label="Wednesday">-</td>
      <td data-label="Thursday">90</td>
      <td data-label="Friday">60</td>
      <td data-label="Saturday">90</td>
      <td data-label="Sunday">30</td>
   </tr>
   ...
  </tbody>
</table>

The HTML is the same as the previous example except we are using a data attribute on every td in the rows. This is what allows the table on small screens to show the column heading to the left of the data.

CSS

td, th {
    padding: 10px;
}

table {
  border: 2px solid #eee;
  border-collapse: collapse;
  border-spacing: 0; 
}

@media screen and (max-width: 600px) {
  table, th, td, tr { 
    display: inline-block; 
  }

  thead { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  td {
    text-align: center;
    width: 100%;
  }

  td[data-label] {
    text-align: right;
    border-bottom: 1px solid #eee;
  }

  td[data-label]:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

Again, the CSS here is just styling the table until we get into the media query. On browsers smaller than 600px, we are setting all table elements to display:inline-block to stop having the table look like, well, a table. This way everything starts on its own line. Then, we hide the table heading, the thead tag, by making them position: absolute and setting their top and left values to -9999px.

Next, we set each td to be centered and take up 100% of the table's width. This is why the section headings (such as Yoga) are centered. With td[data-label], we style the actual data with a data-label attribute to be right aligned and have a bottom border. Finally, we use td[data-label]:before to extract the contents of the data-label attribute, and put them before the data. We then float this to the left and make it bold. These final styles insert Monday, Tuesday, Wednesday, and so on next to the data on smaller screens.

If you are a web developer, you probably spend a lot of time on the Internet. Whether you are procrastinating or actually getting work done, keep your eyes open for impressive websites. Catalog the websites you find. Personally, I use Evernote to bookmark websites I love and want to look back to. The Onion's website, http://www.theonion.com/, is very impressive and cutting-edge. They are using flexbox to create their responsive layouts. When I first stumbled upon the Onion's new website, I took a moment to right-click and inspect it in the browser. Now, if I ever need a good reference for using flexbox in a responsive website, I have one. Have a look at a screenshot of this website here:

AWWWards' (http://www.awwwards.com/) and the Webby's website (http://www.webbyawards.com/) are great places to find responsive site inspiration. The AWWWards can show you trending sites, award winners, and the selected "Site of the Day." These websites are typically beautiful and are the pushing the boundaries of web design and development. Most of the examples from the book have come from the AWWWards' website. Searching through AWWWards' site has helped me discover some implementations of this book's popular patterns. The following is a website from AWWWards. For its navigation, it is using the overlay navigation pattern. You will find a lot of websites on the AWWWards site using the patterns covered in this book. You can also find some new and different patterns as well.

Another great place for RWD patterns is CodePen.io. CodePen houses snippets of HTML, CSS, and JS. It's like a website of patterns! When you have time, check out the Picks and Popular sections on the home page. These are popular "pens" that CodePen users created and usually utilize the latest HTML, CSS, and JS techniques.

Your RPL should include swatches of the website's colors and their color value (hexadecimal, RGB, HSL, and so on). If you are using a CSS preprocesser, such as LESS or Sass, include the color's variable name as well. It is also important to know when and how to use these colors and which colors should never be paired.

Example: Google style guide (https://developers.google.com/web/fundamentals/resources/styleguide/index):

Make sure to include what font faces your website uses. As we saw in Chapter 2, The Main Stage – Building Responsive Layouts, font sizes may be changed across screen sizes to help with legibility. If they do, make sure you document these changes.

Example: MailChimp's UX style guide:

Your website may be using icons to help with navigation and/or tags. If it does, make sure to catalog what icons are being used and how to embed them in the future. Some websites use an icon font and use class names to embed the icons. Icons can also be responsive. Responsive icons are more detailed on larger screens and less on small. Check out Iconic (https://useiconic.com/) to see an example of what responsive icons can do.

Example: Code for America style guide (https://style.codeforamerica.org/):

All the patterns we went over in this book have been using horizontal media queries. Vertical media queries are exactly what you think they are. They are queries that adjust on the viewport's height, not the width. They are easy to implement too. We are used to writing horizontal media queries like this:

@media screen and (min-width: 600px) {
    …CSS…
}

Vertical media queries look like this:

@media screen and (min-height: 600px) {
    …CSS…
}

Yeah, it's not that different. Lagunitas Brewing Company uses vertical media queries for the age gate (asking if the user is older than 21). On taller browsers, the age gate has a few paragraphs of text welcoming the user. But on shorter browsers, the age gate only has the prompt and buttons. Since there is less vertical space for the age gate, it condenses.

If you are creating a responsive pattern library for a client, you are pretty much digitizing their brand. Your library should already be full with their custom brand's CSS. Before handing off a pattern library, or even at the start of the project, take some time to style the library itself. This little extra bit of effort can make you seem like even more of a professional. All the CSS is already there, right? Why not make sure it is being applied to the actual library? Make sure the typography for the pages' headers, paragraphs, and lists is styled appropriately. MailChimp's pattern library does just this. You can see how the typography is being used in the library itself.

Include the client's logo in the library's header. Style the navigation in the same way it would be on the actual site. Here's a checklist of branding elements you can add:

By doing this, you are providing more examples for how these patterns can be used. And your library will be even more impressive.

Quality assurance (QA) is a phase in the project when you make sure the website looks and works the same across browsers and devices. It can also be the time to make sure the site is accessible to all users. Usually the person doing QA logs tickets about bugs they see for developers to resolve. Before you ship off your library, make sure you test it. In Chapter 6, Combining Responsive Patterns, we discussed how to identify what browsers to test. Your client may have a list of browsers already prepared. Just like you would test your website, you should also test your pattern library. You cannot be sure what browser your client will be using to view your library. You don't want the main point of reference for a site to appear broken on some browsers.

You can even include your pattern library in the QA phase of the project. Being a developer who solves QA tickets, few things are more frustrating than tracking down modules or specific instances of a pattern in a huge website. Sometimes, I will get a ticket that says, "Sidebar navigation overlaps content at 700px." This just means a sidebar menu is spilling out of its container 700px. A kind "QA-er" (the person logging that ticket) would include a link to a page where I can find this. This doesn't always happen though. And most of the time you then have to sift through all the website's pages, trying to find an instance of the sidebar navigation. And when you do this multiple times over and over, it takes up a good chunk of your time. And sidebars are common. What if there was an issue with a Google Map responsive iframe pattern that you know only applies to two pages out of 40 pages? You, of course, forgot which ones. Have fun finding the pages that use that pattern.

If you QA'd using the pattern library, though, you can just check out the sidebar navigation pattern to see why this is happening. You may even have a layout with the sidebar navigation in your library. And you would definitely have the Google Map responsive iframe neatly archived and easy to find.

Visiting a website you made a while ago is a gamble. You hope it doesn't hurt you. Seeing your hard work soiled by the hands of clients is heart-breaking. You released something you care about into the wild and are now witnessing its decay. You may see some weird pattern you built for specific pages now on the homepage. "No! That doesn't go there!" you may think. But there's nothing you can do. The site launched a long time ago and it is out of your hands. The site may even be mutated past recognition.

I wish I could tell you there was a solution to this, but there isn't. Although they think otherwise, your client is not the expert; you are. And when you are out of the picture all that is left is the instructions you gave them. A good responsive pattern library is your main weapon to fight compromised designs. But even your library can become mutated and bloated. What can we do then in a fast-paced industry based on iterations with websites changing so frequently? Beef up your pattern library by writing meaningful descriptions for all your patterns.

Writing meaningful descriptions

Your responsive pattern library should not be filled with only examples of the patterns and their HTML, CSS, and/or JS, it should also be filled with meaningful descriptions of each pattern. Every pattern has its purpose. It is designed to hold specific content, look a specific way, or be on specific pages. The easiest way to make this clear to future developers editing a project is to write it down. Remember, your responsive pattern library has its own user experience for you to design. You can make it easy or hard for future developers to use your pattern library. You can even do this to yourself.

I love the "past self"/ "future self" example. Did you ever design or code something, not look at it for a long time, and look back and say, "What was I thinking?" Maybe you wrote some really complicated and unnecessary CSS that you now have to deal with. When this happens, you may think "Curse you, past self! You are so lazy." On the flip side, maybe you are creating a new layout in HTML and are including some really thoughtful comments to refer to in the future. You may find that when you revisit it, you think "Oh thanks, past self, that was so smart and helpful for present me." The point is, always think about what future you, or future self, would prefer.

Remember the full span video pattern from Chapter 6, Combining Responsive Patterns. You can look at the following image to refresh your memory. The pattern consisted of a looping video stretching across the page with text overlaid on top.

Let's write a description for it in our pattern library. The following are two descriptions showing a bad example and a good example:

• Bad: This video goes the full width of the page and has a text overlay.
• Good: This video covers the full width of the page with the company's name/logo overlaid on top, centered on the video. This pattern should only be used on the home page. Video for this pattern should have no audio and loop seamlessly. On small screens, a still image will be shown instead. This image should be a thumbnail selected from the video, highlighting its content.

The bad example states the obvious. I can tell just by looking at the pattern that it is a full span video with a text overlay. A good description will not only tell you what the pattern is, but what it should never be. It documents the decisions made about the pattern for others to understand it better as well. In our good example, we make sure to note that this pattern should only be used on the home page. We also describe important shifts that occur at different screen sizes. This description makes sure we know when, where, and how to use this pattern.

Some clients may require their work to be password-protected. You may even want to password-protect the pattern library just as a courtesy. I personally use .htaccess to password protect my directories. It's more secure than most JavaScript solutions and fairly easy to implement. To do this, first create a file named .htpasswd in a plain text editor such as TextEdit or Notepad. Use a .htaccess password generator. You can easily Google one or go to http://www.htaccesstools.com/htpasswd-generator/. For this example, I am going to set the username to admin and the password to password too. Super secure, right?

Paste the generated password and username inside your .htpasswd file. It should look something like this:

admin:$apr1$4FDDZ0z1$OyTfGO5PAPSE7FmeCrOih/

The first part admin is the username and the string of seemingly random characters is the encrypted password. Now save that in the directory that you are password protecting. You may get a message such as "Names that begin with a dot "." are reserved for the system." This is fine. Both files need to be created; .htaccess and .htpasswd will not be visible. You may need to show hidden files to see them. A text editor, such as Sublime, will show them on its sidebar though.

Now create a .htaccess file and write the following code:

AuthType Basic
AuthName "Password Protected Area"
AuthUserFile /path/to/your/.htpasswd
Require valid-user

Change /path/to/your/.htpasswd to the path to the .htpasswd file. Then upload them to your remote directory. You should see a prompt asking for a username and password.

If not, make sure the path to your .htpasswd file is correct. Also, make sure that both files have no extension added from your text editor.

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.

Here is the link to the code on GitHub: https://github.com/chelmyers/RPL

Here is the live version of our website: http://chelmyers.github.io/RPL/

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <copyright@packtpub.com> with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

If you have a problem with any aspect of this book, you can contact us at <questions@packtpub.com>, and we will do our best to address the problem.

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.

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:

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.

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.

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.

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:

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:

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:

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.

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.

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.

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.

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)

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 simple—the responsive pattern library (RPL).

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.

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:

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.

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

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

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 <!-- Markup goes here. --> with the markup (HTML) of the pattern. Replace all less-than characters, <, with its HTML entity, <, 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 filled-out 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.

Let's start by looking at the easiest layout pattern. This pattern doesn't require much effort. The layout is similar to the example reviewed under a past section, The Web is naturally responsive. It is typically a single-column web page.

Our layout has a header and a section containing the site's content. Since these elements automatically stretch and scale to the browser's width, only some minor changes are needed to make it more mobile-friendly.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<section>
  <p>Paragraph (p) - Collaboratively administrate empowered...<p>

  <h2>Heading 2 (h2)</h2>

  <p>Paragraph (p) - Efficiently unleash cross-media...</p>

  <ul>
    <li>List Item 1. Objectively innovate empowered...</li>
    <li>List Item 2. Proactively envisioned multimedia..</li>
    <li>List Item 3. Completely pursue scalable customer...</li>
  </ul>
</section>

The header section contains an h1 tag while a section tag contains the rest of the page's content. Inside the section tag, we have a second heading, paragraphs, and an unordered list.

CSS

body {
  font-size: 1em;
}

header, section {
  padding:0.75em;
}

@media screen and (min-width: 600px) {
  body {
    font-size: 0.875em;
  }

  header, section {
    padding:1em;
    margin-bottom:1em;
  }
}

Here, we have the styles for this layout with the media query highlighted. Now, remember we are styling these patterns mobile first; meaning the smallest screen-size styles are applied first and built on top of. This layout already scales width-wise the way we want it to, so we don't have to do much. All we are doing with CSS here is changing the font and padding sizes to make reading easier on smaller screens. I am setting font-size: 1em initially for the body and then decreasing it to font-size: 0.875em on screens larger than 600px. I am also setting the padding of the page (using the header and section tags) to a smaller value at first and increasing it on larger screens. This way there is more space for the content on smaller screens.

Since I am using ems instead of pixels for these examples, changing the font-size property on the body tag scales everything being styled with ems. Now, my whole typography system shifts by changing only one property. The padding and margin are scaling as well. That's why using ems in responsive design is so helpful!

Like the tiny tweaks layout, mostly fluid layouts are simple to implement as well. As seen in the following example, the layout is based on a fluid grid system that shifts depending on the viewport's size. Usually, the layout is comprised of columns that stack on smaller screens. The mostly fluid layout is the most popular of the ones presented in this chapter.

The preceding example has a primary article that spans the full width of the page and three smaller secondary articles. On smaller screens, the primary image centers itself on screen, while the three columns stack on top of each other.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<section class="clearfix">
  <!--Primary Article -->
  <article class="primary">
    <h2>Primary Article (h2)</h2>
    <img src="http://placehold.it/400x300" alt="">
    <p>Paragraph (p) - Collaboratively administrate...</p>
    <p>Efficiently unleash cross-media information without...</p>
    <p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one...</p>
  </article>

  <!-- Secondary Articles -->
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
</section>

Again in this example, we have a header. Next, we have the primary article with a class of primary, a heading, an image, and three paragraphs. After the primary article, we have the secondary articles. Each has a class of secondary, a heading, and a paragraph. To apply styles to all the articles, we can use the article tag.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

CSS

The mostly fluid example uses the same CSS as tiny tweaks, but adds the following styles. Let's look at the mobile styles first:

article {
  padding: 1em;
}
  article img {
    width: 100%;
    height: auto;
    max-width: 400px;
    display: block;
    margin: 0 auto;
  }

.primary {
  padding-top:0;
}

.secondary p {
  margin-bottom:0;
}

h2, h3, h4 {
  border-bottom: 1px solid darkgray;
}

The first important part is to make sure static width elements, such as images, scale with their columns. Here, we set all images inside the article to width: 100% and height: auto. We then give them a max-width and use margin: 0 auto and display: block to center them. Everything else except what is in the media query is there just for styling. The media query then looks like this:

@media screen and (min-width: 600px) {
  .primary img {
    float:left;
    margin: 0 0.5em 0.5em 0;
  }

  .secondary {
    width: 33.33%;
    float: left;
  }
}

Inside the media query, we are setting the image in the primary article to float: left at 600px or larger. This lets the text wrap around it, so we add a margin as well. Next, we set the width of each secondary article to 33.33% and apply float: left. The articles now appear on the same row. In the pattern-style.css file, we are using the universal selector, *, to apply box-sizing: border-box to all the elements. If you are familiar with the box model, you know that naturally if we set an element to be 100px wide, we then add 10px padding; the element will then be 120px wide (100px for the content and 10px on each side). Using box-sizing: border-box allows us to keep our set widths and have the padding subtract from the content area.

Websites can have side columns that contain additional information. We are used to seeing secondary navigation on the sides of pages. The column drop layout accommodates websites that utilize sidebar modules such as these. Normally, on larger screens, the columns are displayed while, on smaller screens, all sections are stacked on top of each other. Navigation columns are typically placed on top so the user can easily access them. Our example here has two columns and a section for the main content.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<aside>
  <h3>Secondary Nav (h3)</h3>
  <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
  </ul>
</aside>

<section>
  <h2>Heading 2 (h2)</h2>
  <p>Paragraph (p) - Collaboratively administrate empowered...</p>
  <p>Efficiently unleash cross-media information without...</p>
  <p>Completely synergize resource sucking relationships...</p>
</section>

<aside>
  <h3>Heading 3</h3>
  <p>Paragraph (p) - Phosfluorescently engage worldwide...</p>
</aside>

This pattern has three columns; two sidebars and one main column. The first aside holds what would be a secondary navigation, while the second holds complementary information.

CSS

aside, section, header {
  padding: 0.75em;
}

@media screen and (min-width: 600px) {

  aside {
    width: 25%;
  }

  section {
    width: 50%;
  }

  aside, section {
    float: left;
  }

}

First, we are giving all three columns padding. All that is left to make this pattern work is a media query to set the width of the columns on larger screens. At 600px or higher, we are applying width: 25% to both aside tags and width: 50% to the main section tag. We are then applying float: left to both so they appear next to each other.

The layout shifter pattern starts to get a little more complicated. It is similar to the last two examples, but requires a little more effort. This pattern changes the most for different viewport sizes. It usually has a different layout for small, medium, and large screen sizes. The example we are using changes at 600px and 800px.

This pattern has three different layouts—small, medium, and large:

The layout shifter pattern with a one, two, and three column layout

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<aside>
  <h3>Secondary Nav (h3)</h3>
  <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
  </ul>
</aside>

<section>
  <h2>Heading 2 (h2)</h2>
  <p>Paragraph (p) - Collaboratively administrate empowered...</p>
  <p>Efficiently unleash cross-media information without...</p>
  <p>Completely synergize resource sucking relationships...</p>
</section>

<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</article>

Here again we have a side column, a main section, and secondary articles. Having six items on a page is great for the layout because six is divisible by two and three. This means we can have three equal rows of two each and two rows of three. In the layout shifter pattern, we will do just that. We will also repeat what we did for the column drop pattern and shift the aside tag's position as well:

CSS

.secondary h3 {
  border-bottom: 1px solid darkgray;
}

@media screen and (min-width:600px) {
  aside {
    width: 25%;
  }

  section {
    width: 75%;
  }

  .secondary {
    width: 50%;
  }

  aside, section, .secondary {
    float: left;
  }
}

@media screen and (min-width:800px) {
  .secondary {
    width: 33.33%;
  }
}

Now we are seeing two media queries altering the page's layout. The first is changing the width of the aside tag and the section tag for screen sizes larger than 600px. Here, they are now split 25/75. Next, we are setting each secondary article to take up half the screen creating three rows of two. Lastly, for this media query, we set float: left to all three elements so they appear on the same row.

The next media query kicks in on screen sizes larger than 800px. The only thing we are changing here is how many secondary articles appear in a row. Setting the width of each secondary article to 33.33% creates two rows of three.

The biggest problem we have seen with these patterns so far is that most of them put all the content in one column at smaller sizes. Off canvas layouts are a solution to this. You may have used an off canvas layout in a mobile app. Usually, they have menus in columns that slide in from the right or left when opened. This doesn't mean we don't see this on the Web. Off canvas layouts require JavaScript (JS), though. There are purely CSS solutions, but these are hacks and come with their own problems.

The first two screenshots show what secondary navigation looks like when closed and opened on smaller screens. To toggle the navigation in this pattern, we will detect clicking on the Menu button with JS.

HTML

<body>
  <header>
    <h1>Page Heading (h1)</h1>
  </header>

  <aside>
    <h3>Secondary Nav (h3)</h3>
    <ul>
      <li><a href="#">List Item 1</a></li>
      <li><a href="#">List Item 2</a></li>
      <li><a href="#">List Item 3</a></li>
    </ul>
  </aside>

  <section>
    <button class="menu-toggle">Menu</button>
    <h2>Heading 2 (h2)</h2>
    <p>Paragraph (p) - Collaboratively administrate...</p>
    <p>Efficiently unleash cross-media information without...</p>
    <p>Completely synergize resource sucking relationships...</p>
  </section>
</body>

This layout's elements are the same as we've been using in other examples. The only difference is the Menu link. Here, I added a button with class="menu-toggle". Again, this will come into play when we get into the JS.

CSS

aside {
  display: none;
  width: 30%;
  max-width:200px;
}

section, aside {
  float: left;
}

.open aside{
  display: block;
}

.open section {
  width: 70%;
}

@media screen and (min-width: 600px) {
  .menu-toggle {
    display: none;
  }

  aside {
    display: block;
  }

  section {
    width: 70%;
  }

}

First, I am hiding the aside tag using display: none since we want it to be "off canvas" on smaller screens. Notice that we are not really having the aside element pushed off screen. Instead, we will create the illusion it is waiting right where we can't see it.

The next important style is for the open class. You may have noticed that we are not using the open class yet in the HTML. We will be! Using JS, we will add and remove the class from the body element. When the open class is added, display: none will change to display: block for the aside. Also, the main section will shrink to a width of 75%.

On larger screens above 600px, we set aside to display: block, so it doesn't matter if there is or is not a class of open on the body tag; the aside element will show. We also hide the Menu toggle link since we will no longer need it.

JavaScript

var menuTog = document.getElementsByClassName("menu-toggle")[0];

menuTog.onclick = function() {
    document.getElementsByTagName('body')[0].classList.toggle('open');
}

Out of all the layout patterns, this requires the most complex code. Don't worry though; this is actually very simple JavaScript! If you don't know JS, you can just use the code provided. I recommend reading the following explanation though to understand what is going on. Don't be afraid of JS. It is very easy to learn.

This snippet of JS first creates a variable, menuTog, that stores the first instance of the class menu-toggle. Next, we will create a function to trigger when the menu button is clicked. Inside this function, we are using the toggle method. We want to use this to toggle the open class on body. If body does not have a class of open, it will add it. If it already does, it will remove it. The CSS then does the rest and changes the styles depending on whether the open class is present.

When designing a website, we don't place content, modules, and text whenever we want. Websites such as these may look more like a cubist painting than a functional site. Website designs should be simple, usable, and approachable. A way to maintain order throughout a website is to base templates and pages off a grid system. The grid system is comprised of columns, typically in the range of 10-16 on large screens. Elements on a template are then aligned with the edges of the columns to bring order to the page.

Between each red column, there is space called the gutter. By always keeping this same sized space empty between elements, the page has breathing room and white space. The famous shoe brand, Vans, implements a 12-column grid system.

The Vans' website (http://www.vans.com/) with an example grid system

On Vans' home page, different sections of the page line up with the grid. The carousel spans the full width of the grid system, taking up 12 columns. The featured shoes underneath only take up two columns each. The articles under the OFF THE WALL section spans three columns each. Even the BE ORIGINAL banner at the bottom of the site lies on the grid. We see not only each section lined up with the grid system, but the images and text within each as well.

We don't have to create these grids from scratch though. Back when websites were acceptably one size and static, a popular tool to create these grid systems was 960 Grid System (http://960.gs/). This tool provides grid overlays in Photoshop, Flash, Fireworks, Illustrator, and many others. Each overlay is a 12, 16, or 24-column grid system with a 960-pixel width. Along with each column version, 960 Grid System also provides all the CSS needed to have page elements span across a certain number of columns.

We are not designing websites that are only 960-pixel wide. For a responsive website, we can use a responsive grid system. The patterns reviewed in this book can all be applied projects using a responsive grid system. Grid systems can help you determine how wide a pattern should span. With a responsive grid system, even though every column should be the same size, this one size can be a percentage and scale. This means that, on smaller screens, each column's width is narrower. Also with media queries, columns can be dropped too. A 12-column layout can become a 6-column one on smaller devices. Determining how a responsive grid system scales down for a project can help figure out how the project's patterns scale down too.

There are again tools already out there that help us create these responsive grid systems. Gridpak (http://gridpak.com/) lets us create a responsive grid system right there in the browser. By default, each column, column padding, and gutter value is a percentage. This allows the system to scale up and down depending on the browser's size. We can even add breakpoints to the system and change each value. When we download the file, Gridpak provides a .png file for design and the CSS files for implementation.

As mentioned, a common method for creating a responsive navigation is to let it simply stack up on smaller screens. This is why we'll call it the simple stack pattern. For small navigations, this pattern can do the trick. It is typically where newcomers to RWD start when building smaller websites. As seen here, the navigation floats to the right on large screens, but stacks on small ones.

Small sites can grow over time and navigation needs to be updated. Just like stacking content on small screens for layouts, stacking navigational items inhibits a website's navigation from growing. When a stacked navigation grows, it will get longer and take up more vertical space. A mobile user might visit the website, and only see the navigation.

HTML

<header class="clearfix">
  <div class="header-inner">
    <h1>Page Heading (h1)</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Our Portfolio</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</header>

The markup for this pattern is fairly straightforward. We have a header tag containing our h1 page heading and a nav tag containing an unordered list. The unordered list has a list item, li, for every navigation item we want.

CSS

header h1 {
  margin-bottom: 0.25em;

}

nav li {
 list-style: none;
 padding: 0.25em 0.5em 0 0;
}
 nav li a {
  text-decoration: none;
 }

@media only screen and (min-width: 750px){
  header h1 {
    float: left;
    margin:0;
  }

  nav {
    float: right;
  }
   nav li {
    display: inline-block;
   }
}

First off, we are using the clearfix class again so the header accounts for its floated children. Pretty much everything else outside the media query is for style, not functionality.

Unordered lists naturally stack. In the media query, we are breaking this. At a 750px width, we set the h1 tag to float: left and the nav tag to float: right. We then style the navigation to appear on one row by setting the list items, li, to display: inline-block. No longer will each item take up its own row. They will appear inline with each other.

If the simple stack pattern had an evil twin, it would be the anchor and footer pattern. To be honest, this isn't fair to say. The anchor and footer pattern is not evil or bad, it is just the same pattern but at the opposite position on the page. This pattern typically looks the same as the simple stack pattern on larger screens. On smaller screens, though, the navigation can be found in the footer of the site. As seen in the following screenshot, instead of a menu in the header, there is a link that jumps to the footer when clicked:

HTML

<header class="clearfix">
  <h1>Logo</h1>
  <a class="menu-btn" href="#menu">Menu</a>
</header>

<div class="content">
  <p>Content goes here.</p>
</div>

<footer>
  <div class="footer-inner">
    <h3>Footer</h3>

    <nav id="menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Our Portfolio</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</footer>

For this example, we almost have the full HTML structure for a whole page. We have a header, some content, and a footer. The navigation lives in the footer of the markup though. We will be using CSS to reposition it on larger screens. The anchor tag with a class of .menu-btn in the header is a jump link set to jump to the element with an ID of "menu." We can see that the nav tag in the footer has this ID. This means when we click the menu button in the header, we will jump to the footer.

CSS

.menu-btn {
  float:right;
}

header h1 {
  float: left;
}

nav li {
  list-style: none;
  padding: 0.50em;
}
  nav li a {
   text-decoration: none;
 }

footer {
  padding: 0.75em;
}

@media screen and (min-width: 750px) {
  .menu-btn {
    display: none;
  }

  nav {
    position: absolute;
    top:0.75em;
    right:0.75em;
  }
   nav li {
    display: inline-block;
   }
}

On small screens, we have only a heading and a jump link. We float the menu link to the right and apply some styling to the header, navigation, and footer. For larger screens, we hide the jump link with display: none and reposition the navigation in the media query. Remember, the navigation will appear naturally in the footer because that is where it lives in the markup. To get it to the top of the page, we use position: absolute and position the navigation 0.75em from the top and right of the page. This means that, on screens larger than 750px wide, the navigation leaves the footer and appears at the top right of the website.

The next two patterns are the most common RWD navigational patterns and will need JS. The toggle is a navigation that is hidden in a drawer on small devices. The drawer can then be toggled open and shut using JS. In the RPL example, as seen here, we are using the same navigation as before but giving it a different background color so that we can see this drawer effect more clearly. Look at the first two images to see the drawer closed and then opened. On large screens, the navigation is always visible.

HTML

<body>
  <header>
    <div class="header-inner">
      <h1>Logo</h1>
      <button class="menu-toggle">Menu</button>
    </div>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Our Portfolio</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </header>
</body>

The main difference between this pattern's markup and the past two is a new div tag wrapped around the page heading and the menu button. This helps separate the top section from the navigation on smaller screens. And just like the off canvas layout pattern in Chapter 2, The Main Stage – Building Responsive Layouts, we will be using JS here to toggle a class on the body tag.

CSS

header {
  padding:0;
}

header h1 {
  float: left;
}

nav {
  padding: 0.75em;
  background: lightgray;
  display: none;
}

  nav li {
    padding: 0.25em 0 0 0.5em;
  }
    nav a {
      display: block;
    }

.menu-toggle {
  float: right;
  text-decoration: none;
  padding: 0.5em;
  border: 1px solid lightgray;
  border-radius: 3px;
}
  .menu-toggle:hover {
    background-color: lightgray;
  }

.open nav {
  display: block;
}


@media screen and (min-width: 750px) {
  .menu-toggle {
    display: none;
  }

  nav {
overflow: auto;
display: block;
}
  nav ul {
    float: right;
  }
    nav li {
      display: inline-block;
    }

}

Most of the preceding CSS is just styling the pattern. We are giving the navigation a different background color and styling the menu button and its hover state. Just like in the previous chapter, we are using the .open class to show and hide the navigation. Using JS, we will apply a class of open to the body and style elements on the page with that class. Here, we will set the navigation to display: block when the open class is applied. Using a media query, we will then make sure that the menu button is hidden and the navigation is always shown (by using display: block).

JavaScript

var menuTog = document.getElementsByClassName("menu-toggle")[0];

menuTog.onclick = function() {     
  document.getElementsByTagName('body')[0].classList.toggle('open');
}

The JS for this pattern is the same as the off canvas layout pattern in Chapter 2, The Main Stage – Building Responsive Layouts. For a more in-depth overview of what this JS is doing, please refer to the off canvas pattern in that particular chapter. The JS again is toggling the class open on the body tag when the menu button is clicked. This allows us to toggle the CSS styles that show and hide the navigation on smaller screens.

We have essentially covered the off canvas pattern in Chapter 2, The Main Stage – Building Responsive Layouts. Both the off canvas layout pattern and the off canvas navigation pattern work the same way. The content is hidden off screen until the menu button is clicked. The page then moves to the side, making the off canvas section appear to be shifted back on stage. It uses the same JS as the last pattern as well. View the following example to see the similarities:

HTML

<body>
  <div class="on-canvas">
    <header>
      <div class="header-inner">
        <h1>Logo</h1>

        <button href="#" class="menu-toggle">Menu</button>

        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Our Portfolio</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>

  <nav class="off-canvas">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Our Portfolio</a></li>
      <li><a href="#">Our Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</body>

The biggest difference with the off canvas pattern is that the navigation markup needs to be in two places. Here, we have two main sections, "on canvas" and "off canvas". All of the page's content is within the "on canvas" section, including the navigation we see on larger screens. The "off canvas" section contains the mobile navigation that will push all the on canvas content over. There are more advanced methods to get this pattern to work that don't require duplicating the navigation, but they require about three times the amount of CSS. For now, this approach is widely used and perfectly acceptable.

CSS

The styles for the header and navigation are the same as in the past examples. Since this requires a little more CSS, though, let's look at it piece by piece. To view all the CSS used, visit the live RPL.

.on-canvas nav {
  display: none;
}

.off-canvas {
  display: none;
  width: 200px;
  position: absolute;
  right:0;
  top:0;
  bottom:0;
  background: lightgray;
}

First, we are styling the off canvas navigation. We are hiding it with display:none, but are also setting its location when it does show by positioning it to the top-right corner of the page.

.open .off-canvas {
  display: block;
}

.open .on-canvas {
  width: 100%;
  position: absolute;
  left: -200px;
}

Next we are setting the styles for when the navigation is open. We set the off canvas section to display:block and then shift over the on canvas section by -200px. This offset is not a random number. The -200px gives the off canvas section 200px of screen space. And this is exactly the width of the navigation.

@media screen and (min-width: 750px) {
  nav li {
    display: inline-block;
  }

  .menu-toggle {
    display: none;
  }

  .open .on-canvas {
    position: static;
  }

  .open .off-canvas {
    display: inline-block;
    float:right;
  }

  .open .off-canvas, .off-canvas {
    display: none;
  }
}

Finally, we have the media query. For screens larger than 750px, we hide the menu button and the off canvas navigation. We are then showing the first navigation that is actually in the header, floating it to the right, and styling it to display on one row.

JavaScript

The JS for this is the same as the last pattern. We are just using it to toggle the open class on the body tag again. Isn't it amazing how versatile JS can be? We have used this one JS snippet three times so far!

A navigation pattern that has recently popped up is what I call the overlay menu. On larger screen sizes, it looks the same as the last few patterns we have reviewed. As you can see here, even on small screens, it looks the same. When the navigation is open on smaller screens, though, it looks completely different. The navigation takes up the whole screen and covers the page. The menu is then centered on top of a usually slightly transparent background. The whole navigation is an overlay on top of the page; hence the name.

HTML

<header>
  <div class="header-inner">
  <h1>Logo</h1>
  <button href="#" class="menu-toggle">Menu</button>
  <nav>
    <button class="close">×</button>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Our Portfolio</a></li>
      <li><a href="#">Our Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  </div>
</header>

The HTML for this pattern contains less than the previous ones. The menu does not need to repeat in the markup. No on or off canvas sections are needed either. We will simply be making the navigation appear fullscreen with CSS on smaller screens. The only real addition is the button with a class of close in the nav tag. This button contains an HTML entity for the multiplication symbol (×). As you can see in the example, this is the "x" that pops up when the navigation is open. We will be using JS to close the navigation when that "x" is clicked.

CSS

A little more CSS is needed to get this pattern up-and-running. Most of it is the same as the previous patterns. Let's go through what is new and unique to this pattern:

nav {
    display: none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(255,255,255, 0.8);
    text-align: center;
}

Since we are developing mobile first, the overlay styles are first applied to the nav element. To make the nav element go fullscreen, we will use position: absolute and set each corner to zero. We are also giving the nav element a slightly transparent white background and setting text-align: center. We are then centering the ul containing the navigation items.

nav ul {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

nav a {
    font-size: 2em;
    margin: 0.5em 0;
    line-height: 1;
}

Setting position: absolute and top and left to 50% centers the top-left corner of the ul element. Then, transform: translate(-50%, -50%) moves the element 50% of its own height up and 50% of its own width to the left. Now, the center of the ul element is 50% from the top and left of the nav element instead of its top-left corner. Then, we are adding some styles to the menu links to make them less crowded.

.close {
    border:0;
    background: transparent;
    font-size: 2em;
    color: black;
    position: absolute;
    right:0;
}

.open nav {
    display: block;
}

.open .menu-toggle {
    display: none;
}

Next, we are styling the close button and positioning it in the top-right corner. We are also making sure that the navigation shows and the menu button is hidden when the open class is applied.

@media screen and (min-width: 750px) {
  nav {
    display: block;
    position: static;
    background: transparent;
    text-align: left;
    float: right;
  }

  nav ul {
    position: static;
    transform: translate(0,0);
  }

  nav ul {
    position: static;
    transform: translate(0,0);
  }
    nav li {
      display: inline-block;
    }
      nav a {
        font-size: 1em;
      }

  .menu-toggle, .close {
    display: none;
  }
}

Finally, for larger screens, we are reverting the fullscreen styles for the navigation and hiding the close button.

JavaScript

var menuTog = document.getElementsByClassName("menu-toggle")[0];
var closeTog = document.getElementsByClassName("close")[0];
var body = document.getElementsByTagName("body")[0];

menuTog.onclick = function() {
    body.classList.toggle('open');
}

closeTog.onclick = function() {
    body.classList.toggle('open');
}

The JS for this pattern is almost identical to the other patterns. The only addition is a function to toggle the open class when the close button is clicked. This function works the same as the first, but is just detecting a click on a different element.

Websites using this pattern typically have big beautiful images displaying their work or company. For the sake of this example, I grabbed a pattern from Subtle Patterns (http://subtlepatterns.com/) and created two images: banner-2000.png and banner-1400.png. As we saw earlier in this chapter, these big hero images normally have text overlaid on top of them. As you can see in the following image, we are doing just that:

Right now, there is not much going on with this pattern. This is on purpose. There is a lot you can do with big hero images. You can overlay other images, navigation, and more text. But this pattern right here shows you the basics.

HTML

<header>
  <img class="banner-img" src="i/banner-1400.png" srcset="i/banner-2000.png 2x"  sizes="100vw" alt="Banner Image"/>

  <div class="banner-overlay">
    <h1>Company Name</h1>
    <p>A very catchy and cool tagline.</p>
  </div>
</header>

The markup in this pattern consists of a header tag containing the image to go full span and the text. The image has a class of banner-img that we will use in the CSS. There is a div element with a class of banner-overlay containing h1 and p tags.

We are also using the srcset attribute here. It looks a little different though. This time we added the sizes attribute to the image tag. This gives the browser information about how much space the image will take up. Setting sizes to 100vw is saying that the image will take up 100% of the page's width. The unit vw stands for viewport width. One unit of vw is 1% of the containing element. Since the header tag spans the full width of the page already, sizes="100vw" is saying take up 100% of that space too. This is just giving the browser more information to help pick the best image to display.

CSS

header {
  position: relative;
}

.banner-img {
  width: 100%;
}

.banner-overlay {
  position: absolute;
  text-align: center;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

First, we set the header's position to relative. We do this because we want to position one of its children, .banner-overlay, relative to it. We then set the image's width to 100% since spanning the full width of the page is the whole point of this example.

For .banner-overlay, we are setting position to absolute since we will be moving it on top of the image. Since header is relative, .banner-overlay will move relative to it instead of to the browser's window. We are then centering the overlay in two different ways. First, text-align: center is centering the text while the last three lines are centering the overlay in the middle of the header element. We went over this centering technique in Chapter 3, Make Way for Responsive Navigations, for the overlay navigation pattern. If you are interested in using another centering technique, flexbox has its own solution. To use this, apply these settings to the parent of the item you wish to center:

display:flex;
justify-content:center;
align-items:center;

If the child you are trying to center is text, the only other thing you need to do is apply text-align:center to that child so the text is centered too

Whether it is a search results page or an image gallery, at some time in your career, you will need to create an image grid. Just like we arranged multiple columns and rows of articles in Chapter 2, The Main Stage – Building Responsive Layouts, we can create a grid of images. This can be as simple or complex as you like. This biggest question here is, How many images will appear per row? And how will this number change on different screen sizes? In our example here, one row is going to be comprised of 1, 2, 4, and 6 images per row from small to large screens. You may need more or fewer steps in between the smallest and largest screen sizes for your site, though.

To make this happen, we will style for the smallest first; one image per row. That's pretty easy. Then, we will be using media queries to add more images per row.

HTML

<ul class="img-grid">
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
  <li><img src="http://placehold.it/400" alt="Thumbnail" /></li>
</ul>

For the HTML, there is nothing special here. We have an unordered list with a class of img-grid and 12 list items. Each list item holds an image that will appear in our grid.

CSS

.img-grid {
  padding:0.15em;
  margin:0;
}

.img-grid li{
  list-style: none;
  padding: 0.30em;
}

.img-grid img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

The CSS is controlling everything here. We are first setting the padding on the <ul> and taking off any margins. The padding is set to 0.15em because this is half of what the padding on each <li> will be. On the <li> elements, we will set list-style to none to get rid of the bullets and then giving each one padding.

For the images, we are setting them to scale with max-width: 100% and height: auto. The last declaration sets vertical-align to bottom. If we didn't do this, there would be a 4px gap under each image. Images are inline elements and sit on the baseline like text would. This gap underneath the images is actually room for a descender (like that found in the lowercase "j" or "g"). Setting vertical-align: bottom gets rid of this extra space.

/*2 in a row*/
@media screen and (min-width: 600px) {
  .img-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .img-grid li {
    width: 50%;
  }
}

/*4 in a row*/
@media screen and (min-width: 800px) {
  .img-grid li {
    width: 25%;
  }
}

/*6 in a row*/
@media screen and (min-width: 1200px) {
  .img-grid li {
    width: 16.66%;
  }
}

Now, we start to get into the media queries. Without them, we would have one column of images. In the first media query, we apply flexbox styles and set them each to be 50% wide. For flexbox to work the way we want, we will set flex-direction to row and flex-wrap to wrap. This is saying that we want our flexbox items, <li>, to be organized in rows going left to right. Other flex-direction properties are row-reverse, column, and column-reverse. Flexbox will also naturally try to put everything on one line. Setting flex-wrap:wrap stops this. Other properties for flex-wrap are nowrap and wrap-reverse. From here, we only have to change the width of each <li>. If we want four images per row, we will set their widths to 25%. If we want 6, each is 16.667%.

Flexbox is not supported by IE9 and earlier. If you need to support these browsers, you can use float instead of flexbox. This solution can be found commented out in the style section of this pattern on the RPL.

As mentioned, you can host your videos yourself or through a third party. Both can be responsive, but using the HTML5 video element makes it a lot easier. For my example, I am using a video of an animated series I worked on. If you don't have your own video, feel free to practice with these (for example, http://chelmyers.github.io/RPL/media/v/cbmd.mp4). In the following screenshot, you can see this video scaling along with the browser:

HTML