Demos Grid system

A very exciting yacht race. — This uses a a mobile first approach with 5 breakpoint. It only loads images as each breakpoint matches.

HTML

<picture width="100%" height="100%">
<!-- Mobile Layout -->
<source media="(max-width: 30em)" src="img/yacht_race@mobile.jpg">
<!-- Wide Mobile Layout -->
<source media="(min-width: 30em) and (max-width: 48em)" src="img/yacht_race@wide-mobile.jpg">
<!-- Tablet Layout -->
<source media="(min-width: 48em) and (max-width: 60em)" src="img/yacht_race@tablet.jpg">
<!-- start: Stationary Devices -->
<source media="(min-width: 60em) and (max-width: 80em)" src="img/yacht_race@desktop.jpg">
<!-- Source intended for: Notebooks and normal Desktop Layouts -->
<source media="(min-width: 80em)" src="img/yacht_race@hires.jpg">
<!-- fallback img if picture is not supported -->
<img src="img/yacht_race@fallback.jpg" alt="A very exciting yacht race.">
<!-- alternate text -->
<p>A very exciting yacht race.</p>
</picture>

Credits

Author: Andreas Klein / @ixisio

Hosting and bandwidth for these demos is provided by CDNConnect.com