Foundation CSS Manual de Referencia
Configuración Predeterminada de Foundation
Foundation utiliza el tamaño de fuente predeterminado del navegador (font-size:100%). Para la mayoría de los navegadores en dispositivos de escritorio, el tamaño de fuente predeterminado es 16px. Para los navegadores en dispositivos móviles, el tamaño de fuente predeterminado es 12px. La fuente predeterminada es"Helvetica Neue", el line-height predeterminado es1.5。
Estas configuraciones se aplican a<body>los elementos dentro del elemento.
Además,<p>el elemento tiene un margen inferior (margin-bottom) de 1.25rem y un line-height de 1.6.
Texto
Los siguientes elementos HTML tienen estilos independientes establecidos por Foundation para renderizarlos, sin adoptar los estilos predeterminados del navegador. Haz clic en "Pruébalo" para ver ejemplos en línea.
| Elemento | Descripción | Ejemplo en línea |
|---|---|---|
| <h1> - <h6> | Títulos h1 - h6 | Pruébalo |
| <a> | Enlaces de color azul claro, con subrayado al pasar el mouse sobre ellos | Pruébalo |
| <small> | Texto de subtítulo gris claro | Pruébalo |
| <blockquote> | Módulo de contenido citado | Pruébalo |
| <strong> | Texto en negrita | Pruébalo |
| <em> | Cursiva | Pruébalo |
| <abbr> | Abreviatura de palabras especificadas, al usar este elemento el texto aparece con subrayado punteado y al pasar el mouse se muestra información | Pruébalo |
| <kbd> | Recibe comandos de entrada del teclado:CTRL + P | Pruébalo |
| <hr> | Línea horizontal | Pruébalo |
| <code> | Fragmento de código | Pruébalo |
| <ul> | Lista desordenada | Pruébalo |
| <ol> | Lista ordenada | Pruébalo |
| <dl> | Lista descriptiva | Pruébalo |
Alineación de texto
Utiliza clases CSS para modificar la alineación del texto:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .text-left | Texto alineado a la izquierda | Pruébalo |
| .text-right | Texto alineado a la derecha | Pruébalo |
| .text-center | Centrado | Pruébalo |
| .text-justify | Justificado | Pruébalo |
Alineación para diferentes tamaños de pantalla
Utiliza clases CSS para modificar la alineación del texto en diferentes tamaños de pantalla:
| Clase | Descripción | Ejemplo |
|---|---|---|
| Alineación a la izquierda | ||
| .small-text-left | Alineado a la izquierda en pantallas de todos los tamaños | Pruébalo |
| .small-only-text-left | Alineado a la izquierda en pantallas pequeñas (ancho menor a 40em) | Pruébalo |
| .medium-text-left | Alineado a la izquierda en pantallas con ancho mayor a 40.0625em | Pruébalo |
| .medium-only-text-left | Alineado a la izquierda en pantallas con ancho entre 40.0625em y 64em | Pruébalo |
| .large-text-left | Alineado a la izquierda en pantallas con ancho mayor a 64.0625em | Pruébalo |
| .large-only-text-left | Alineado a la izquierda en pantallas con ancho entre 64.0625em y 90em | Pruébalo |
| .xlarge-text-left | Alineado a la izquierda en pantallas con ancho mayor a 90.0625em | Pruébalo |
| .xlarge-only-text-left | Alineado a la izquierda en pantallas con ancho entre 90.0625em y 120em | Pruébalo |
| .xxlarge-text-left | Alineado a la izquierda en pantallas con ancho mayor a 120em | Pruébalo |
| Alineación a la derecha | ||
| .small-text-right | Alineado a la derecha en pantallas de todos los tamaños | Pruébalo |
| .small-only-text-right | Alineado a la derecha en pantallas pequeñas (ancho menor a 40em) | Pruébalo |
| .medium-text-right | Alineado a la derecha en pantallas con ancho mayor a 40.0625em | Pruébalo |
| .medium-only-text-right | Alineado a la derecha en pantallas con ancho entre 40.0625em y 64em | Pruébalo |
| .large-text-right | Alineado a la derecha en pantallas con ancho mayor a 64.0625em | Pruébalo |
| .large-only-text-right | Alineado a la derecha en pantallas con ancho entre 64.0625em y 90em | Pruébalo |
| .xlarge-text-right | Alineado a la derecha en pantallas con ancho mayor a 90.0625em | Pruébalo |
| .xlarge-only-text-right | Alineado a la derecha en pantallas con ancho entre 90.0625em y 120em | Pruébalo |
| .xxlarge-text-right | Alineado a la derecha en pantallas con ancho mayor a 120em | Pruébalo |
| Alineación centrada | ||
| .small-text-center | Alineado al centro en pantallas de todos los tamaños | Pruébalo |
| .small-only-text-center | Alineado al centro en pantallas pequeñas (ancho menor a 40em) | Pruébalo |
| .medium-text-center | Alineado al centro en pantallas con ancho mayor a 40.0625em | Pruébalo |
| .medium-only-text-center | Alineado al centro en pantallas con ancho entre 40.0625em y 64em | Pruébalo |
| .large-text-center | Alineado al centro en pantallas con ancho mayor a 64.0625em | Pruébalo |
| .large-only-text-center | Alineado al centro en pantallas con ancho entre 64.0625em y 90em | Pruébalo |
| .xlarge-text-center | Alineado al centro en pantallas con ancho mayor a 90.0625em | Pruébalo |
| .xlarge-only-text-center | Alineado al centro en pantallas con ancho entre 90.0625em y 120em | Pruébalo |
| .xxlarge-text-center | Alineado al centro en pantallas con ancho mayor a 120em | Pruébalo |
| Justificado | ||
| .small-text-justify | Justificado en pantallas de todos los tamaños | Pruébalo |
| .small-only-text-justify | Justificado en pantallas pequeñas (ancho menor a 40em) | Pruébalo |
| .medium-text-justify | Justificado en pantallas con ancho mayor a 40.0625em | Pruébalo |
| .medium-only-text-justify | Justificado en pantallas con ancho entre 40.0625em y 64em | Pruébalo |
| .large-text-justify | Justificado en pantallas con ancho mayor a 64.0625em | Pruébalo |
| .large-only-text-justify | Justificado en pantallas con ancho entre 64.0625em y 90em | Pruébalo |
| .xlarge-text-justify | Justificado en pantallas con ancho mayor a 90.0625em | Pruébalo |
| .xlarge-only-text-justify | Justificado en pantallas con ancho entre 90.0625em y 120em | Pruébalo |
| .xxlarge-text-justify | Justificado en pantallas con ancho mayor a 120em | Pruébalo |
Otros
| Clase | Descripción | Ejemplo |
|---|---|---|
| .left | Hace que el elemento flote a la izquierda | Pruébalo |
| .right | Hace que el elemento flote a la derecha | Pruébalo |
| .clearfix | Limpiar flotación - debe agregarse al elemento padre del elemento flotante | |
| .hide | Ocultar elemento (CSSdisplay: none) |
Pruébalo |
| .list-inline | Coloca todos los elementos en la misma línea | Pruébalo |
| .lead | Hace que los elementos <p> sean más prominentes | Pruébalo |
| .subheader | Establece elementos <h1> - <h6> de color claro | Pruébalo |