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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </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:

Example 2: This example demonstrates the large and full-size variation of the reveal in the Foundation CSS.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </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:

Reference: https://get.foundation/sites/docs/reveal.html#sizing

Foundation CSS Reveal Sizing

mishrapriyank17

Improve

Article Tags :

Foundation CSS Reveal Sizing

Similar Reads

Thank You!

What kind of Experience do you want to share?