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=
crossorigin="anonymous">
<script src=
</script>
<script src=
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=
</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=
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Article Tags :
Recommended Articles