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.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Equalizer</title>
<link rel="stylesheet" href=
</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=
</div>
</div>
<div class="cell medium-3">
<div class="callout"
data-equalizer-watch>
<img src=
</div>
</div>
<div class="cell medium-3">
<div class="callout"
data-equalizer-watch>
<img src=
<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=
</script>
<script src=
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
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.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Equalizer</title>
<link rel="stylesheet"
href=
</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=
</script>
<script src=
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Equalizer
Reference: https://get.foundation/sites/docs/kitchen-sink.html#equalizer