Tipografía

Parámetros de fuente

Pyxis utiliza globalmente y por defecto un font-size de @cuerpo: 16px, con un line-height de @interlinea: 25px y un font-weight de @peso: 200, lo cual hace referencia a un font-style "normal" o "regular" en las tres familias de fuente escogidas.

Source Sans Pro

Grumpy wizards make toxic brew for the evil queen and jack.

Familia tipográfica Source Sans Pro. Primera fuente sans serif de Adobe de código abierto desde 2012, diseñada por Paul D. Hunt, para interfaces de usuario. Pyxis la utiliza para encabezados de texto (h4, h5, h6), texto continuo y botones, presentando gran versatilidad a través de 6 pesos diferentes.

Open Sans Condensed

Grumpy wizards make toxic brew for the evil queen and jack.

Familia tipográfica Open Sans Condensed. Fuente sans-serif diseñada por Steve Matteson en 2011, optimizada para impresiones, web e interfaces móviles. Pyxis la utiliza para encabezados de texto (h1, h2, h3) y de menús. Su versatilidad contempla 2 pesos (normal + bold) y su versión en itálicas.

Palatino Linotype

Grumpy wizards make toxic brew for the evil queen and jack.

Familia tipográfica Palatino Linotype. Fuente tipo serif diseñada por Hermann Zapf en 1948, optimizada para linotipia en 1999. Pyxis la utiliza para texto continuo, párrafos y refrencias en itálicas. Su versatilidad contempla 2 pesos (normal + bold) y su versión en itálicas.

HTML
// Código de uso html <p class='sans'>Grumpy wizards make toxic brew for the evil queen and jack.</p> <p class='condensado'>Grumpy wizards make toxic brew for the evil queen and jack.</p> <p class='serif'>Grumpy wizards make toxic brew for the evil queen and jack.</p>
LESS
// Variables tipográficas @sans: 'Source Sans Pro'; @cond: 'Open Sans Condensed'; @serif: 'Palatino','Times New Roman', Times,'georgia', serif; @texto-continuo: @sans; @italica: 'Palatino', 'Source Sans Pro', serif; @italica-cond: @cond; @mono: 'Lucida Console', monospace; @tipografia: 'Palatino', 'georgia', serif; @tipografia-titulos: @sans; @tipografia-titulos-cond: @cond; @tipografia-referencias: 'Source Sans Pro';

Uso de títulos

Estas son las cabeceras HTML disponibles en Pyxis. <h1> y <h2> tienen una fuente condensada 'Open Sans Condensed' (@cond) con un font-weight o peso de 700 (@peso-titulos-1), un color claro (@rojo) y un margen inferior de 10px (@margen-titulos-1). <h3> y <h4> tienen una fuente serif 'palatino' (@serif) menteniendo el peso anterior, h3 de color claro y manteniendo su margen inferior, h4 de color oscuro (@pizarra) y un margen inferior de 15px (@margen-titulos-2). <h5> y <h6> tienen una fuente sans serif 'Sorce Sans Pro' (@sans) con un font-weight o peso de 300 (@peso-titulos-2), de color oscuro y el margen inferior estandarizado desde h4. La dinámica está regulada para observar una versatilidad necesaria en términos de una biblioteca de estilos. La diferencia de márgenes inferiores se relaciona con la distancia necesaria entre el párrafo de texto y el titular secundario, de modo que el uso de los encabezados sea siempre en pares específicos, como se muestran en los ejemplos de uso múltiple, presentes más abajo. En el siguiente ejemplo que muestra todos los encabezados, el margen superior e inferior es el mismo para cada uno (10px), y está especificado por la clase "margen-defecto", únicamente con el fin de oredenar visualmente su nomenclatura.

Títulos por defecto (h1, h2, h3, h4, h5, h6)

Encabezado de Primer Nivel{33px}

Encabezado de Segundo Nivel{29px}

Encabezado de Tercer Nivel{27px}

Encabezado de Cuarto Nivel{23px}

Encabezado de Quinto Nivel{21px}
Encabezado de Sexto Nivel{19px}
HTML
<h1 class='margen-defecto'>Encabezado de Primer Nivel</h1> <h2 class='margen-defecto'>Encabezado de Segundo Nivel></h2> <h3 class='margen-defecto'>Encabezado de Tercer Nivel</h3> <h4 class='margen-defecto'>Encabezado de Cuarto Nivel</h4> <h5 class='margen-defecto'>Encabezado de Quinto Nivel</h5> <h6 class='sin-margen'>Encabezado de Sexto Nivel</h6>
LESS
// Variables de títulos // Tamaños @font-size-titulos-1: 2.2em; //33px @font-size-titulos-2: 1.93333333em; //29px @font-size-titulos-3: 1.8em; //27px @font-size-titulos-4: 1.5333333em; //23px @font-size-titulos-5: 1.26666667em; //19px @font-size-titulos-6: 1.13333333em; //17px // Estilos @color-titulos-1: @rojo; @color-titulos-2: @pizarra; @peso-titulos-1: @peso-gruesa; @peso-titulos-2: @peso-estandar; @margen-titulos-1: 0px 0px 10px 0px; @margen-titulos-2: 0px 0px 15px 0px;
Ejemplos de uso simple

El uso simple de títulares radica en la legibilidad de un encabezado sin un titular secundario; es decir, un título que por sí solo encabeza un párrafo de texto continuo. En el primer grupo (h1, h2, h3) los encabezados se muestran en rojo (@rojo) y con un margen inferior de 10px (@margen-titulos-1). En el segundo grupo (h4, h5, h6) los encabezados se muestran en negro (@pizarra) y adoptan un margen inferior de 15px (@margen-titulos-2), lo cual es necesario para el uso múltiple de titulos y lograr que el párrafo de texto continuo se ubique a mayor distancia del titular secundario que la que existe entre éste y el titulo principal, respetando un orden lógico visual. A continuación, la siguiente serie de ejemplos da cuenta del utilidad de cada titular de manera individual con un párrafo de texto.

