Foundation CSS Kitchen Sink

Last Updated : 16 Oct, 2022

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.

Kitchen Sink has the foundation elements to work well on our websites and applications. let’s see some foundation components.

Example 1: The below example describes the Kitchen Sink Button in Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <title>Foundation CSS Kitchen Sink Button</title> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
    </script> 
    <title> 
        Foundation CSS Kitchen Sink Button 
    </title> 
</head>  
    
<body style="margin: 5rem;"> 
    <h2 style="color: green;">GeeksforGeeks</h2> 
    <h4>Foundation CSS Kitchen Sink Buttons</h4> 
  
    <!-- Buttons (actions) -->
    <button type="button" 
            class="success button">Save</button> 
    <button type="button" 
            class="alert button">Delete</button> 
  
    <div class="button-group"> 
        <a class="button">GFG</a> 
        <a class="button">GFG</a> 
        <a class="button">GFG</a> 
    </div> 
</body> 
</html> 

Output:

Example 2: The following code demonstrates the kitchen sink title bar.

HTML

<!DOCTYPE html> 
<html lang="en"> 
   
<head> 
    <title>Foundation CSS Kitchen Sink Title bar</title> 
   
    <!-- 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;">GeeksforGeeks </h1>     
        <strong>Foundation CSS Kitchen Sink Title bar</strong> 
    </center> 
   
    <div class="title-bar"> 
        <div class="title-bar-left"> 
            <button class="menu-icon" 
                    type="button"></button> 
            <span class="title-bar-title">Foundation GFG</span> 
        </div> 
        <div class="title-bar-right"> 
            <button class="menu-icon" 
                    type="button"></button> 
        </div> 
    </div> 
</body>  
</html> 