Foundation CSS JavaScript Utilities Last Updated : 23 Jul, 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://speedcf.cloudflareaccess.com/cdn-cgi/access/login/fallback-core-origin.speedcdnjs.com?kid=5bf8efc97d78564ad5710e878c66913f9a11dd374ea9a4a28ed5ba59bc6b60ad&redirect_url=%2Fajax%2Flibs%2Ffoundation%2F6.6.3%2Fjs%2Fvendor%2Fwhat-input.min.js&meta=eyJraWQiOiJiNzg3MjI1M2IxNjljNTliNGRmYTM4YjZjMzJmNGFmY2NkNjYwZDBiY2IxNDUyOWVlMzkzNjdjMTVjOWU2ZGMwIiwiYWxnIjoiUlMyNTYiLCJ0eXAiOiJKV1QifQ.eyJzZXJ2aWNlX3Rva2VuX3N0YXR1cyI6dHJ1ZSwiaWF0IjoxNzUzMjY2Nzk5LCJzZXJ2aWNlX3Rva2VuX2lkIjoiM2U1NWVjMTAtMmI5ZC00OTMzLWI1NjktZjkzNDQ1NmIyYWU5IiwiYXVkIjoiNWJmOGVmYzk3ZDc4NTY0YWQ1NzEwZTg3OGM2NjkxM2Y5YTExZGQzNzRlYTlhNGEyOGVkNWJhNTliYzZiNjBhZCIsImhvc3RuYW1lIjoiZmFsbGJhY2stY29yZS1vcmlnaW4uc3BlZWRjZG5qcy5jb20iLCJhcHBfc2Vzc2lvbl9oYXNoIjoiM2M0NmIwYjA4NTcyOTM3OTAyMTVjMjlkNTQxZTExYjgzNTdmMWJjOWQ3YmQ0ZDJjMWRmMjVhOWVjMzMzZjM3ZiIsIm5iZiI6MTc1MzI2Njc5OSwiaXNfd2FycCI6ZmFsc2UsImlzX2dhdGV3YXkiOmZhbHNlLCJ0eXBlIjoibWV0YSIsInJlZGlyZWN0X3VybCI6IlwvYWpheFwvbGlic1wvZm91bmRhdGlvblwvNi42LjNcL2pzXC92ZW5kb3JcL3doYXQtaW5wdXQubWluLmpzIiwibXRsc19hdXRoIjp7ImNlcnRfaXNzdWVyX3NraSI6IiIsImNlcnRfcHJlc2VudGVkIjpmYWxzZSwiY2VydF9zZXJpYWwiOiIiLCJjZXJ0X2lzc3Vlcl9kbiI6IiIsImF1dGhfc3RhdHVzIjoiIn0sImF1dGhfc3RhdHVzIjoiIn0.JlzEqBpIhOzBTFdtT2zkKNXersTRorf6TC7dRumvoind8PLBPd2yr8RpyHBGmOiBKUE718IgRkpfXvvtr7Eg2lTl603_QugZ_1voGsOj5MXchN6cWXBDu_8rkX3qaUaeZHfasQ4isKnhYo3uJ1M9LtWbINVUtGrJhiO8YkjzzjZxDI8Rx4Jc6tZQ1FASLT_0Mtp8oEsDN0qPmAyZhmhUHP0eaXljmX4rXz9ZFefHbkhdOPWWNrprkwfA7T1Fjf-jgM9EzgdMx171eWebZjeRevZ7P2Nul9eYibU9nzLf2YIxLPVlGwsD0cL-AiXlZCyEC7yndCZFahG_4sUdtUCR4A"> </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 P pranay0911 Follow Improve Article Tags : Web Technologies CSS Foundation Foundation-Setup Similar Reads CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or 7 min read CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the 4 min read CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h 2 min read CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato 7 min read CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works. 2 min read CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe 5 min read CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he 5 min read CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head> 4 min read CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim 4 min read CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color 4 min read Like