"El acto arquitectónico" de Alberto Cruz{h1}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h2}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h3}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h4}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h5}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h6}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

HTML
// de uso simple <h1>...</h1> <p>...</p>
LESS
// Títulos en 'Open Sans' h1, h2{ font-family: @cond; font-weight: @peso-titulos-1; margin: @margen-titulos-1; } // Título en 'Palatino' h3, h4{ font-family: @serif; font-weight: @peso-titulos-1; } // Títulos en 'Source Sans Pro' h5, h6{ font-family: @sans; font-weight: @peso-titulos-2; margin: @margen-titulos-2; }
Ejemplos de uso múltiple (titular secundario)

Para observar la versatilidad y una jerarquía coherente en los titulares, a continuación se presentan tres combinaciones de uso (uso múltiple) diferentes. Es aquí que la diferencia entre márgenes inferiores de 10px (@margen-titulos-1) vs. 15px (@margen-titulos-2) tiene valor observable, al ser evidente la lógica de distancia entre el titular principal y el titular secundario, y la de éste con el párrafo de texto. A continuación, la siguiente serie da cuenta del uso de pares específicos de titulares, recurriendo en primer lugar a la jerarquía de tamaños: (h1-h4), (h2-h5), (h3-h6).

"El acto arquitectónico" de Alberto Cruz{h1}

Breve reseña de la obra{h4}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h2}

Breve reseña de la obra{h5}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h3}

Breve reseña de la obra{h6}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

Otros ejemplos

De manera opcional, existen también las combinaciones de titulares respetando el nº actual estandarizado de "headings". En estos dos ejemplos: (h4-h5), (h5-h6), es observable su versatilidad, tomando en cuenta que son los de menor jerarquía.

"El acto arquitectónico" de Alberto Cruz{h4}

Breve reseña de la obra{h5}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

"El acto arquitectónico" de Alberto Cruz{h5}
Breve reseña de la obra{h6}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in euismod nibh, in tincidunt tortor. Vivamus vulputate eros nec tempor finibus. Proin semper porttitor enim, a varius tortor tempus ut. Curabitur laoreet ullamcorper venenatis. In hac habitasse platea dictumst. Duis a ligula sagittis, euismod ante vel, hendrerit odio. Mauris pulvinar tincidunt felis, ac ullamcorper est tempus et. Quisque at tortor vel diam eleifend pretium vel eget eros.

HTML
// de uso múltiple (pares específicos) <h1>...</h1> <h4>...</h4> <p>...</p> <h2>...</h2> <h5>...</h5> <p>...</p> <h3>...</h3> <h6>...</h6> <p>...</p> // Otros ejemplos de uso <h4>...</h4> <h5>...</h5> <p>...</p> <h5>...</h5> <h6>...</h6> <p>...</p>
LESS
// Clases específicas h1, h2, h3, h4, h5, h6 { &.sin-margen{ margin: 0 !important; } &.margen-defecto{ margin: 10px 0 !important; } &.en-linea{ display: inline-block; } &.filete{ border-bottom: 1px solid @color-borde; .clearfix; } &.condensado{ font-family: @tipografia-titulos-cond !important; } &.condensado-fino { font-family: @tipografia-titulos-cond; font-weight: 200; } }

Subtítulos

Puedes insertar un subtítulo añadiendo la clase <small> dentro de las etiquetas de encabezado. Se añadirá un subtítulo más fino y en una escala menor a las cabeceras comunes, pero adoptando la misma proporción en cada una; la disminución tipográfica es de un 80%.

"El acto arquitectónico" de Alberto CruzBreve reseña de la obra

"El acto arquitectónico" de Alberto CruzBreve reseña de la obra

"El acto arquitectónico" de Alberto CruzBreve reseña de la obra

"El acto arquitectónico" de Alberto CruzBreve reseña de la obra

"El acto arquitectónico" de Alberto CruzBreve reseña de la obra
"El acto arquitectónico" de Alberto CruzBreve reseña de la obra
HTML
// Subtítulos "inline" <h1>...<small>...</small></h1> <h2>...<small>...</small></h2> <h3>...<small>...</small></h3> <h4>...<small>...</small></h4> <h5>...<small>...</small></h5> <h6>...<small>...</small></h6>
LESS
.subtitulo { font-family: @tipografia-titulos; font-weight: 700; color: @gris-oscuro; margin: @interlinea 0 @interlinea 0; vertical-align: bottom; }

Tamaños de título

Tamaños por defecto (xs, sm, md, lg)

Los tamaños de título están reglamentados por la misma nomenclatura que dispone la grilla de Bootstrap, donde 'xs' dicta el valor 'Extra Small' o tamaño de título más pequeño; 'sm' dicta el valor 'Small' o tamaño pequeño; 'md' dicta el valor de 'medium' o mediano y 'lg' dicta el valor 'large' o tamaño gigante, para establecer cuatro diferentes necesidades o contextos de uso de títulos en un layout determinado. Este es un ejemplo de tamaños para <h2>.

"El acto arquitectónico"{xs}

"El acto arquitectónico"{sm}

"El acto arquitectónico"{md}

"El acto arquitectónico"{lg}

También el uso múltiple de titulos está proporcionado a los tamaños que requieren para su uso en conjunto. Este es un ejemplo de tamaños para <h3> y <h6>.

"El acto arquitectónico"{xs}

Breve reseña de la obra{xs}

"El acto arquitectónico"{sm}

Breve reseña de la obra{sm}

"El acto arquitectónico"{md}

Breve reseña de la obra{md}

"El acto arquitectónico"{lg}

Breve reseña de la obra{lg}
HTML
// uso de tamaños para <h2> <h2 class='xs'>"El acto arquitectónico"</h2> <h2 class='sm'>"El acto arquitectónico"</h2> <h2 class='md'>"El acto arquitectónico"</h2> <h2 class='lg'>"El acto arquitectónico"</h2> // uso de tamaños para <h3> y <h6> <h3 class='xs'>"El acto arquitectónico"</h3> <h6 class='xs'>Breve reseña de la obra</h6> <h3 class='sm'>"El acto arquitectónico"</h3> <h6 class='sm'>Breve reseña de la obra</h6> <h3 class='md'>"El acto arquitectónico"</h3> <h6 class='md'>Breve reseña de la obra</h6> <h3 class='lg'>"El acto arquitectónico"</h3> <h6 class='lg'>Breve reseña de la obra</h6>
LESS
// Valores de cabecera: h1 { font-size: @font-size-titulos-1; //*33/16=2.0625*// color: @color-titulos-1; &.lg, &.grande, &.gigante { font-size: (@font-size-titulos-1 * 2);} &.md, &.mediano { font-size: (@font-size-titulos-1 * 1.5);} &.sm, &.pequeno { font-size: (@font-size-titulos-1 * 1.2);} &.xs, &.menudo { font-size: (@font-size-titulos-1 * .8);} } h2 { font-size: @font-size-titulos-2; //*29/16=1.8125*// color: @color-titulos-1; &.lg, &.grande, &.gigante { font-size: (@font-size-titulos-2 * 2);} &.md, &.mediano { font-size: (@font-size-titulos-2 * 1.5);} &.sm, &.pequeno { font-size: (@font-size-titulos-2 * 1.2);} &.xs, &.menudo { font-size: (@font-size-titulos-2 * .8);} } h3 { font-size: @font-size-titulos-3; //*27/16=1.6875*// color: @color-titulos-1; margin: @margen-titulos-1; &.lg, &.grande, &.gigante { font-size: (@font-size-titulos-3 * 2);} &.md, &.mediano { font-size: (@font-size-titulos-3 * 1.5);} &.sm, &.pequeno { font-size: (@font-size-titulos-3 * 1.2);} &.xs, &.menudo { font-size: (@font-size-titulos-3 * .8);} } h4 { font-size: @font-size-titulos-4; //*23/16=1.4375*// color: @color-titulos-2; margin: @margen-titulos-2; &.lg, &.grande, &.gigante { font-size: (@font-size-titulos-4 * 2);} &.md, &.mediano { font-size: (@font-size-titulos-4 * 1.5);} &.sm, &.pequeno { font-size: (@font-size-titulos-4 * 1.2);} &.xs, &.menudo { font-size: (@font-size-titulos-4 * .8);} } h5 { font-size: @font-size-titulos-5; //*19/16=1.1875*// color: @color-titulos-2; font-weight: 400; &.lg, &.grande, &.gigante { font-size: (@font-size-titulos-5 * 2);} &.md, &.mediano { font-size: (@font-size-titulos-5 * 1.5);} &.sm, &.pequeno { font-size: (@font-size-titulos-5 * 1.2);} &.xs, &.menudo { font-size: (@font-size-titulos-5 * .8);} } h6 { font-size: @font-size-titulos-6; //*17/16=1.0625*// color: @color-titulos-2; &.lg, &.grande, &.gigante { font-size: (@font-size-titulos-6 * 2);} &.md, &.mediano { font-size: (@font-size-titulos-6 * 1.5);} &.sm, &.pequeno { font-size: (@font-size-titulos-6 * 1.2);} &.xs, &.menudo { font-size: (@font-size-titulos-6 * .8);} }

Uso de párrafos de texto

Lo párrafos <p> tienen por defecto una fuente sans serif 'Source Sans Pro' (@texto-continuo), con un font-size de 16px (@cuerpo), un font-weight o peso de 300 (@peso-parrafo), un color oscuro al 80% de (@negro), un interlineado de 23/@em (donde @em = @cuerpo * 1em = 1.4375em) y un margen inferior de 25px (@margen-parrafo) para generar espaciados entre cada párrafo. En el caso de que no sea útil dicho margen, puedes agregar la clase 'sin-margen' para abolirlo (margin: 0px). Los párrafos de texto también tienen sus grosores, estilos de carácter y alineación, que se encuentran debidamente documentados en la sección 'estilos' dentro del sub-menú de Tipografía. En el siguiente ejemplo se muestran tres párrafos con sus estilos declarados por defecto, tomando en cuenta el uso de las etiquetas <i> (itálicas) para el segundo, y <b> (bold) para el tercero.

Parrafos por defecto

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga "

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga"

Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga

HTML
<p>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga"</p> <p><i>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga"</i></p> <p><b>Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga</b></p>
LESS
// párrafo @peso-parrafo: @peso-estandar; @margen-parrafo: 0 0 25px 0; @parrafo-xs: @cuerpo * .85; @parrafo-sm: @cuerpo; @parrafo-md: @cuerpo * 1.2; @parrafo-lg: @cuerpo * 1.45;

Tamaños de párrafo

Tamaños por defecto (xs, sm, md, lg)

Los tamaños de párrafo están reglamentados por la misma nomenclatura que dispone la grilla de Bootstrap, donde 'xs' dicta el valor 'Extra Small' o tamaño de título más pequeño; 'sm' dicta el valor 'Small' o tamaño pequeño; 'md' dicta el valor de 'medium' o mediano y 'lg' dicta el valor 'large' o tamaño gigante, para establecer cuatro diferentes necesidades o contextos de uso de párrafos en un layout determinado.

{xs}"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

{sm}"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

{md}"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

{lg}"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

