Fundación CSSes un marco de front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que hace que sea muy fácil diseñar hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. 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. 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.
Global Style Colors es la paleta de colores predeterminada disponible para su uso por Foundation CSS. Estos colores de estilo global se pueden usar fácilmente para dar colores interactivos a los componentes de Foundation CSS, como enlaces, llamadas o botones.
Foundation CSS Global Style Colors Classes:
- primario: Destaca con un color azul cielo, que marca como importante.
- secundario: Destaca con un color gris que marca como de menor importancia.
- éxito: Destaca con un color verde que representa la realización de alguna acción.
- alerta: Destaca con un color rojo que representa acción incompleta con peligro.
- advertencia: Los resaltados con un color amarillo representan alguna acción de advertencia.
Ejemplo El código siguiente muestra cómo se utilizan los colores de fuente global con componentes de llamada para dar los colores respectivos.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Global Style Colors</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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script 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> <h3>Foundation CSS Global Style Colors</h3> <br/> <div class="panel callout primary"> Primary </div> <div class="panel callout secondary"> Secondary </div> <div class="panel callout success"> Success </div> <div class="panel callout warning"> Warning </div> <div class="panel callout alert"> Alert </div> </center> <script> $(document).foundation(); </script> </body> </html>
Colores de estilo global CSS de base
Ejemplo: El siguiente código muestra cómo se utilizan los colores de fuente global con componentes de botón para dar los colores respectivos.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Global Style Colors</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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script 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> <h3>Foundation CSS Global Style Colors</h3> <br/> <div class="button primary"> Primary </div> <div class="button secondary"> Secondary </div> <div class="button success"> Success </div> <div class="button warning"> Warning </div> <div class="button alert"> Alert </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Colores de estilo global CSS de base
Referencia: https://get.foundation/sites/docs/global.html#colors
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA