Skip to content
Related Articles

Related Articles

Foundation CSS JavaScript using Plugins

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jul, 2022
View Discussion
Improve Article
Save Article

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 to 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.

In this article, we will learn Foundation CSS Javascript using plugins. The Plugins are attached to HTML elements using data attributes. The data attribute will match the name of the plugin.

The following links are included in the head section of the HTML file for the plugins to work. Only a few code examples are given below, the developer can use other data attributes as per the need.

CDN link:

    <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css”> 
   <!– Compressed JavaScript –>
   <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”>   </script>
   <script src=”https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js”> </script>

Example 1: To create or add a tooltip link, we have to use data-tooltip to an HTML element.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
    <link rel="stylesheet" href=
    <style>
        body {
          margin-left:10px;
          margin-right:10px;
        }
    </style>   
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS JavaScript using Plugins</h3>
    <div id="divID">
        <p>
          <span data-tooltip aria-haspopup="true" class="has-tip" 
               tabindex="1" title="foundation CSS tooltip">
               This is example of data-tooltip creating a link
          </span>
        </p>
    </div>
</body>
</html>


Output:

 

Example 2: To create an accordion, we have to use data-accordion to an HTML element.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
  
       <link rel="stylesheet" href=
    
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>    
    <style>
       body {
         margin-left:10px;
         margin-right:10px;
       }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS JavaScript using Plugins</h3>
    <div id="divID">
        <ul class="accordion" data-accordion>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">Accordion 1</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 1</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">Accordion 2</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 2</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">Accordion 3</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 3</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">Accordion 4</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 4</p>
                </div>
            </li>      
        </ul>        
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

 

Reference Link: https://get.foundation/sites/docs/javascript.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!