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 Fastclick.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. La insignia es la etiqueta que se utiliza para resaltar la información como mensajes y se muestra en iconos redondeados. Estas insignias pueden tener colores con variantes que representan su importancia o la acción necesaria para tomar según la prioridad.
Foundation CSS Kitchen Sink Badge Clases:
- insignia : Se utiliza para crear la insignia con esquinas redondeadas.
- distintivo principal: Se utiliza para resaltar con un color azul cielo en el texto, lo que marca como importante.
- distintivo secundario: Se utiliza para resaltar el texto con un color gris que lo marca como de menor importancia.
- insignia de éxito: Se utiliza para resaltar el texto con un color verde que representa la finalización de alguna acción.
- distintivo de alerta: Se utiliza para resaltar el texto con un color rojo que representa una acción incompleta con peligro.
- distintivo de advertencia: Se utiliza para resaltar el texto con un color amarillo que representa alguna acción de advertencia.
Sintaxis:
<span class="Kitchen-Sink-Badge-Classes"> ... </span>
Ejemplo: Este ejemplo describe las insignias simples de Kitchen Sink en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink</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> </head> <body> <center> <h1 style="color: green"> GeeksforGeeks </h1> <h4>Foundation CSS Kitchen Sink Badge</h4> <br /> <span class="badge">1 <span class="badge">GFG <span class="badge">Notification </center> </body> </html>
Salida :
Insignia de fregadero de cocina Foundation CSS
Ejemplo : este ejemplo describe la insignia alfabética Kitchen Sink en Foundation CSS con las variantes de color.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink</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> </head> <body> <center> <h1 style="color: green"> GeeksforGeeks </h1> <h4>Foundation CSS Kitchen Sink Badges</h4> <br /> <span class="badge primary">Pri <span class="badge secondary">Sec <span class="badge success">S <span class="badge alert">A <span class="badge warning">W </center> </body> </html>
Salida :
Insignia de fregadero de cocina Foundation CSS
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#badge
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA