Foundation CSS Plugins Complete Reference

Last Updated : 12 May, 2022

Foundation CSS Plugins contain lots of features and every feature has unique behavior The Smooth Scroll enables scrolling to the specific section within the webpage without refreshing.

Complete list Foundation CSS Plugins are listed below:

Foundation CSS Abide
- Foundation CSS Abide Initial State
- Foundation CSS Abide Error State
- Foundation CSS Abide Ignored Inputs
- Foundation CSS Abide Required Radio & Checkbox
- Foundation CSS Abide Event Listener
- Foundation CSS Abide Builtin Patterns and Validators
- Foundation CSS Abide Adding Custom Pattern and Validator
- Foundation CSS Abide jQuery Conflict
- Foundation CSS Abide Accessibility
- Foundation CSS Abide Sass Reference
- Foundation CSS Abide JavaScript Reference
Foundation CSS Equalizer
- Foundation CSS Equalizer Nesting
- Foundation CSS Equalizer Equalize By Row
- Foundation CSS Equalizer JavaScript Reference
Foundation CSS Interchange
Foundation CSS Toggler
Foundation CSS Smooth Scroll
- Foundation CSS Smooth Scroll Installation
- Foundation CSS Smooth Scroll JavaScript Reference
Foundation CSS Sticky
- Foundation CSS Sticky Advanced
- Foundation CSS Stick to bottom
- Foundation CSS Sticky Navigation
- Foundation CSS Sticky JavaScript Reference

Below example will give you a brief idea about the Plugins of Foundation CSS:

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Equalizer Equalize By Row 
    </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"
        crossorigin="anonymous"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"
        crossorigin="anonymous"> 
    </script> 
  
    <style> 
        body { 
            padding: 0 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
      
    <h4>Foundation CSS Equalizer Equalize By Row</h4> 
      
    <div class="grid-x grid-margin-x" data-equalizer 
        data-equalize-by-row="true"> 
        <div class="cell medium-8"> 
            <div class="callout" data-equalizer-watch> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png"> 
            </div> 
        </div> 
      
        <div class="cell medium-4"> 
            <div class="callout" data-equalizer-watch> 
                <p> 
                    This article in on the Equalizer 
                    Component of Foundation CSS. It 
                    is published in GeeksforGeeks 
                    Platform. 
                </p> 
  
            </div> 
        </div> 
  
        <div class="cell medium-4"> 
            <div class="callout" data-equalizer-watch> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220302090848/star5.png"> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html> 