Foundation CSS JavaScript using Plugins

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.

Output:

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

Output:

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