Responsive Pattern Lib.

Layouts

Section description.

Tiny TweaksView Pattern

Easy A simple layout that does not change much from small to large screens. Common changes may include font sizes, padding values, and elements displayed on page.

  • Pros:

  • The easiest layout to create that you will come across
  • Less debugging needed across multiple devices

  • Cons:

  • Cannot hold a lot of content and limited to simple content

Example

HTML


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

<section>
  <p>Paragraph (p) - Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.<p>

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

	<p>Paragraph (p) - Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>

	<ul>
    <li>List Item 1. Objectively innovate empowered manufactured products whereas parallel platforms.</li>
    <li>List Item 2. Proactively envisioned multimedia based expertise and cross-media growth strategies.</li>
    <li>List Item 3. Completely pursue scalable customer service through sustainable potentialities.</li>
  </ul>
</section>

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

Mostly FluidView Pattern

Easy This most popular layout is based on a fluid grid. The grid then uses media queries to shift columns to span full width and fit better on smaller screens.

  • Pros:

  • Easy to implement
  • Can be used in simple and complex design systems

  • Cons:

  • On devices with less resolution, all content gets stacked in one column and the page can get long

Example

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

CSS


body {
  font-size: 1em;
}

header, section {
  padding:0.75em;
}

section, article {
  overflow: auto;
}

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

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

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

  .primary img {
    float:left;
    margin: 0 0.5em 0.5em 0;
  }
  .secondary {
    width: 33.33%;
    float: left;
  }
}

Column DropView Pattern

Easy A mulitple column layout that stacks to one column on smaller devices.

  • Pros:

  • Very simple to set up
  • Organizes small and large amounts of content effectively

  • Cons:

  • On devices with less resolution, all content gets stacked in one column and the page can get long

Example

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 markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
  <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
  <p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service..</p>
</section>

<aside>
  <h3>Heading 3</h3>
  <p>Paragraph (p) - Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.</p>
</aside>

CSS


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

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

	section {
		width: 50%;
	}

	aside, section {
		float: left;
	}
}

Layout ShifterView Pattern

Medium Instead of only having one media query, the layout shifter pattern tends to have more. This pattern becomes more complicated but also allows greater control over how the design looks at different sizes. Basically, the layout changes more dramatically at different breakpoints.

  • Pros:

  • Increased control of appearance on different screen sizes
  • Creates more scalable designs

  • Cons:

  • More complicated styles needed

Example

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 markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
	<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
	<p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service..</p>
</section>

<article class="secondary">
	<h3>Secondary Article (h3)</h3>
	<p>Paragraph (p) - Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p>
</article>
<article class="secondary">
	<h3>Secondary Article (h3)</h3>
	<p>Paragraph (p) - Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p>
</article>
<article class="secondary">
	<h3>Secondary Article (h3)</h3>
	<p>Paragraph (p) - Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p>
</article>
<article class="secondary">
	<h3>Secondary Article (h3)</h3>
	<p>Paragraph (p) - Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p>
</article>
<article class="secondary">
	<h3>Secondary Article (h3)</h3>
	<p>Paragraph (p) - Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p>
</article>
<article class="secondary">
	<h3>Secondary Article (h3)</h3>
	<p>Paragraph (p) - Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p>
</article>

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

Off CanvasView Pattern

Hard This pattern requires JavaScript but is an elegant solution to creating more screen space on smaller screens. Sections of the layout appear to be "off canvas" or "off screen" and pop in when needed.

  • Pros:

  • Provides more space on smaller screens by hiding elements
  • Elegant functionality

  • Cons:

  • More complex to implement and harder to get right across all devices

Example

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 empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
		<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
		<p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service..</p>
	</section>
</body>

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

JS


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

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