Tipografía
Foundation 3 utiliza una escala modular para generar la tipografía. Eso significa un gran ritmo, lógica vertical, ya sea que use la versión SCSS, o simplemente descargar el CSS.
¿Cómo funciona una escala modular
Basado en un trabajo Tim Brown , la idea de una escala modular es que el tamaño y el espaciamiento de toda la tipografía en el marco se deriva de un valor inicial, y otro arbitrario, y una proporción particular. Nosotros optamos por utilizar la proporción áurea, pero hay otras disponibles.
A continuación, utilizamos Sass para generar tamaños sobre la base de esos valores, en una escala ascendente de tamaño y el espaciamiento. Si utiliza la versión SCSS de la Fundación se puede cambiar fácilmente estos valores
// Variables
$ratio:$golden;
$base-size:14px44px;
// Modular Scale SCSS Function Syntax
h6{font-size:ms(0);}// First Number in Scale
h4{font-size:ms(2);}// Third Number in Scaleh5{font-size:ms(1);}// Second Number in Scale
General de Tipografía
Estos son los elementos básicos de la tipografía y ritmo en Foundation 3.
h1. Esta es una cabecera muy grande.
H2. Esta es una cabecera grande.
h3. Esta es una cabecera medio.
h4. Esta es una cabecera moderada.
h5. Esto es cabecera pequeña.
h6. Esto es muy pequeña cabecera.
Este es un párrafo. Los párrafos están predeterminados con un tamaño de fuente, altura de la línea y el espacio para que coincida con el ritmo vertical en general.
Estilos de cabecera
Foundation 3 incluye un número de diversos estilos y tratamientos para los elementos tipográficos, tales como subheaders o pequeños segmentos de cabecera.
Esta es una cabecera principal muy grande.
Esta es una sub-cabecera más pequeña.
<h2>Esta es una cabecera principal muy grande.</h2>
<h4 class="sub header">Esta es una sub-cabecera más pequeña.</h4>
Se trata de una cabecera grande. Se trata de un pequeño segmento de esa cabecera.
<h3>Se trata de una cabecera grande. <small>Se trata de un pequeño segmento de esa cabecera.</small></h3>
Enlaces
Los enlaces son muy estándar, y el color está preestablecido o controlada a través del archivo _base.scss como el color principal.
Este es un enlace de cabecera.
Este es un enlace de cabecera.
Este es un enlace de cabecera.
Este es un enlace de cabecera.
Listas
Las listas son útiles. Foundation 3 utiliza Normalize.css para las listas no se restablecerá como lo fueron en las versiones anteriores. Sin embargo, todavía proporcionan un affordances simples para las listas.
ul.disc
- Elemento de lista con una descripción mucho más tiempo o más de contenido.
- Lista elemento
- Lista elemento
- Lista elemento
- Lista elemento
- Lista elemento
ul.circle
- Elemento de lista con una descripción mucho más tiempo o más de contenido.
- Lista elemento
- Lista elemento
- Lista elemento
- Lista elemento
- Lista elemento
ul.square
- Elemento de lista con una descripción mucho más tiempo o más de contenido.
- Lista elemento
- Lista elemento
- Lista elemento
- Lista elemento
- Lista elemento
Blockquotes
A veces la gente dice cosas inteligentes, y es posible que desee mencionarlas a través de un blockquote. Tenemos todo cubierto.
No le temo a los ordenadores. Temo la falta de ellos.Isaac Asimov
<blockquote>
No le temo a los ordenadores. Temo la falta de ellos.
<cite>Isaac Asimov</cite>
</blockquote>
Estilos de impresión
Fundación incluye estilos de impresión desarrollados por a Boilerplate HTML5 para darle algunos estilos específicos de impresión básicos. Estos se activan cuando se imprime. Incluye:
- Eliminación de los fondos en caja, las sombras y las sombras de texto
- Añadiendo URL enlace después de que el texto del ancla
- Blockquotes limítrofes y elementos pre-
- Página de limpieza y minimización de la viuda
.print-only en un elemento para mostrar sólo a la hora de imprimir, y .hide-on-print de ocultar algo cuando se imprime.