Foundation CSS Interchange

The Foundation CSS Interchange component allows you to dynamically swap content based on screen size or media queries. This is particularly useful for delivering different images or content variations to users based on their device or viewport size.

1. Basic Usage

To use the Interchange component, wrap the content variations you want to swap inside a container element and add the data-interchange attribute to the container. Then, specify the paths to the different content variations using the format [path-to-small-image] [path-to-medium-image] [path-to-large-image].

Example markup for basic usage:

<div data-interchange="[small.jpg], [medium.jpg], [large.jpg]">
  <img src="small.jpg" alt="Small Image">
  <img src="medium.jpg" alt="Medium Image">
  <img src="large.jpg" alt="Large Image">
</div>

This will load the appropriate image based on the screen size or media query.

2. Multiple Content Types

In addition to images, you can use Interchange to swap other types of content, such as HTML fragments or entire sections of markup. Simply provide the paths to the different content variations separated by commas.

Example markup with multiple content types:

<div data-interchange="[small.html], [medium.html], [large.html]">
  <div>Small Content</div>
  <div>Medium Content</div>
  <div>Large Content</div>
</div>

In this example, different HTML fragments will be loaded based on the screen size or media query.

3. Advanced Usage

For more advanced usage, you can specify media queries directly within the data-interchange attribute to target specific screen sizes or device orientations. This allows for precise control over when content variations are swapped.

Example markup with media queries:

<div data-interchange="[small.jpg] small, [medium.jpg] medium, [large.jpg] large and (orientation: landscape)">
  <img src="small.jpg" alt="Small Image">
  <img src="medium.jpg" alt="Medium Image">
  <img src="large.jpg" alt="Large Image">
</div>

In this example, different images will be loaded based on screen size and device orientation.

Conclusion

The Foundation CSS Interchange component provides a flexible and powerful solution for delivering different content variations to users based on their device or viewport size. By leveraging data attributes and media queries, you can easily swap images, HTML fragments, or other types of content to create responsive and adaptive web experiences that cater to a wide range of devices and screen sizes.

Archive