Foundation CSS JavaScript using Plugins
Last Updated :
13 Jul, 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 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/[email protected]/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/[email protected]/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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<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=
"https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/foundation.min.js">
</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
Similar Reads
Foundation CSS JavaScript Programmatic Use 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
4 min read
Foundation CSS JavaScript Configuring Plugins Foundation CSS is an open-source front-end framework that is used to create a beautiful responsive website, apps, or email quickly and easily. ZURB published it in September of that year. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, make use of it. This framework, which
3 min read
Foundation CSS JavaScript A 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. The framewor
4 min read
Foundation CSS JavaScript Utilities Foundation JavaScript Utilities is a collection of tools that can be used to enhance the functionality of your Foundation website. To use Foundation JavaScript Utilities, you first need to include the foundation.js file in your website. Once you have done this, you can use the various utilities by c
4 min read
Foundation CSS JavaScript Miscellaneous Utilities Foundation CSS is a responsive front-end framework for building web applications. It includes a set of CSS styles and JavaScript functions that can be used to create a responsive layout and add interactivity to a website. Foundation CSS JavaScript miscellaneous utilities: Foundation.GetYoDigits([num
4 min read