Foundation CSS JavaScript Utilities

Last Updated : 22 Sep, 2023

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.

Syntax

The syntax for calling a Foundation JavaScript Utility function is as follows:

Foundation.[Utility Name]([Arguments]);

Selector Engine

The 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 Debounce

Throttle 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 Options

Data 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 Queries

Media 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.

Suggest improvement

Foundation CSS JavaScript Timer Utility

Share your thoughts in the comments

Foundation CSS JavaScript Utilities

Syntax

Selector Engine

Throttle and Debounce

Data Options

Media Queries

Example 1:

HTML

CSS

Javascript

Output:

Example 2:

HTML

CSS

Javascript

Output:

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?