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.
El marco Global Styles of Foundation comprende restablecimientos útiles para garantizar que el estilo sea consistente en todos los navegadores. Además de eso, la versión SASS de Foundation le permite ajustar la configuración predeterminada según sus necesidades.
- Tamaño de fuente: el tamaño de fuente predeterminado se establece en el 100 % de la hoja de estilo del navegador, con un tamaño de fuente predeterminado de 16 píxeles . Sin embargo, puede editar la variable $global-font-size para modificar el tamaño de fuente base en la versión SASS de Foundation CSS.
- Colores de estilo global: 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:
- primaria: Esta clase se destaca con un color azul cielo, que marca como importante.
- secundario: Esta clase se destaca con un color gris que marca como de menor importancia.
- éxito: Esta clase se destaca con un color verde que representa la realización de alguna acción.
- alerta: Esta clase se destaca con un color rojo que representa una acción incompleta con peligro.
- advertencia: esta clase resaltada con un color amarillo representa alguna acción de advertencia.
Ejemplo: El siguiente código muestra el tamaño de fuente del texto (etiqueta de párrafo <p> ) que se muestra.
HTML
<!DOCTYPE html> <html> <head> <!-- 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 Font Size</h3> <p> Welcome to GeeksForGeeks. This is an example line. </p> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Tamaño de fuente de estilo global
Ejemplo: el siguiente código muestra cómo se utilizan los colores de fuente global con componentes de llamada para dar los colores respectivos.
HTML
<!DOCTYPE html> <html> <head> <!-- 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>
Producción:
Colores de estilo globales
Referencia: https://get.foundation/sites/docs/global.html
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA