Foundation CSS JavaScript Utilities Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 calling the corresponding function. For example, to create a custom animation, you would use the Foundation.Move() function. SyntaxThe syntax for calling a Foundation JavaScript Utility function is as follows:Foundation.[Utility Name]([Arguments]); Selector EngineThe Foundation framework uses its own selector engine called "Big S". It is based on the native browser API querySelectorAll(), but it is optimized for performance. Foundation's Big S selector engine is about 20% faster than jQuery's selector engine.To use Foundation's Big S selector engine, you can use the s() function. For example, the following code would return a list of all the <div> elements with the class container:let element = s('.container');Throttle and DebounceThrottle and debounce are two techniques used to prevent a function from being called too often.Throttle: Throttling is a technique where you control the frequency of function execution. It ensures that the function doesn't execute more than once every X milliseconds.Debounce: Debouncing is a technique where you ensure that a function doesn't execute until after a certain amount of time has passed since it was called.In the Foundation framework, throttle and debounce are implemented using the Foundation.Throttle() and Foundation.Debounce() functions. The syntax for both functions is the same:Foundation.[Throttle/Debounce](functionToThrottleOrDebounce, waitTime, [callback]);Data OptionsData Options allow you to customize the behavior of certain Foundation components and plugins directly from the HTML markup.To use data options, you add data attributes to the element that you want to configure. The data attributes have the following format:data-[plugin-name]-[option-name]="[value]"Media QueriesMedia queries in the Foundation framework are used to change the behavior of Foundation components based on the size of the viewport. They are typically used to change the layout of a component or to add or remove functionality.To use media queries, you add media queries to the CSS rules that you want to apply to a Foundation component. The media queries have the following format:@media [media query] { [CSS rules]}Example 1: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Foundation JS Utilities Example</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="top-bar"> <div class="top-bar-left"> <ul class="dropdown menu" data-dropdown-menu> <li class="menu-text">GeeksForGeeks</li> <li> <a href="#">Courses</a> </li> <li> <a href="#">Tutorials</a> <ul class="menu"> <li><a href="#"> Data Structure and Algorithm </a></li> <li><a href="#">System Design</a></li> <li><a href="#">Web Development</a></li> </ul> </li> <li> <a href="#">Jobs</a> <ul class="menu"> <li><a href="#">For Job Seekers</a></li> <li><a href="#">For Recruiters</a></li> </ul> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"> </script> <script src="script.js"></script> </body> </html> CSS .top-bar, .top-bar ul { background-color: white; } .menu{ color: green; } a,ul,li{ color: black; } a:hover{ color: green; } ul:hover{ color: green; } li:hover{ color: green; } JavaScript $(document).foundation(); In this example, we have included the Foundation CSS file using the CDN link provided, and the necessary JavaScript files for jQuery and Foundation. We have also added the required markup for a top bar navigation menu with a dropdown submenu.To ensure the Foundation JavaScript utilities work correctly, we have included the jQuery library before the Foundation JavaScript file. Finally, we have initialized the Foundation framework by calling $(document).foundation().Output: Example 2: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>GeeksForGeeks</h1> <p>Best Programming Languages</p> <ul class="accordion" data-accordion> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">Java</a> <div class="accordion-content" data-tab-content> Java is a high-level, class-based, object-oriented programming language that is designed to have asfew implementation dependencies as possible. </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">Python</a> <div class="accordion-content" data-tab-content> Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation via the off-side rule. </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">C++</a> <div class="accordion-content" data-tab-content> C++ was designed with systems programming and embedded, resource-constrained software and large systems in mind, with performance, efficiency, and flexibility of use as its design highlights. </div> </li> </ul> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/vendor/what-input.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"> </script> <script src="script.js"></script> </body> </html> CSS .container { margin: 20px; } h1 { color: green; } JavaScript $(document).foundation(); This example demonstrates the basic usage of the Foundation's accordion component. The example uses the Foundation CSS framework for styling and the Foundation JavaScript files to initialize the accordion functionality.Output: Reference: https://get.foundation/sites/docs/javascript-utilities.html. Comment More infoAdvertise with us Next Article Foundation CSS JavaScript Utilities P pranay0911 Follow Improve Article Tags : Web Technologies CSS Foundation Foundation-Setup Similar Reads 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 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 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, M 3 min read Foundation CSS JavaScript Events Foundation CSS JavaScript is a set of JavaScript tools and plugins that can be used to add interactivity and functionality to your website. It includes a variety of plugins for things like modals, alerts, and accordions, as well as utility functions for handling events and working with the DOM. Foun 3 min read 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 Why learn JavaScript Foundations ? JavaScript is like a cornerstone in the world of programming languages. It's famous for being adaptable and everywhere. No matter if you're into making websites, or mobile apps, or diving into server stuff, understanding the basics of JavaScript is super important. Let's talk about why it's so cruci 4 min read JavaScript Function Examples A function in JavaScript is a set of statements that perform a specific task. It takes inputs, and performs computation, and produces output. The idea is to put some commonly or repeatedly done tasks together and make a function so that instead of writing the same code again and again for different 3 min read Foundation CSS Prototyping Utilities Sass Reference 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, 4 min read Introduction to JavaScript JavaScript is a versatile, dynamically typed programming language used for interactive web applications, supporting both client-side and server-side development, and integrating seamlessly with HTML, CSS, and a rich standard library.JavaScript is a single-threaded language that executes one task at 7 min read Introduction to Javascript Engines JavaScript is a scripting language and is not directly understood by computer but the browsers have inbuilt JavaScript engine which help them to understand and interpret JavaScript codes. These engines help to convert our JavaScript program into computer-understandable language. A JavaScript engine 4 min read Like