Foundation CSS Kitchen Sink Abide

Last Updated : 16 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & 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 Fast click.js tool for faster rendering on mobile devices.

Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Abide is used to validate the form using some classes and attributes.

Foundation CSS Kitchen Sink Abide classes:

fi-alert: This class is used to display global level error messages throughout the form using icons.
alert: This class is used to create and display predefined alert messages.
form-error: This class is used to generate an alert message when a user enters some wrong information.
help-text: This class is used to display some text that instructs on how to respond to a particular field. It also tells some additional info about the corresponding field.

Note: The novalidate attribute is used to disable all the browser validation.

Syntax:

<form data-abide novalidate>
    <inpup type ="...">
     ...
</form>

Example 1: Below is the example that illustrates the use of Kitchen Sink Abide using input type as number, text, and password fields.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Foundation CSS Kitchen Sink Abide</title> 
  
  <link rel="stylesheet" 
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 
        crossorigin="anonymous"> 
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
  </script> 
  
  <script crossorigin="anonymous"
          src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
  </script> 
</head> 
  
<body style="margin-inline: 10rem;"> 
  <center> 
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1> 
  
    <h5>Foundation CSS Kitchen Sink Abide</h5> 
  
    <form data-abide novalidate> 
      <div class="grid-x grid-margin-x"> 
        <div class="cell"> 
          <div data-abide-error  
               class="alert callout" 
               style="display: none;"> 
            <p><i class="fi-alert"></i>  
              OOP's! Please modify some information!. 
            </p> 
  
          </div> 
        </div> 
      </div> 
  
      <div class="grid-x grid-margin-x"> 
        <div class="cell small-12"> 
          <label>Number(required) 
            <input type="text" 
                   placeholder="0000" 
                   aria-describedby="gfg-global-error"
                   pattern="number" 
                   required> 
            <span class="form-error"> 
              OOP's! it is required. 
            </span> 
          </label> 
          <p class="help-text" id="gfg-global-error"> 
            Please input any number here!! 
          </p> 
  
        </div> 
  
        <div class="cell small-12"> 
          <label>Name(not required) 
            <input type="text"
                   placeholder="Enter your Name" 
                   aria-describedby="gfg-name-field"
                   data-abide-ignore> 
          </label> 
          <p class="help-text" 
             id="gfg-name-field"> 
            data-abide-ignore attribute ignores this field. 
          </p> 
  
        </div> 
  
  
        <div class="cell small-12"> 
          <label>Password(required) 
            <input type="password" 
                   id="password" 
                   placeholder="gfgpassword" 
                   required 
                   aria-describedby="gfg-password"> 
            <span class="form-error"> 
              OOP's! Password is mandatory. 
            </span> 
          <p class="help-text" id="gfg-password"> 
            Please enter the Password. 
          </p> 
  
          </label> 
        </div> 
  
        <div class="cell small-12"> 
          <label>Re-enter Password(required) 
            <input type="password" 
                   placeholder="gfgpassword" 
                   aria-describedby="gfg-reenter-password" 
                   required pattern="alpha_numeric" 
                   data-equalto="password"> 
            <span class="form-error"> 
             OOP's! Password didn't match. 
            </span> 
          </label> 
          <p class="help-text" 
             id="gfg-reenter-password"> 
            data-equalto="password" attribute matches the  
            password in the above field. 
          </p> 
  
        </div> 
      </div> 
  
      <div class="grid-x grid-margin-x"> 
        <fieldset class="cell medium-6"> 
          <button class="button" 
                  type="submit" 
            value="Submit"> 
            SUBMIT 
          </button> 
        </fieldset> 
  
        <fieldset class="cell medium-6"> 
          <button class="button" 
                  type="reset" 
            value="Reset"> 
            RESET 
          </button> 
        </fieldset> 
      </div> 
    </form> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
  
</html>

Output:

Example 2: Below is the example that illustrates the use of Kitchen Sink Abide using the dropdown option, radio button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Foundation CSS Kitchen Sink Abide</title> 
  
  <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 
  crossorigin="anonymous"> 
  
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
  </script> 
  
  <script crossorigin="anonymous" src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
  </script> 
</head> 
  
<body> 
  <center> 
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1> 
  
    <h5>Foundation CSS Kitchen Sink Abide</h5> 
  
    <form data-abide novalidate> 
      <div class="grid-x grid-margin-x"> 
        <div class="cell"> 
          <div data-abide-error class="alert callout"
             style="display: none;"> 
            <p><i class="fi-alert"></i> 
              OOP's! Please modify some information!. 
            </p> 
  
          </div> 
        </div> 
      </div> 
  
      <div class="grid-x grid-margin-x"> 
        <div class="cell medium-6"> 
          <label> 
            GeeksforGeeks Courses, don't leave  
            it empty, please choose any one. 
            <select id="select" required> 
              <option value=""></option> 
              <option value="DSA">DSA</option> 
              <option value="OOP's">OOP's</option> 
              <option value="DBMS">DBMS</option> 
              <option value="OS">OS</option> 
            </select> 
          </label> 
        </div> 
      </div> 
  
      <div class="grid-x grid-margin-x"> 
        <fieldset class="cell medium-6"> 
          <legend> 
            Choose your favorite website  
            for Computer Science. 
          </legend> 
          <input type="radio" name="website" 
            value="gfg" id="gfg"> 
          <label for="gfg">GeeksforGeeks</label> 
  
          <input type="radio" name="website" 
            value="other" id="other" required> 
          <label for="other">Other</label> 
        </fieldset> 
  
        <fieldset class="cell medium-6"> 
          <legend> 
            Choose Your Favorite course on GeeksforGeeks. 
          </legend> 
          <input type="radio" name="course" 
            value="DSA" id="DSA"> 
          <label for="DSA">DSA</label> 
  
          <input type="radio" name="course" 
            value="DBMS" id="DBMS"> 
          <label for="DBMS">DBMS</label> 
        </fieldset> 
      </div> 
  
      <div class="grid-x grid-margin-x"> 
        <fieldset class="cell medium-6"> 
          <button class="button" type="submit" 
            value="Submit">SUBMIT</button> 
        </fieldset> 
  
        <fieldset class="cell medium-6"> 
          <button class="button" type="reset" 
            value="Reset">RESET</button> 
        </fieldset> 
      </div> 
    </form> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
  
</html>