Open In App

Foundation CSS JavaScript using Plugins

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 13 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads