Fundación - Estilos globales
En este capítulo, estudiaremos sobre estilos globales . El marco CSS global de Foundation incluye restablecimientos útiles que aseguran que el estilo sea consistente en todos los navegadores.
Tamaño de fuente
El tamaño de fuente de la hoja de estilo del navegador está establecido en 100% de forma predeterminada. El tamaño de fuente predeterminado se establece en 16 píxeles. Dependiendo del tamaño de la fuente, se calcula el tamaño de la cuadrícula. Para tener un tamaño de fuente base distinto y puntos de interrupción de cuadrícula no afectados, establezca $ rem-base en el valor $ global-font-size , que debe estar en píxeles.
Colores
Los elementos interactivos como enlaces y botones usan el tono de azul predeterminado que proviene de la variable $ primary-color de SASS . Los componentes también pueden tener colores como: secundario, alerta, éxito y advertencia . Para obtener más información, consulte aquí .
Referencia SASS
Variables
La siguiente tabla enumera las variables SASS, que se utilizan para personalizar los estilos predeterminados de los componentes en su proyecto _settings.scss .
| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $global-width Representa el ancho global del sitio. Se utiliza para determinar el ancho de fila de la cuadrícula. |
Número | rem-calc (1200) |
| 2 | $global-font-size Representa el tamaño de fuente aplicado a <html> y <body> . Está configurado al 100% de forma predeterminada y se heredará el valor de configuración del navegador del usuario. |
Número | 100% |
| 3 | $global-lineheight Representa todos los tipos de altura de línea predeterminada. $ global-lineheight es 24px mientras que $ global-font-size se establece en 16px. |
Número | 1,5 |
| 4 | $primary-color Da color a los componentes interactivos como enlaces y botones. |
Color | # 2199e8 |
| 5 | $secondary-color Se utiliza con componentes que admiten la clase .secondary . |
Color | N.º 777 |
| 6 | $success-color Representa el estado positivo o la acción cuando se usa con la clase .success . |
Color | # 3adb76 |
| 7 | $warning-color Representa un estado o acción de precaución cuando se usa con la clase .warning . |
Color | # ffae00 |
| 8 | $alert-color Representa un estado o acción negativa cuando se usa con la clase .alert . |
Color | # ec5840 |
| 9 | $light-gray Se utiliza para elementos de interfaz de usuario de color gris claro. |
Color | # e6e6e6 |
| 10 | $medium-gray Se utiliza para elementos de interfaz de usuario de color gris medio. |
Color | #cacaca |
| 11 | $dark-gray Se utiliza para elementos de interfaz de usuario de color gris oscuro. |
Color | # 8a8a8a |
| 12 | $black Se utiliza para elementos de interfaz de usuario negros. |
Color | # 0a0a0a |
| 13 | $white Se utiliza para elementos de interfaz de usuario blancos. |
Color | #fefefe |
| 14 | $body-background Representa el color de fondo del cuerpo. |
Color | $ blanco |
| 15 | $body-font-color Representa el color del texto del cuerpo. |
Color | $ negro |
| dieciséis | $body-font-family Representa la lista de fuentes del cuerpo. |
Lista | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 | $body-antialiased El tipo suavizado se habilita estableciendo este atributo en verdadero usando las propiedades CSS -webkit-font-smoothing y -moz-osx-font-smoothing . |
Booleano | cierto |
| 18 | $global-margin Representa el valor del margen global de los componentes. |
Número | 1rem |
| 19 | $global-padding Representa el valor de relleno global de los componentes. |
Número | 1rem |
| 20 | $global-margin Representa el valor de margen global utilizado entre componentes. |
Número | 1rem |
| 21 | $global-weight-normal Representa el peso de fuente global para tipo normal. |
Palabra clave o número | normal |
| 22 | $global-weight-bold Representa el peso de fuente global para tipografía en negrita. |
Palabra clave o número | negrita |
| 23 | $global-radius Representa el valor global de todos los elementos que tienen un radio de borde. |
Número | 0 |
| 24 | $global-text-direction Establece la dirección del texto del CSS en ltr o rtl |
ltr |