HTML
<p class='xs'><b>{xs}</b>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> <p class='sm'><b>{sm}</b>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> <p class='md'><b>{md}</b>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> <p class='lg'><b>{lg}</b>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p>
LESS
// Todos los tamaños de Párrafos: p { &.lg, &.grande { font-size: @parrafo-lg; line-height: @interlinea; } &.md, &.mediano { font-size: @parrafo-md; line-height: @interlinea; } &.sm, &.pequeno{ font-size: @parrafo-sm; line-height: @interlinea; } &.xs, &.menudo { font-size: @parrafo-xs; line-height: @interlinea * 1.1; } }
Menudo (xs)

El tamaño de párrafo que responde a la clase xs o menudo contiene las propiedades de un tamaño de fuente de 13,6px (@cuerpo * 0.85) y una interlínea de 27.5px (@interlinea * 1.1).


"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

HTML
<div class='fila'> <div class='col-md-6 col-sm-8 col-xs-12 margen-sup-sm'> <p class='xs sin-margen'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-6 col-sm-4 col-xs-12 margen-sup-sm'> <p class='xs sin-margen'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> </div> <div class='fila'> <div class='col-md-4 col-sm-4 col-xs-12 margen-sup-sm'> <p class='xs sin-margen'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-4 col-sm-4 col-xs-12 margen-sup-sm'> <p class='xs sin-margen'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-4 col-sm-4 co-xs-12 margen-sup-sm'> <p class='xs sin-margen'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> </div>
LESS
// Tamaño xs o menudo: p { &.xs, &.menudo { font-size: @parrafo-xs; line-height: @interlinea * 1.1; } }
Pequeño (sm)

El tamaño de párrafo que responde a la clase sm o pequeño contiene las propiedades de un tamaño de fuente de 13,6px (@cuerpo) y una interlinea de 23/@em (donde @em = @cuerpo * 1em = 1.4375em).


"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

HTML
<div class='fila'> <div class='col-md-6 col-sm-8 col-xs-12 margen-sup-sm'> <p>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-6 col-sm-4 col-xs-12 margen-sup-sm'> <p>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> </div> <div class='fila'> <div class='col-md-4 col-sm-4 col-xs-12 margen-sup-sm'> <p>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-4 col-sm-4 col-xs-12 margen-sup-sm'> <p>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-4 col-sm-4 co-xs-12 margen-sup-sm'> <p>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> </div>
LESS
// Tamaño sm, pequeño o estándar: p { &.sm, &.pequeno{ font-size: @parrafo-sm; line-height: @interlinea; } }
Mediano (md)

El tamaño de párrafo que responde a la clase sm o pequeno contiene las propiedades de un tamaño de fuente de 19,2px (@cuerpo * 1.2) y una interlinea de 23/@em (donde @em = @cuerpo * 1em = 1.4375em)./p>


"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".

HTML
<div class='fila'> <div class='col-md-6 col-sm-6 col-xs-12'> <p class='md sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-6 col-sm-6 col-xs-12'> <p class='md sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> </div> <div class='fila'> <div class='col-md-4 col-sm-12 col-xs-12'> <p class='md sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-4 col-sm-8 col-xs-12'> <p class='md sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> <div class='col-md-4 col-sm-4 col-xs-12'> <p class='md sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>. Sin hablar, sin pensar, iré por los senderos: Pero el amor sin límites me crecerá en el alma. Me iré lejos, dichoso, como una chica. Por los campos, tan lejos como el gitano vaga".</p> </div> </div>
LESS
// Tamaño md o mediano: p { &.md, &.mediano { font-size: @parrafo-md; line-height: @interlinea; } }
Grande (lg)

El tamaño de párrafo que responde a la clase md o mediano contiene las propiedades de un tamaño de fuente de 24px (@cuerpo * 1.5) y una interlinea de 23/@em (donde @em = @cuerpo * 1em = 1.4375em).


"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza..."

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza..."

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza..."

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza..."

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza..."

"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza..."

HTML
<div class='fila'> <div class='col-md-6 col-sm-7 col-xs-12'> <p class='lg sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>..."</p> </div> <div class='col-md-6 col-sm-5 col-xs-12'> <p class='lg sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>..."</i></p> </div> </div> <div class='fila'> <div class='col-md-4 col-sm-12 col-xs-12'> <p class='lg sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>..."</i></p> </div> <div class='col-md-4 col-sm-6 col-xs-12'> <p class='lg sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>..."</p> </div> <div class='col-md-4 col-sm-6 col-xs-12'> <p class='lg sin-margen relleno-sup-sm'>"Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza</i>..."</p> </div> </div>
LESS
// Tamaño sm o estándar: p { &.lg, &.grande { font-size: @parrafo-lg; line-height: @interlinea; } }

Vistazo (span)

El énfasis de <span> o vistazo abarca la misma nomenclatura que la del párrafo <p>. Su función es utilizar una sentencia dentro de un texto continuo para otorgarle una serie de estilos diferenciales. También se utiliza para pequeños textos de introducción o de referencia. Puedes usar la clase 'centrado' para centrar el texto.

