Foundation CSS Kitchen Sink Interchange

Last Updated : 10 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and 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. In this article, we will discuss the Kitchen Sink Switch in Foundation CSS.

The Kitchen Sink is a page in Foundation CSS in which all the major components are listed with their codes. It contains all the basic templates of each component with its code. The Interchange Component in Foundation CSS is useful in creating responsive website designs. It helps to load different web layouts or different images on the same website based on the screen size. Using this component, we can load a large size image for large screen size, a medium-size image for medium screen size, and a small size image for small screen size.

Foundation CSS Kitchen Sink Interchange Attribute:

data-interchange: This attribute takes all the file paths of the images/HTML pages that are needed to render along with their media query in the form of an array.

Syntax:

<img data-interchange = “[ img_path1 , media query ] , 
                         [ img_path2 , media query ] , 
                         [ img_path3 , media query]  , …”
      src="#" 
      alt="img">

Example: The below example describes the Kitchen Sink Interchange in Foundation CSS where we have added different size images for different screen sizes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink Interchange</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
          crossorigin="anonymous"> 
    <title> 
        Foundation CSS Kitchen Sink Interchange 
    </title> 
</head> 
  
<body>  
    <img data-interchange= 
"[https://media.geeksforgeeks.org/wp-content/uploads/20220308123701/image1.jpg, default],  
 [https://media.geeksforgeeks.org/wp-content/uploads/20220308123703/image3.jpg, small size],  
 [https://media.geeksforgeeks.org/wp-content/uploads/20220308123702/image2.jpg, medium], 
 [https://media.geeksforgeeks.org/wp-content/uploads/20220308123701/image1.jpg, large]"  
         alt="this is my img alt tag..." /> 
    <script src="js/app.js"></script> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/what-input.js"></script> 
    <script src="js/vendor/foundation.min.js"></script> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>