Open In App

Foundation CSS Interchange

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. It also has a lot of website components that make our website look more professional.

In this article, we will learn about the Foundation CSS Interchange component. This component helps us to load responsive content with the help of media queries. Now, the question may arise, in CSS we have media queries to do the same thing, then what is the advantage of using Interchange? The reason is that while using media queries the websites loads all the images and components irrespective of their usage in the particular screen size but when we are using Interchange, the website, loads on the specific components and images required for the particular screen size. 

For example, The Interchange component will only load the medium size image for medium size screen and not the large and the small size images. Thus, using Interchange saves the bandwidth of the mobile network. Now, in this article, we will learn about the Interchange component in Foundation CSS. 

Foundation CSS Interchange Attribute:

  • data-interchange: This attribute is used to specify all the images or HTML documents that have to be displayed according to the size of the page.

1. Use with Images: It helps to load a particular size image for a particular size of the screen. Like large images for large screens, small images for smaller screens, and so on.

Syntax: In the below syntax, the image path is the relative or absolute path of the image and media-query can be any CSS media-query or Foundation breakpoint.

data-interchange="[image path, media-query],
    [image path 2, media-query2], ..."

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <img data-interchange=
        alt="this is my img alt tag..." />
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

2. Use with HTML: It helps to load an HTML document for a particular size of the screen.

Syntax: In the below syntax, the html-file-path is the relative or absolute path of the HTML document and media-query can be any CSS media-query or Foundation breakpoint.

data-interchange="[html-file-path, media-query], [html-file-path 2, media-query2], ..."

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <div data-interchange=
"[default.html, default],[Small.html, small],[medium.html, medium],[Large.html, large]">
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Note: We have created the individual files with file names “default.html”, “Small.html”, “medium.html”, and “Large.html”. So, you also have to create the individual files in your local system.

3. Use with Background Images: When using interchange on a non-image element, we can add image paths instead of HTML paths. This will change the element’s background-image property according to the screen sizes. 

Example: In the below example, we have used the interchange component with the <div> tag.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <div data-interchange=
        alt="this is my img alt tag...">
        <p>
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
        <p>
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
        <p>
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
        <p>
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

4. Named Media Queries: The below table lists all the available named media queries:

Query Name Media Query
small screen and (min-width: 0em)
medium  only screen and (min-width: 40em)
large only screen and (min-width: 64em)
xlarge only screen and (min-width: 75em)
xxlarge only screen and (min-width: 90em)
portrait screen and (orientation: portrait)
landscape               screen and (orientation: landscape)
retina only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)

Programmatic Use: The ruleset in the options objects has to be passed if one needs to use Foundation in a programmatic way.

var element = $('.container');
var interchange = new Foundation.Interchange(element, {
    rules : [
        "path , media query",
        ...
    ]
});

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <div class="container">
        <p>
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
  
        <p>
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
  
        <p>
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
  
        <p>
            This is the sample text inside for the website.
            This is a article on Foundation CSS Interchange
            component and it's use cases.This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        </p>
    </div>
    <script>
        var container = $('.container');
        var interchange = new Foundation.Interchange(container, {
            rules: [
            ]
        });
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Reference: https://get.foundation/sites/docs/interchange.html



Last Updated : 30 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads