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

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

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

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}

---

---

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.

---

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.

---

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

---

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}

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

---

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".

---

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".

---

---

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".

---

---

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".

---

---

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..."

---

---

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.

---

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.

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

---

Jerarquía

---

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.

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

---

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

---

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

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.

• Actualidad
• Arquitectura
• Carrusel
• Noticias

---

---

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.

---

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.

• Archivado en: Actualidad, Arquitectura, Carrusel, Investigación, Noticias.
• Palabras clave: Arquitectura, Estructura escencial, Libros, Matemática, Publicaciones, Triángulo de Pascal.

---

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>.

e[ad]

Escuela de arquitectura y diseño Pontificia universidad católica de Valparaíso

---

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; }

---