Foundation CSS Kitchen Sink Equalizer - Coding

Foundation CSS is one of the popular front-end frameworks. It helps developers to add complex components to their websites very easily. It enables us to add various advanced components like accordions, breadcrumbs, buttons, and many more to the website. Thus, making the website more professional to use and also making it user-friendly.

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. In this article, we will learn about the Equalizer component present in the Kitchen Sink page of the Foundation CSS. The Equalizer component is very useful in modern websites where we need to make different components to be equal in height when they are arranged in vertical or horizontal order in the website.

Foundation CSS Equalizer Data Attributes:

data-equalizer: This attribute is added to the parent container component which holds the child elements which will be equalized.
data-equalize-on: This attribute holds the value of the screen size for which the elements shall be equalized. It can have values like small, large, and medium respectively. It is added to the parent component.
data-equalizer-watch: This attribute is added to the child elements. It contains the value of the parent equalizer id.
data-equalize-by-row: This attribute is very useful in distributing elements in rows.
data-equalize-on-stack: This attribute enables the height equalization of elements when stacked in a row.

Note: The Equalizer component does not require any specific class.

Syntax:

<div class="grid-x grid-margin-x"
     data-equalizer="equalize1"
     data-equalize-on="medium">
    <div class="cell medium-3">
        <div data-equalizer-watch="equalize1">
            ...
        </div>
    </div>
    ...
</div>

Example 1: In this example, we have 4 columns of different sized images and texts and we want them to be equal height when placed horizontally on the website.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink Equalizer</title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"> 
</head> 
  
<body> 
    <h1>Foundation CSS Equalizer</h1> 
    <h2 style="color: green;">GeeksForGeeks</h2> 
    <div class="grid-x grid-margin-x"
         data-equalizer  
         data-equalize-on="medium"
         id="test-eq"> 
        <div class="cell medium-3"> 
            <div class="callout"
                 data-equalizer-watch> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png"> 
            </div> 
        </div> 
        <div class="cell medium-3"> 
            <div class="callout"
                 data-equalizer-watch> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png"> 
            </div> 
        </div> 
        <div class="cell medium-3"> 
            <div class="callout"
                 data-equalizer-watch> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220302090848/star5.png"> 
                <p>This article in on the Equalizer 
                   Component of Foundation CSS. It  
                   is published in GeeksforGeeks 
                   Platform.</p> 
  
            </div> 
        </div> 
        <div class="cell medium-3"> 
            <div class="callout" data-equalizer-watch> 
                <p>This article in on the Equalizer 
                   Component of Foundation CSS. It is 
                   published in GeeksforGeeks 
                   Platform.</p> 
  
            </div> 
        </div> 
    </div> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"> 
    </script> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Foundation CSS Kitchen Sink Equalizer

Example 2: In this example, we are having 2 rows in which the first column has 3 rows and the second column has 4 rows respectively and we have stacked them in equal height using the Kitchen Sink Equalizer attributes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink Equalizer</title> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"> 
</head> 
  
<body> 
    <h1>Foundation CSS Equalizer</h1> 
    <h2 style="color: green;">GeeksForGeeks</h2> 
    <div class="grid-container"> 
        <div class="grid-x grid-margin-x" 
             data-equalize-on="medium" 
             data-equalizer="eq1"> 
            <div class="cell medium-4"> 
                <div class="callout"
                     data-equalizer-watch="eq1"
                     data-equalizer="eq1.1" 
                     data-equalize-on-stack="true"> 
                    <h3>First Column</h3> 
                    <div class="callout"
                         data-equalizer-watch="eq1.1"> 
                        <p>This article in on the Equalizer Component  
                            of Foundation CSS. It is published in 
                            GeeksforGeeks Platform.This article in 
                            on the Equalizer Component of Foundation CSS. 
                            It is published in GeeksforGeeks Platform 
                        </p> 
  
                    </div> 
                    <div class="callout" data-equalizer-watch="eq1.1"> 
                        <p>This article in on the Equalizer Component of 
                           Foundation CSS. It is published in GeeksforGeeks  
                           Platform 
                        </p> 
  
                    </div> 
                </div> 
            </div> 
            <div class="cell medium-4"> 
                <div class="callout"
                     data-equalizer-watch="eq1"
                     data-equalizer="eq1.2" 
                     data-equalize-on-stack="true"> 
                    <h3>Second Column</h3> 
                    <div class="callout"
                         data-equalizer-watch="eq1.2"> 
                        <p>This article in on the Equalizer Component 
                           of Foundation CSS. It is published in 
                           GeeksforGeeks Platform.This article in on  
                           the Equalizer Component of Foundation CSS. 
                           It is published in GeeksforGeeks Platform 
                        </p> 
  
                    </div> 
                    <div class="callout" data-equalizer-watch="eq1.2"> 
                        <p>This article in on the Equalizer Component of 
                           Foundation CSS. It is published in 
                           GeeksforGeeks Platform 
                        </p> 
  
                    </div> 
                    <div class="callout" data-equalizer-watch="eq1.2"> 
                        <p>This article in on the Equalizer Component 
                           of Foundation CSS. It is published in 
                           GeeksforGeeks Platform 
                        </p> 
  
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"> 
    </script> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Foundation CSS Kitchen Sink Equalizer

Reference: https://get.foundation/sites/docs/kitchen-sink.html#equalizer

Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
Tensorflow.js tf.callbacks.earlyStopping() Function
How to open an XML file ?
Angular Material Tree
How to define structure of XML document ?
How to connect ReactJS as a front-end with PHP as a back-end ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	10