Tipografía

Documentación y ejemplos

Cabeceras

Añadir las clase .title u otra, al encabezado .h1, .h2, .h3... con el tamaño deseado.

Elemento	Ejemplo
`<h1></h1>`	h1. class title xl-size
`<h2></h2>`	h2. class title l-size
`<h3></h3>`	h3. class title
`<h4></h4>`	h4. class title s-size
`<h5></h5>`	h5. title xs-size
`<h6></h6>`	h6. title xxs-size

Tamaños textos

Añadir las clase .txt-size y el tamaño .xs-size, .s-size, .l-size...

Elemento	Ejemplo
`<p class="txt-size xs-size"></p>`	Tamañopde texto 12px (0.75em)
`<p></p class="txt-size s-size">`	Tamaño de texto 14px (0.875em)
`<p class="txt-size"></p>`	Tamaño de texto 16px (1em)
`<p class="txt-size l-size"></p>`	Tamaño de texto 18px (1.125em)
`<p class="txt-size xl-size"></p>`	Tamaño de texto 20px (1.25em)
`<p class="txt-size xxl-size"></p>`	Tamaño de texto 24px (1.5em)
`<p class="txt-size xxxl-size"></p>`	Tamaño de texto 30px (1.875em)
`<p class="txt-size xxxxl-size"></p>`	Tamaño de texto 36px (2.25em)
`<p class="txt-size xxxxxl-size"></p>`	Tamaño de texto 48px (3em)
`<p class="txt-size xxxxxxl-size"></p>`	Tamaño de texto 60px (3.75)

Semántica

Tag	Ejemplo
`<mark>`	Utilizar la etiqueta de marca para destacar un texto.
`<s>`	~~Ésta línea crea un texto tachado.~~
`<u>`	Esta línea crea un texto subrayado.
`<q>`	Esta línea crea un texto entrecomillado.
`<em>`	Esta línea crea un texto en formato italic.
`<small>`	Esta línea crea un texto con letra pequeña.
`<strong>`	Esta línea muestra un texto en negrita.
`<sup>`	Este ^texto representado como superíndice.
`<sub>`	Este _texto representado como subíndice.
`<abbr>`	Las abreviaturas tienen un subrayado predeterminado y con un cursor de ayuda.
`<marquee>`	• Se añade la etiqueta `marquee` para insertar un texto en movimiento sin javascript. • Se le puede añadir un `scrolldelay` para definir la velocidad.

Clases

Clase	Ejemplo
`.bold`	Utilizar la clase para poner negrita en un texto.
`.semibold`	Utilizar la clase para poner negrita fina en un texto.
`.italic`	Utilizar la clase para poner cursiva en un texto.
`.tachado`	Utilizar la clase para tachar un texto.
`.underline`	Utilizar la clase para poner línea por debajo en un texto.
`.mayusculas`	Utilizar la clase para poner mayusculas en un texto.
`.capitalize`	Utilizar la clase para poner letra mayúscula en cada palabra.
`.title`	Clase Title para los título de sección, con sus tags para tamaños `<xl-size>`, `<l-size>`, `<s-size>`, `<xs-size>` y `<xxs-size>`.
`.subtitle`	Utilizar la clase Subtitle para los títulos de contenidos de sección.
`.txt-monospace`	Texto donde sus letras y caracteres ocupan exactamente la misma cantidad de espacio horizontal.
`.txt-justify` o `.justificado`	Justifica los parrafos por la izquierda y por la derecha.
`.txt-left` o `.left`	Justifica el texto a la izquierda.
`.txt-right` o `.right`	Justifica el texto a la derecha.
`.txt-center` o `.center`	Justifica el texto al centro.
`.txt-nowrap`	El texto nunca pasa a la siguiente línea, continúa hasta que se encuentra una etiqueta `<br>`.
`.txt-truncate` o `.elipsis`	El texto nunca pasa a la siguiente línea y si no entra añade `...` al final del párrafo a no ser que esté dentro de un `contenedor` con la propiedad `flex` que entonces hay que utilizar otro sistema.
`.line-clamp`	El texto se corta en las 3 líneas, ya que está pueso en el código `-webkit-line-clamp: 3`. Para variar el número de líneas se haría en esa parte de la clase. Si hay mas texto se corta o llegará un momento en que se corte como podemos ver en este ejemplo que al llegar al final se corta añadiendo al final de la tercera línea los tres puntos suspensivos.
`.txtmin y` `.txtmin + .s-size`	Para textos pequeños txtmin y txtmin s-size.
`.sombra-texto`	Utilizar la clase para poner sombra en un texto.
`.cursor-help`	Utilizar la clase para poner un cursor con interrogación al ponerse encima.
`.cursor-pointer`	Utilizar la clase para poner un cursor con dedo al ponerse encima.
`.cursor-zoom`	Utilizar la clase para poner un cursor con lupa + al ponerse encima.
`.cursor-default`	Utilizar la clase para poner un cursor con flecha al ponerse encima.

Colores

Textos de colores: Añadir las clases del color .colordest, .azul, .morado... a cada texto.

colordest azul cian morado purpura verde amarillo naranja rojo magenta rosa gris gris-claro gris-oscuro negro blanco

Fondos de colores: Añadir las clases .bg-colordest, .bg-azul, .bg-morado... a cada zona con fondo.

colordest

azul

morado

purpura

verde

cian

amarillo

naranja

rojo

magenta

rosa

negro

gris

gris claro

light

Fondos degradados: Añadir las clases .bg-colordest-degradado, .bg-azul-degradado, .bg-verde-degradado... a cada zona con fondo.

colordest

azul

verde

naranja

rojo

Fondos grises: Añadir las clases .bg-gris-100, .bg-gris-200, .bg-gris-300... hasta .bg-gris-900 de mas claro a mas oscuro.

100

200

300

400

500

600

700

800

900

Filtros para SVG: Añadir las clases .svg-rojo, .svg-verde, .svg-naranja y .svg-colordest aplicado a una imagen en formato SVG.

Justificación párrafos

Texto justificado con la clase .justificado ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.

Texto alienado a la izquierdea con la clase .left ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.

Texto alienado al centro con la clase .center ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.

Texto alienado a la derecha con la clase .right ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Cita de alguien famoso

Listas por defecto

Añadir <ul> y dentro <li> para lista por defecto.

Lista simple sin clases.
Por defecto sale un cuadrado a la izquierda.
Tiene un margin superior e inferior.

Añadir <ol> y dentro <li> para lista numérica.

lista numérica sin clases.
lista numérica por defecto.
Tiene un margin superior e inferior.

Añadir <dl> y dentro <dt> para título y <dd> para descripción.

Lista con descripción: Descripción de la lista enumerada arriba.
Lista con descripción.: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Añadir la clase .dl-horizontal al <dl> y luego la estructura anterior.

Título a la izquierda: Lista con título a la izquierda, que si no entra se corta, y descripción sin límite a la derecha del título.
Otro título mas largo: Luego en móvil pasa a formato título arriba y descripción abajo.

Lista en horizontal

Añadir la clase .inlinelist al <ul> para mostrar una lista en horizontal.

Lista en línea horizontal.
Tienen un margin a la derecha.
El último li no tiene margin a la derecha.
Tienen un margin superior e inferior.

Listas con clase: simplelist y lista-imagen

Añadir la clase .simplelist al <ul> y luego dentro de cada <li> los distinto tipos de decoración.

Sin clase no añade nada.
Clase cua para añadir un cuadrado.
Clase pun para añadir un círculo punto.
Clase cir para añadir un círculo vacío.

Clase num añade números.
Clase nu0 añade números con 0 antes.
Clase min añade letras minúsculas.
Clase may añade letras mayúsculas.

Lista con imagen SVG a la izquierda.
Quisque aliquet sem auctor.
Ut lobortis libero.
Maecenas et cursus elit.

Clase point añade un punto con color.
Clase ¿? con Flaticon y su código.
Clase ¿? con Flaticon y su código.
Clase ¿? con Flaticon y su código.

Lista iconos

Añadir la clase .lista-iconos al <ul> y luego dentro de cada <li> añadir <i> con la clase correspondiente de cada Flaticon y su texto.

Icono a la izquierda
Icono a la izquierda
Icono a la izquierda
Icono a la izquierda

Icono a la izquierda
Icono a la izquierda
Icono a la izquierda
Icono a la izquierda