Foundation CSS Reveal Sass Reference
Last Updated :
27 Sep, 2022
The Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on Bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.
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. We can use the reveal class to create the popup window in Foundation CSS.
Variables Used:
| Variable-Name |
Description |
Type |
Default Value |
| $reveal-background |
This variable is used to define the default background color of a modal. |
Color |
$white |
| $reveal-width |
This variable is used to define the default width of a modal, with no class applied. |
Number |
600px
|
| $reveal-max-width |
This variable is used to define the default maximum width of a modal. |
Number |
$global-width
|
| $reveal-padding |
This variable is used to define the default padding inside a modal. |
Number |
$global-padding
|
| $reveal-border |
This variable is used to define the default border around a modal. |
Number |
1px solid $medium-gray
|
| $reveal-radius |
This variable is used to define the default radius for the modal. |
Number |
$global-radius
|
| $reveal-zindex |
This variable is used to define the z-index for modals. |
Number |
1005 |
| $reveal-overlay-background |
This variable is used to define the background color of modal overlays. |
Color |
rgba($black, 0.45)
|
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the reveal class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<div class="reveal" id="revealContent" 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="revealContent">
Reveal this
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
SASS Code:
$reveal-background:white;
.reveal {
background-color:$reveal-background;
}
Compiled CSS Code:
.reveal {
background-color:white;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the reveal class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<div class="reveal" id="revealContent" 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="revealContent">
Reveal this
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
SASS Code:
$reveal-width:600px;
.reveal {
width:$reveal-width;
}
Compiled CSS Code:
.reveal {
width: 600px;
}
Output:
Reference: https://get.foundation/sites/docs/reveal.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...