Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. In this article, we will discuss the Kitchen Sink Switch in Foundation CSS.
Kitchen Sink is a page in Foundation CSS in which all the major components are listed with their codes. It contains all the basic templates of each component with its code. The Button represents a clickable button, which can be utilized to submit the form data or to perform a specific action with standard button functionality.
Foundation CSS Kitchen Sink Button Classes:
- button: This class is used to add the button functionality to the elements.
- success: This class is used to displays the successful completion of action with a green color.
- alert: This class is used to displays the potentially dangerous or unsuccessful action with a red color.
- warning: This class is used to notify the particular action that needs to perform & represented using the yellow color.
- tiny: This class is used to make buttons to be of a very small size.
- small: This class is used to make the button to be small in size but still it is larger than the tiny button.
- large: This class is used to make the button to be larger in size.
- expanded: This class is used to make the button be expanded to cover the entire width of the screen on which the website is viewed.
- button-group: This class helps to make a group of buttons, arranged side by side in a row.
- hollow: This class helps to create hollow style (i.e they have borders of different colors and transparent background) buttons.
- disabled: This class is used to disable the button functionality.
Syntax:
<button type="button"
class="Kitchen-Sink-Button-Classes button">
Button </button>Example 1: The below example describe the Kitchen Sink Button in Foundation CSS. Here, we have created a hollow style button using the “.hollow” class to the element, containing the different colors using “.alert”, “.warning”, “.success” classes.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Button</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>
Foundation CSS Kitchen Sink Button
</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Foundation CSS Kitchen Sink Buttons</h2>
<button type="button" class="hollow success button">
Success
</button>
<button type="button" class="hollow warning button">
Warning
</button>
<button type="button" class="hollow alert button">
Alert
</button>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Button
Example 2: The below example describe the Kitchen Sink Button in Foundation CSS. Here, we have made a button disabled using the “.disabled” class in Foundation CSS.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Button</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>
Foundation CSS Kitchen Sink Button
</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Foundation CSS KitchenSink Buttons</h2>
<button type="button" class="button">
Button 1
</button>
<button type="button" class="button disabled">
Button 2
</button>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Button
Reference: https://get.foundation/sites/docs/kitchen-sink.html