Skip to content
Related Articles

Related Articles

Foundation CSS Reveal Sass Reference

Improve Article
Save Article
  • Last Updated : 27 Sep, 2022
Improve Article
Save Article

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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!