HTML
<p>...<span>...</span></p>
LESS
span { margin: @margen-span; display: inline-block; line-height: 25/@em; // centrado &.centrado{ display: block; margin: 0 auto; } }

Tamaños de vistazo

Tamaños por defecto (xs, sm, md, lg)

Los tamaños de span están reglamentados por la misma nomenclatura que dispone la grilla de Bootstrap, al igual que en los tamaños de párrafo.

Menudo (xs)
Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza.
Pequeño (sm)
Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza.
Mediano (md)
Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza.
Grande (lg)
Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento me bañe la cabeza.
HTML
<span class='xs margen-inf-sm'><b>Menudo (xs)</b> <br> Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza.</i></span> <span class='sm margen-inf-sm'><b>Pequeño (sm)</b><br> Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza.</i> </span> <span class='md margen-inf-sm'><b>Mediano (md)</b><br> Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza.</i></span> <span class='lg margen-inf-sm'><b>Grande (lg)</b> <br> Iré, cuando la tarde cante, azul, en verano, herido por el trigo, a pisar la pradera; soñador, sentiré su frescor en mis plantas y dejaré que el viento <i>me bañe la cabeza.</i></span>
LESS
span { &.lg, &.grande { font-size: @span-lg; line-height: @interlinea; } &.md, &.mediano { font-size: @span-md; line-height: @interlinea; } &.sm, &.pequeno{ font-size: @span-sm; line-height: @interlinea; } &.xs, &.menudo { font-size: @span-xs; line-height: @interlinea * 1.1; } }

Uso de listas

Las listas <ul> y <ol> tienen por defecto un font-size de 16px (@cuerpo), una interlinea de 25/@em (donde @em = @cuerpo * 1em), un color oscuro (@pizarra), un padding-left o relleno izquierdo de 40px (@relleno-lista) y un margin-bottom o margen inferior de 30px (@margen-lista). Si quieres abolir el relleno debes agregar la clase 'sin-relleno' (padding: 0px). Si quieres abolir el margen debes agregar la clase 'sin-margen' (margin: 0px). En el ejemplo a continuación se muestran los dos tipos de listas: ordenada y desordenada. La jerarquía da cuenta de cómo los sub-elementos de una lista se anidan en otra con su debido orden y estructura de numeración o etiquetas.

Listas por defecto
  • Primer elemento
  • Segundo elemento
  • Tercer elemento
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
HTML
// Lista ordenada <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul> // Lista desordenada <ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>
LESS
ul, ol { line-height: 25/@em; font-size: @cuerpo; color: @pizarra; padding: @relleno-lista; margin: @margen-lista; // Para evitar espaciado en una lista dentro de otra ul, ol{ margin: 0 !important; } // Para abolir padding &.sin-relleno{ padding: 0; } // Para abolir margin &.sin-margen{ margin: 0; } }
Jerarquía
  • Primer elemento
    • Primer sub-elemento
      • Primer sub-sub-elemento
    • Segundo sub-elemento
  • Tercer elemento
  1. Segundo elemento
    1. Primer sub-elemento
      1. Primer sub-sub-elemento
    2. Tercer sub-elemento
  2. Cuarto elemento
HTML
// Lista ordenada <ul> <li>Primer elemento</li> <ul> <li>Primer sub-elemento <ul> <li>Primer sub-sub-elemento</li> </ul> </li> <li>Segundo sub-elemento</li> </ul> </li> <li>Tercer elemento</li> </ul> // Lista desordenada <ol> <li>Segundo elemento</li> <ol> <li>Primer sub-elemento</li> <ol> <li>Primer sub-sub-elemento</li> </ol> <li>Tercer sub-elemento</li> </ol> <li>Cuarto elemento</li> </ol>
LESS
ol, ul {position: relative;} ul li {list-style-type: disc; &.sin-estilo{list-style: none !important;}} ul li ul li {list-style-type: circle;} ul li ul li ul li {list-style-type: square;} ol li {list-style-type: decimal;} ol li ol li {list-style-type: lower-roman; } ol li ol li ol li {list-style-type: lower-latin;}

Tamaños de listas

Tamaños por defecto (xs, sm, md, lg)

Los tamaños de lista están reglamentados por la misma nomenclatura que dispone la grilla de Bootstrap, donde 'xs' dicta el valor 'Extra Small' o tamaño de título más pequeño; 'sm' dicta el valor 'Small' o tamaño pequeño; 'md' dicta el valor de 'medium' o mediano y 'lg' dicta el valor 'large' o tamaño gigante, para establecer cuatro diferentes necesidades o contextos de uso de listas en un layout determinado.

Desordenada
    Menuda {xs}
  • Primer elemento
  • Segundo elemento
    • Primer sub-elemento
      • Primer sub-sub-elemento
    • Segundo sub-elemento
  • Tercer elemento
  • Cuarto elemento
    Pequeña {sm}
  • Primer elemento
  • Segundo elemento
    • Primer sub-elemento
      • Primer sub-sub-elemento
    • Segundo sub-elemento
  • tercer elemento
  • cuarto elemento
    Mediana {md}
  • Primer elemento
  • Segundo elemento
    • Primer sub-elemento
      • Primer sub-sub-elemento
    • Segundo sub-elemento
  • tercer elemento
  • cuarto elemento
    Grande {lg}
  • Primer elemento
  • Segundo elemento
    • Primer sub-elemento
      • Primer sub-sub-elemento
    • Segundo sub-elemento
  • tercer elemento
  • cuarto elemento
Ordenada
    Menuda {xs}
  1. Primer elemento
  2. Segundo elemento
    1. Primer sub-elemento
      1. Primer sub-sub-elemento
    2. Segundo sub-elemento
  3. Cuarto elemento
  4. Quinto elemento
    Pequeña {sm}
  1. Primer elemento
  2. Segundo elemento
    1. Primer sub-elemento
      1. Primer sub-sub-elemento
    2. Tercer sub-elemento
  3. Cuarto elemento
  4. Quinto elemento
    Mediana {md}
  1. Primer elemento
  2. Segundo elemento
    1. Primer sub-elemento
      1. Primer sub-sub-elemento
    2. Segundo sub-elemento
  3. Cuarto elemento
  4. Quinto elemento
    Grande {lg}
  1. Primer elemento
  2. Segundo elemento
    1. Primer sub-elemento
      1. Primer sub-sub-elemento
    2. Segundo sub-elemento
  3. Cuarto elemento
  4. Quinto elemento
HTML
<ul class='xs'> <b>Menuda {xs}</b> <li>Primer elemento</li> <li>Segundo elemento <ul class='xs'> <li>Primer sub-elemento <ul class='xs'> <li>Primer sub-sub-elemento</li> </ul> </li> <li>Segundo sub-elemento</li> </ul> </li> <li>Tercer elemento</li> <li>Cuarto elemento</li> </ul> <ul> <b>Grande {lg}</b> <li>Primer elemento</li> <li>Segundo elemento</li> <ul class='md'> <li>Primer sub-elemento</li> <ul class='md'> <li>Primer sub-sub-elemento</li> </ul> <li>Segundo sub-elemento</li> </ul> <li>tercer elemento</li> <li>cuarto elemento</li> </ul> <ul class='sm'> <b>Mediana {md}</b> <li>Primer elemento</li> <li>Segundo elemento <ul class='sm'> <li>Primer sub-elemento <ul class='sm'> <li>Primer sub-sub-elemento</li> </ul> </li> <li>Segundo sub-elemento</li> </ul> </li> <li>tercer elemento</li> <li>cuarto elemento</li> </ul> <ul class='md'> <b>Grande {lg}</b> <li>Primer elemento</li> <li>Segundo elemento</li> <ul class='md'> <li>Primer sub-elemento</li> <ul class='md'> <li>Primer sub-sub-elemento</li> </ul> <li>Segundo sub-elemento</li> </ul> <li>tercer elemento</li> <li>cuarto elemento</li> </ul>
LESS
ul{ &.xs, &.menudo { font-size: @lista-xs; line-height: @interlinea * 1.1; } &.sm, &.pequeno { font-size: @lista-sm; line-height: 150%; } &.md, &.mediano { font-size: @lista-md; line-height: 150%; } &.lg, &.grande { font-size: @lista-lg; line-height: 150%; } }

Uso de estilos tipográficos

Lo estilos tipográficos corresponden a grosor, carácter y alineación. Son necesarios para otorgar un énfasis diferente en un párrafo, sentencia o palabra de acuerdo a un contexto de lectura determinado.

Estilos de grosor

Los estilos de grosor son seis: 'ultrafino' corresponde a un peso de 100 (@peso-ultrafino), 'fino' corresponde a un peso de 200 (@peso-fino), 'estándar' corresponde a un peso de 300 (@peso-estandar), 'semigrueso' corresponde a un peso de 400 (@peso-semigruesa), 'grueso' corresponde a un peso de 700 (@peso-gruesa) y 'pesada' corresponde a un peso de 900 (@peso-pesada).

Esto es un texto ultrafino

Esto es un texto fino

Esto es un texto estándar

Esto es un texto semigrueso

Esto es un texto grueso (negrita)

Esto es un texto pesado

HTML
<p class='ultra-fino'>Esto es un texto ultrafino</p> <p class='fino'>Esto es un texto fino</p> <p>Esto es un texto estándar</p> <p class='semi-gruesa'>Esto es un texto semigrueso</p> <p class='gruesa'>Esto es un texto grueso (negrita)</p> <p class='pesada'>Esto es un texto pesado</p>
LESS
// Pesos en variables @peso-ultrafino: 100; @peso-fino: 200; @peso-estandar: 300; @peso-semigruesa: 400; @peso-gruesa: 700; @peso-pesada: 900; // Pesos en clases // nomenclatura bootstrap .peso-xs, .ultra-fino, .ultra-fina {font-weight: @peso-ultrafino} .peso-sm {font-weight: @peso-estandar} .peso-md, .gruesa, .grueso {font-weight: @peso-gruesa} .peso-lg, .pesada, .pesado {font-weight: @peso-pesada} // otros .fina, .fino{ font-weight: @peso-fino; } // Sólo posible para títulos en @sans: .semi-gruesa { font-family: @tipografia-titulos; font-weight: @peso-semigruesa; } .negrita, strong{ font-weight: @peso-gruesa; }
Estilos de carácter

Los estilos de carácter son cinco: 'italica' corresponde a la etiqueta <i> (@italica), 'altas', o texto en versalitas corresponde a la clase del mismo nombre (@texto-altas), 'bajas' corresponde al texto estándar con la clase del mismo nombre (@texto-bajas), 'subrayado' corresponde a la etiqueta <u> y 'descartato' corresponde a la etiqueta <s>.

Esto es un texto en cursiva

Esto es un texto en altas

Esto es un texto en bajas

Esto es un texto subrayado

Esto es un texto descartado

HTML
<p class='italica'>Esto es un texto en cursiva</p> <p class='altas'>Esto es un texto en altas</p> <p class='bajas'>Esto es un texto en bajas</p> <p class='subrayado'><u>Esto es un texto subrayado</u></p> <p class='descartado'><s>Esto es un texto descartado</s></p>
LESS
// Estilos de carácter @italica: 'Palatino', 'Source Sans Pro', serif; @altas: uppercase; @bajas: lowercase;
Estilos de alineación

Los estilos de alineación son tres: izquierda o estándar, corresponde a la clase del mismo nombre (@izquierda), centrado corresponde a la clase del mismo nombre (@centrado) y derecha corresponde a la clase del mismo nombre (@derecha) y se utilizan para alinear el texto en cierta dirección.

Esto es un texto a la izquierda

Esto es un texto centrado

Esto es un texto a la derecha

HTML
<p class='izquierda ancho-maximo'>Esto es un texto a la izquierda</p> <p class='centrado ancho-maximo'>Esto es un texto centrado</p> <p class='derecha ancho-maximo'>Esto es un texto a la derecha</p>
LESS
// alineación @izquierda: left; @centrado: center; @derecha: right;

Uso de clases diferenciales

Las clases diferenciales son aquellas clases de estilos específicos con la función de minimizar el trabajo y utilizar por defecto un conjunto de estilos sobre una etiqueta en relación con la tipografía. Es decir, las clases diferenciales son parte de la estandarización de estilos con la opción de ser usadas o no. A continuación se observan cinco clases de uso genérico: 'Poema', 'Dirección', 'Breadcrumbs', 'cita' y 'fecha evento'.

Breadcrumb

Esta clase es necesaria para ordenar visualmente la navegación del usuario en el sitio. Los nombres de las páginas de contenido se muestran de izquierda a derecha, según se haya profundizado en la navegación.

HTML
<ul id='breadcrumb'> <li><a class='gris-oscuro'><i class='icn icn-hogar'></i></a></li> <li><a class='gris-oscuro'>Actualidad</a></li> <li><a class='gris-oscuro'>Arquitectura</a></li> <li><a class='gris-oscuro'>Carrusel</a></li> <li><a class='gris-oscuro'>Noticias</a></li> </ul>
LESS
#breadcrumb{ text-transform: uppercase; font-family: @tipografia-titulos; li{ display: inline-block; font-family: @cond; font-size: @cuerpo * .8; &:last-child{ a{ color: @negro; } &:after{ content: none; } } &:after{ color: @negro; content: "→" } a{ font-family: @cond; font-weight: 700; .margen-horizontal-xs; font-size: @cuerpo * .75; &:hover{ color: @rojo; } } } }
Dirección

La etiqueta <address> da cuenta de información específica de contacto, direcciones, teléfonos, etc.

e[ad] Escuela de Arquitectura y Diseño Pontificia Universidad Católica de Valparaíso Contacto
Matta 12, Recreo, Viña del Mar, Chile.
Cód. Postal: 2580129, Casilla 4170 V2 Valparaíso
Teléfono +56 32 2274401 Fax +56 32 2274421
HTML
<address> e[ad] Escuela de Arquitectura y Diseño Pontificia Universidad Católica de Valparaíso Contacto </adress> <address> Matta 12, Recreo, Viña del Mar, Chile. </adress> <address> Cód. Postal: 2580129, Casilla 4170 V2 Valparaíso </address> <address> Teléfono +56 32 2274401 Fax +56 32 2274421 </address>
LESS
lala
blockquote

La etiqueta <blockquote> es de utilidad a la hora de diferenciar un texto de referencia, una frase ajena o un texto aparte.

"Este estudio considera la función mecánica en organismos edificados y sus componentes, e intenta correlacionar la función de cada uno con propiedades mecánicas medibles y con la estructura observada. Las funciones, propiedades y estructuras se discuten en términos de modelos y principios de diseño" (Estructura Esencial. Curso de geometría para pensar construyendo un cuerpo estable , “Sobre la estructura esencial”, p. 10).
HTML
<blockquote> "Este estudio considera la función mecánica en organismos edificados y sus componentes, e intenta correlacionar la función de cada uno con propiedades mecánicas medibles y con la estructura observada. Las funciones, propiedades y estructuras se discuten en términos de modelos y principios de diseño" <cite>(Estructura Esencial. Curso de geometría para pensar construyendo un cuerpo estable , “Sobre la estructura esencial”, p. 10)</cite>. </blockquote>
LESS
blockquote{ line-height: 22/@em; border-left: 3px solid @gris-claro; margin: 0 @cuadratin @cuadratin @cuadratin; padding: 0 0 0 10px !important; color: rgba(1,1,1,0.8); // Sin márgenes: &.sin-margen{ margin: 0; } // Tamaños de Párrafos: &.lg { font-size: @cuerpo * 2.2; line-height: 140%; } &.md { font-size: @cuerpo * 1.7; font-weight: 200; line-height: 140%; } &.sm { font-size: @cuerpo * 1.2; line-height: 140%; } &.xs { font-size: @cuerpo * .75; line-height: @interlinea * .9; } // Chico: small { display: block; color: @gris-claro; &:before { content: '\2014 \00A0'; } } }
Figcaption

La etiqueta <figcaption> es utilizada en caso de agregar un pie de imagen a una publicación.

Dibujo de observación sobre Av.Argentina en Valpraíso.
HTML
<figcaption class='wp-caption-text'> Dibujo de observación sobre Av.Argentina en Valpraíso. </figcaption>
LESS
// Pie de imagen figcaption, .wp-caption-text{ line-height: 24px; font-family: @serif; font-weight: @peso-fino; border-left: 2px solid fade(@rojo, 80); display: inline-block; font-size: 16px; font-style: inherit !important; font-style: italic !important; line-height: 16px !important; .margen-sup-xs; .margen-inf-sm; padding: 0 0 0 10px !important; }
Cite

La etiqueta <cite> es útil para hacer referencia a una frase ajena o autor.

Sólo lo que se idea es lo que se ve; pero lo que se idea es lo que se inventa
HTML
<cite>Sólo lo que se idea es lo que se ve; pero lo que se idea es lo que se inventa</cite>
LESS
lala
datos

Esta clase es utilizada para mostrar los datos de una publicación con sus respectivos enlaces.

HTML
<ul class='xs sin-relleno al-frente relleno-inf-sm sin-margen oculto-xs'> <li class='sin-estilo sans negro-fundido semi-gruesa relleno-sup-sm sombra-cabecera-claro-xs'><i class='icn icn-marcador relleno-der-xs'></i>Archivado en: <a href='#' class='sans semi-gruesa'>Actualidad</a>, <a class='sans semi-gruesa' href='#'>Arquitectura</a>, <a class='semi-gruesa sans' href='#' class='sans semi-gruesa'>Carrusel</a>, <a href='#' class='sans semi-gruesa'>Investigación</a>, <a class='semi-gruesa sans' href='#' class='sans semi-gruesa'>Noticias</a>.</li> <li class='sin-estilo sans negro-fundido semi-gruesa sombra-cabecera-claro-xs'><i class='icn icn-etiqueta relleno-der-xs'></i>Palabras clave: <a href='#' class='semi-gruesa sans'> Arquitectura</a>, <a class='semi-gruesa sans' href='#' class='semi-gruesa sans'>Estructura escencial</a>, <a class='semi-gruesa sans' href='#' class='sans'>Libros</a>, <a class='semi-gruesa sans' href='#' class='sans semi-gruesa'>Matemática</a>, <a href='#' class='sans semi-gruesa'>Publicaciones</a>, <a href='#' class='sans semi-gruesa'>Triángulo de Pascal</a>.</li>
LESS
lala
Fecha evento

La estructura básica de este ejemplo para mostrar una fecha específica, radica en escribir el día y el mes, los cuales tienen cada uno su clase dentro del contenedor fecha.

12

Diciembre

12

Diciembre
HTML
<div class='fila'> <div class='col-md-12'> <div class='col-md-2 col-sm-2 oculto-xs fecha'> <p class='dia sin-margen'>12</p> <span class='mes md centrado sin-relleno'>Diciembre</span> </div> <!-- fecha para móviles --> <div class='oculto-lg oculto-md oculto-sm col-xs-3 fecha-movil'> <p class='dia sin-margen relleno-sup-xs'>12</p> <span class='mes xs centrado sin-relleno relleno-inf-xs'>Diciembre</span> </div> </div> </div>
LESS
.fecha{ .borde; .izq-lineal-sm; .relleno-vertical-sm; .borde-rojo; .margen-inf-xs; .sombra; .radio-sup-der-md; .radio-inf-der-md; .fondo-blanco; .margen-der-md; p.dia{ .rojo; .centrado !important; } span.mes{ .condensado; .rojo; .interletraje-sm; } } // Fecha .fecha-movil{ .borde; .izq-lineal-sm; .borde-rojo; .radio-sup-der-md; .radio-inf-der-md; .relleno-vertical-xs; .margen-der-sm; .sombra; .fondo-blanco; // Día .dia{ .rojo; .centrado; } // Mes .mes{ .condensado; .rojo; .interletraje-sm; } }
Entry-title

Esta clase tiene referencia directa con la estructura de Wordpress para nominar un título de entrada en un post o publicación (h-entry).

Presentación libros Triángulo de Pascal y Estructura Esencial

HTML
<h3 class='lg entry-title'>Presentación libros Triángulo de Pascal y Estructura Esencial
LESS
.entry-title { .gris-oscuro; .gruesa; .condensado; }
Logo

La estructura básica del logo es tipográfia y está basada en dos <div> que contienen una etiqueta <span>.

HTML
<div class='ancho-completo cf'> <div class='bloque auto margen-inf-sm en-linea izquierda cf'> <div class='izquierda margen-der-xs logo en-linea'> <span class='bloque izquierda sombra-cabecera-claro-xs relleno-der-xs rojo sans'><a class='lg ead sans' href='http://eadpucv.github.io/pyxis/maquetas/home'>e[ad]</a></span> </div> <div class='izquierda relleno-sup-xs logo en-linea'> <span class='sm sans bloque negro'>Escuela de arquitectura y diseño</span> <span class='xs bloque izquierda sans negro-fundido en-linea'>Pontificia universidad católica de Valparaíso</span> </div> </div> </div>
LESS
lala
Entry-details

Esta clase tiene referencia directa con la estructura de Wordpress para nominar los datos sobre fecha y autor de la publicación.

HTML
<aside class='entry-details'> <ul class='sm sin-relleno al-frente sin-margen'> <li class='sm sin-estilo negro-fundido italica sombra-cabecera-claro-xs'>Publicaciado el 30 de octubre del 2014, por Francesca Cambiaso.</li> </ul> </aside>
LESS
.entry-details{ .italica; }
Sidebar

La estructura básica del logo es tipográfia y está basada en dos <div> que contienen una etiqueta <span>.

HTML
<div class='ancho-completo cf'> <aside id='sidebar'> <div class='col-md-3 col-sm-3'> <h6 class='xs seccion margen-sup'>Categorías</h6> <ul class='xs sin-relleno'> <li class='sin-estilo'><a href='#'>Actualidad</a></li> <li class='sin-estilo'><a href='#'>Estudiantes</a></li> <li class='sin-estilo'><a href='#'>Carreras</a></li> </ul> <h6 class='xs seccion margen-sup'>Carreras</h6> <ul class='xs sin-relleno'> <li class='relleno-vertical-xs borde inf-lineal-xs sup-lineal-xs sin-estilo rojo'><a href='#'>Arquitectura</a></li> <li class='sin-estilo'><a href='#'>Diseño Gráfico</a></li> <li class='sin-estilo'><a href='#'>Diseño industrial</a></li> </ul> </div> <!-- fin de fila --> </aside> </div>
LESS
#sidebar{ .seccion{ .interletraje-xs; .negro; .condensado; .gruesa; .altas; }
Poema

Esta clase, de igual manera que las etiquetas <code> o <pre>, funciona permitiendo que los elementos insertos en el html sean observables tal y como fueron escritos en el código, incluyendo espacios en blanco y tabulaciones. Esto es útil al momento de escribir un texto para conservar su condición original de lectura.

¿no iluminan así las estrellas a los hombres y esclarecen para que haya pueblo? la travesía consigue su cielo como los ojos su tierra así transida ¿no expondrá en la carne un ritmo que mueva a lenguaje? porque sin lenguaje todas las rutas hacia nuestra intimidad aunque se adueñen deforman y engañan ¿un lenguaje?

HTML
<p class='poema'> ¿no iluminan así las estrellas a los hombres y esclarecen para que haya pueblo? la travesía consigue su cielo como los ojos su tierra así transida ¿no expondrá en la carne un ritmo que mueva a lenguaje? porque sin lenguaje todas las rutas hacia nuestra intimidad aunque se adueñen deforman y engañan ¿un lenguaje? </p>
LESS
poem, .poema{ font-family: @serif; font-size: @cuerpo * 1.0; line-height: @interlinea; white-space: pre-wrap; }