Foundation CSS Reveal Sizing
Last Updated :
07 Mar, 2022
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 that 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.
Reveal is the modal or popup window that is used to show some information when we click the button. We can show the content in the popup window without navigating to another page. Foundation CSS has multiple variations of the Reveal element such as sizing, nested, and full screen.
In this article, we will learn about the sizing various of Foundation CSS Reveal. The size variations of the reveal element help us to set the width of the modal. To create a size variation of the Foundation CSS Reveal, we use the size classes along with the .reveal class. Following are the size classes in the Foundation CSS reveal
Foundation CSS Reveal Sizing Classes:
- tiny: This class makes modal 30% wide.
- small: This class makes modal 50% wide.
- large: This class makes modal 90% wide.
- full: This makes the modal to be full screen i.e. to take 100% of available width and height.
Syntax:
<div class="reveal Reveal-Sizing-Classes" data-reveal>
....
</div>
Example 1: This example demonstrates the tiny and small size variation of the reveal in the Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Basics</h3>
<div class="reveal tiny"
id="revealContent1"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<div class="reveal small"
id="revealContent2"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<button class="button"
data-open="revealContent1">
Reveal this in tiny
</button>
<button class="button"
data-open="revealContent2">
Reveal this in small
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Reveal Sizing
Example 2: This example demonstrates the large and full-size variation of the reveal in the Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal </h3>
<div class="reveal large"
id="revealContent1"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<div class="reveal full"
id="revealContent2"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<button class="button"
data-open="revealContent1">
Reveal this in large
</button>
<button class="button"
data-open="revealContent2">
Reveal this in full
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Reveal Sizing
Reference: https://get.foundation/sites/docs/reveal.html#sizing
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...