Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fast click.js para una renderización más rápida en dispositivos móviles.
Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Kitchen Sink Abide se utiliza para validar el formulario utilizando algunas clases y atributos .
Foundation CSS Kitchen Sink Abide clases:
- fi-alert: esta clase se utiliza para mostrar mensajes de error de nivel global en todo el formulario mediante iconos.
- alerta: esta clase se utiliza para crear y mostrar mensajes de alerta predefinidos.
- form-error: esta clase se utiliza para generar un mensaje de alerta cuando un usuario ingresa información incorrecta.
- texto de ayuda: esta clase se utiliza para mostrar un texto que instruye sobre cómo responder a un campo en particular. También proporciona información adicional sobre el campo correspondiente.
Nota: El atributo novalidate se usa para deshabilitar toda la validación del navegador.
Sintaxis:
<form data-abide novalidate>
<inpup type ="...">
...
</form>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de Kitchen Sink Abide utilizando el tipo de entrada como campos de número , texto y contraseña .
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>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de Kitchen Sink Abide utilizando la opción desplegable , botón de radio .
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>
Producción:
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#abide