Foundation CSS Controls Complete Reference
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. Foundation CSS Controls use to create different types of switches, buttons, sliders, and translations and control them as requirements like coloring switches, sizing switches, range sliders, and many things you can do it.
Complete list of Foundation CSS Control are listed below:
- Foundation CSS Button
- Foundation CSS Button Group
- Foundation CSS Button Group Basics
- Foundation CSS Button Group Sizing
- Foundation CSS Button Group Coloring
- Foundation CSS Button Group Hollow and clear
- Foundation CSS Button Group No Gaps
- Foundation CSS Button Even-width Group
- Foundation CSS Button Group Stacking
- Foundation CSS Button Group Split
- Foundation CSS Button Group Flexbox
- Foundation CSS Button Group Sass Reference
- Foundation CSS Close Button
- Foundation CSS Close Button Sass Reference
- Foundation CSS Slider
- Foundation CSS Slider Basics
- Foundation CSS Slider Vertical
- Foundation CSS Slider Disabled
- Foundation CSS Slider Two Handles
- Foundation CSS Slider Data Binding
- Foundation CSS Native Range Slider
- Foundation CSS Slider Non-linear value translation
- Foundation CSS Slider Reflow
- Foundation CSS Slider Sass Reference
- Foundation CSS Slider JavaScript Reference
- Foundation CSS Switch
- Foundation CSS Switch Basics
- Foundation CSS Switch Disabled
- Foundation CSS Radio Switch
- Foundation CSS Switch Sizing Classes
- Foundation CSS Switch Inner Labels
- Foundation CSS Switch Sass Reference
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- Compressed CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin = "anonymous" > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h3 > Foundation CSS Button Basics </ h3 > < a href = "#" class = "button" > GFG Button 1 </ a > < a href = "#" class = "button" > GFG Button 2 </ a > < a href = "#" class = "button" > GFG Button 3 </ a > < a href = "#" class = "button" > GFG Button 4 </ a > < center > < strong >Foundation CSS Switch</ strong > < br />< br /> < div class = "switch" > < input class = "switch-input" id = "exampleSwitch" type = "checkbox" name = "exampleSwitch" > < label class = "switch-paddle" for = "exampleSwitch" > < span class = "show-for-sr" >w3wiki</ span > </ label > </ div > </ center > </ center > </ body > </ html > |
Output: