Visibility classes let us show web page elements that are appropriate for certain devices. For example, sometimes we want small images on small screens, but larger versions for desktop browsers. Other times, we don't want to burden mobile users with full desktop navigation bars. Visibility classes let us hide design elements that are inappropriate for each viewport.
But users still have to download both versions, wasting time, browser memory and bandwidth. So we built Interchange and baked it into Foundation, the easiest way to selectively add content to your page based on a media query. With Interchange, each browser downloads what they need, not what every browser might possibly need. In this blog post we'll cover some basic ways you can use Interchange with HTML content.
If you'd like to follow along you can download the zip package. It contains everything you need to get started!
Conventions and Caveats
Interchange is pretty flexible, but for the purposes of this blog post we've done the following:
- All external HTML files that are loaded into Interchange have been placed in the partials/ folder. We'll refer to these files as partials in this post.
- The zip file mentioned earlier contains all partial code needed. All Interchange links are intentionally commented out.
Interactive Content
In this first example we'll use Interchange to:
- Display a static map image by default
- Display an interactive map for large screens
Within the zip file, we've included the following partials:
partials/
static_map.html
interactive_map.html
We'll load the following partials in with Interchange in the maps.html file:
- partials/static_map.html: Load this content by default (if there's not another media query that is more specific)
- partials/interactive_map.html: Load this content when on a large device (currently defined as screen min-width of 1024px)
So let's start by enabling Interchange on our page. We'll add some default text that says "Loading map...":
<div data-interchange>
Loading map...
</div> Then we'll modify data-interchange to tell it which partials to load with Interchange's built-in default and large named media queries.
<div data-interchange="[partials/static_map.html, (default)], [views/interactive_map.html, (large)]">
Loading map...
</div>
And voilà, you're all set! Take a look at the demo in the same ZIP file you downloaded to see it in action.
Visibility
There are some cases where you only want to show certain content on particular screen sizes. Consider a photo gallery. Using visibility classes you could hide the content, but it would still load in the background. Not ideal!
Using Interchange it's possible to only show/load this content on appropriate devices. So for small devices we can skip loading some content all together, making your site a little faster.
So in this case we have a partials/image_gallery.html file that loads in a bunch of images. To only display this content on large screens just use the following markup:
<div data-interchange="[partials/image_gallery.html, (large)]"></div>
NOTE: If you resize your window after the content has loaded it will not be automatically removed. This happens if there's no matching media query. This won't occur on mobile devices so there's no need for concern.
Check out the demo in your ZIP file.
Branding
One of the final use cases for Interchange is for selectively adding dynamic content to your page. Let's consider a hero unit. On small screens we want something nice and simple, but we want more animations on larger screens.
Inside our project we have the following partials available:
partials/
simple_branding.html
animated_branding.html
Inside of our partials/animated_branding.html file we include links to external javascript files, include audio assets, and embed some styles here. This just showcases what's possible. Here's what the code looks like in our partial:
<div id="hero-unit">
<audio id="meow" src="audio/rainbow.wav"></audio>
<audio id="chipmunk" src="audio/chipmunk.mp3"></audio>
<img id="grumpy-cat" src="img/grumpy-cat.png">
</div>
<style>
#hero-unit {
position: relative;
height: 250px;
overflow: hidden;
}
#hero-unit span {
}
#grumpy-cat {
position: absolute;
bottom: -150px;
left: 20px;
}
</style>
<script>
// JavaScript animations go here
</script> Now this is something that we probably don't want to display on small screens so we'll use Interchange to load in a simple banner. To do so just use the following markup on your page:
<div data-interchange="[partials/simple_branding.html, (default)], [partials/animated_branding.html, (large)]">
Loading branding...
</div> This code will help you make your websites more adaptable than ever. Once again, check out the demo in your ZIP file to see it in action. Then go forth and build something cool. Happy holidays!