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. Los formularios de fregadero de cocina se utilizan para crear un diseño de formulario receptivo mediante la combinación de la cuadrícula de base y los estilos de formulario.
Clases de formularios de fregadero de cocina CSS de Foundation:
- 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.
- llamada: esta clase se usa para crear un contenedor que tiene un borde y algo de relleno.
- grid-x: esta clase se usa para definir los elementos secundarios que estarán en la fila en la dirección x.
- grid-margin-x: esta clase se utiliza para definir el margen en la dirección x para sus elementos secundarios.
- celda: Esta clase se utiliza para definir una columna en la grilla.
- large-n: esta clase se utiliza para definir una cuadrícula en el tamaño de pantalla grande que cubre n celdas cada una.
- medium-n: esta clase se usa para definir una cuadrícula en el tamaño de pantalla mediano que cubre n celdas cada una.
- small-n: esta clase se utiliza para definir una cuadrícula en el tamaño de pantalla pequeña que cubre n celdas cada una.
- text-right: Esta clase se usa para alinear el texto al lado derecho dentro del contenedor.
- botón: esta clase se utiliza para definir el tipo de entrada como un botón.
Sintaxis:
<form>
<input type="...">
.............
</form>
Ejemplo 1: El siguiente ejemplo ilustra el uso de Kitchen Sink Forms utilizando clases de base.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Forms</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="margin-inline: 40rem;"> <center> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Foundation CSS Kitchen Sink Forms</h3> </center> <form class="callout"> <label>Name <input type="text" placeholder="input name" aria-describedby="gfg-name"> </label> <p class="help-text" id="gfg-name"> You can input some text in the field above </p> <label>Number <input type="number" value="0"> </label> <label>Select subject <select> <option value="">Subject</option> <option value="DSA">DSA</option> <option value="OS">OS</option> <option value="DBMS">DBMS</option> <option value="OOP's">OOP's</option> </select> </label> <label>Message <textarea placeholder="message"></textarea> </label> <input type="submit" class="button" value="SUBMIT"> </form> <script> $(document).foundation(); </script> </body> </html>
Producción:
Formularios de fregadero de cocina Foundation CSS
Ejemplo 2: a continuación se muestra otro ejemplo que ilustra el uso de los encofrados para fregaderos de cocina con un sistema de rejilla de cimentación .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Forms</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="margin-inline: 30rem;"> <center> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Foundation CSS Kitchen Sink Forms</h3> </center> <form class="callout"> <div class="grid-x grid-margin-x"> <div class="cell large-6"> <label for="label" class="text-right"> Name </label> </div> <div class="cell large-6"> <input type="text" id="label" placeholder="Enter your name"> </div> </div> <br><br> <div class="grid-x grid-margin-x"> <fieldset class="cell large-6"> <legend>Choose Your Subject</legend> <input type="radio" name="gfg" id="gfg-1" required> <label for="gfg-1">DSA</label> <input type="radio" name="gfg" id="gfg-2"> <label for="gfg-2">OOP's</label> </fieldset> <fieldset class="cell large-6"> <legend>Check these Courses</legend> <input type="checkbox" id="course-1"> <label for="course-1"> DSA - Self Paced </label> <input type="checkbox" id="course-2"> <label for="course-2"> Interview Preparation </label> </fieldset> </div> <br><br> <input type="submit" class="button success" value="SUBMIT"> </form> </body> </html>
Producción:
Formularios de fregadero de cocina Foundation CSS
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#forms