Responsive Pattern Lib.

Media

Section description.

Basic Scaling ImagesView Example

Example

HTML


<img src="http://placehold.it/800x400" alt="A basic scaling image"/>

CSS


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

Picture ElementView Example

A responsive image solution using picture, source, and img elements.

Example

HTML


<picture>
	<source
	  media="(min-width: 1000px)"
	  srcset="i/1920.png"/>
	<source
	  media="(min-width: 500px)"
	  srcset="i/1000.png"/>
	<img
	 src="i/500.png"
	 alt="Featured Image"/>
</picture>

CSS


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

SRCSET AttributeView Example

A responsive image solution using the img element and the srcset attribute.

Example

HTML


<img src="i/1000.png" srcset="i/1920.png 2x" alt="Featured Image"/>

CSS


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

Big Hero ImageView Pattern

Easy Add large beautiful images to websites with text overlaid on top. A very popular pattern for company website's homepage today.

  • Pros:

  • This pattern can make really stunning websites when the right media is used
  • This pattern is easy to implement

  • Cons:

  • Large images can take long to load (which temporarily ruins the user experience of the site)
  • Taking up the whole screen means more scrolling/clicking for the user to get to where they need to be (not a great pattern for content-driven websites)

Example

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>

CSS


header {
	padding:0;
	margin:0;
	position: relative;
}

.banner-img {
	width: 100%;
}

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

Image GridView Pattern

Easy Showoff thumbnails or galleries in a grid system where the amount of items per row change with the browser's size.

  • Pros:

  • Great way to show off a collection
  • Easy to create

  • Cons:

  • This pattern needs more media queries to ensure image quality across screen sizes (to avoid images scaling too big or too small)

Example

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>

CSS


section {
	padding:0;
}

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

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



/*Float Solution*/
section {
	padding:0;
}

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

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

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

/*2 in a row*/
@media screen and (min-width: 600px) {
	.img-grid li {
		float: left;
		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%;
	}
	.img-grid li:nth-child(5n+1) {
		clear:right;
	}
}

Responsive HTML5 VideoView Example

Example

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>

CSS


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

Responsive IframeView Example

Example

HTML


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

CSS


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

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

Full Span VideoView Example

Easy A full span ambient video background that automatically plays and loops with text overlaid.

  • Pros:

  • Ambient background videos are trendy right now and highly demanded by clients
  • An elegant pattern that can show off visually since it is a video

  • Cons:

  • Users have to load a whole video to get the effect
  • Video does not autoplay on smartphones

Example

HTML


<header>
  <img class="fallback" src="i/kaleidoscope-fallback.png" alt="kaleidoscope"/>

  <video autoplay loop>
    <source src="v/kaleidoscope.mp4" type="video/mp4"/>
    <source src="v/kaleidoscope.webm" type="video/webm"/>
    <source src="v/kaleidoscope.ogv" type="video/ogv"/>
    <img src="i/kaleidoscope-fallback.png" alt="kaleidoscope"/>
  </video>

  <div class="banner-overlay">
    <h1>Company Name</h1>
  </div>
</header>

CSS


video, img {
	width: 100%;
}

video {
	display: none;
}

header {
	position: relative;
}

.banner-overlay {
	background: rgba(0, 0, 0, 0.3);
	color: white;
	text-align: center;
	padding: 20px;
	position: absolute;
	top:50%;left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

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

	video {
		display: block;
	}
}