Texto

Cabeceras

Las cabeceras H de la biblioteca su formato, visualización y configuración de las mismas.

Una aclaración importante el valor por defecto del tamaño de la letra (1EM) se corresponde con 16px, por lo tanto los tamaños están definidos a partir de esta unidad y pueden observarse dentro del repositorio en sass/_generales.scss.

Visualización de las Cabeceras

Esto es un H1

Esto es un H2

Esto es un H3

Esto es un H4

Esto es un H5

Esto es un H6

También se pueden crear texto de cabeceras a partir de clases de CSS predefinidas en la biblioteca, por ejemplo se quiere crear un H1 sin utilizar la etqueta html H1, entonces se utiliza la clase .h1 lo cual da como resultado lo siguiente:

Esto es un H1

Esto es un H2

Esto es un H3

Esto es un H4

Esto es un H5

Esto es un H6

Esto es un H1

Esto es un H2

Esto es un H3

Esto es un H4

Esto es un H5

Esto es un H6

Código de bodystyle

El siguiente código cambia el estilo de un elemento de texto y lo convierte en un elemento visualmente igual a las cabeceras.

    // Tamaños de letras
    $letras:(
                        h1: 2.0em,
                        h2: 1.6em,
                        h3: 1.2em,
                        h4: 1.15 em,
                        h5: 1.1 em,
                        h6: 1.1 em,
                        p: 1.1em,
                        span: 1em,
                        a: 1em
    );

Este código se encuentra en el archivo sass sass/globales/_variables.scss

Grosor de la fuente

Se trata de la propiedad font-weight de CSS, para aumentar el tamaño del trazo la fuente. La biblioteca dispone de un conjunto de clases bien estructuradas para llevar a cabo esta tarea sin enbargo, en esta versión se incorpora la integración en el lenguaje inglés, lo cual brinda las mismas funcionalidades con más opciones para definir al elemento afectado.

Clase f-grosor-[valor] o f-w-[valor]

Es un conjunto de clases que trabajan con un parámetro [valor] a través del mismo se definirá el trazo a utilizar.
El parámetro va desde 1 al 9. Siendo 1 equivalente al valor 100 de la propiedad font-weight de CSS.

En Español

Esto es grosor 100

Esto es grosor 200

Esto es grosor 300

Esto es grosor 400

Esto es grosor 500

Esto es grosor 600

Esto es grosor 700

Esto es grosor 800

Esto es grosor 900

Esto es grosor bold

En Inglés

Esto es grosor 100

Esto es grosor 200

Esto es grosor 300

Esto es grosor 400

Esto es grosor 500

Esto es grosor 600

Esto es grosor 700

Esto es grosor 800

Esto es grosor 900

Esto es grosor bold


            
                
                
                Esto es grosor 100
                Esto es grosor 200
                Esto es grosor 300
                Esto es grosor 400
                Esto es grosor 500
                Esto es grosor 600
                Esto es grosor 700
                Esto es grosor 800
                Esto es grosor 900
                Esto es grosor bold

                
                Esto es grosor 100
                Esto es grosor 200
                Esto es grosor 300
                Esto es grosor 400
                Esto es grosor 500
                Esto es grosor 600
                Esto es grosor 700
                Esto es grosor 800
                Esto es grosor 900
                Esto es grosor bold

Colores de Texto

A través de las clases CSS provistas podemos cambiar el color del texto sin añadir código CSS adicional. Disponemos de un conjunto de clases que permite realizar esta tarea solo desde el código HTML del sitio en desarrollo.

Para definir el color del texto las clases disponen de un formato para poder recordarlas c-[color]-[parametro ID], los nombres son bastante descriptivos pero siempre hay que tener disponible la documentación.

Documentación de Colores de Texto

.c-rojo

.c-rojo-c

.c-rojo-o

.c-rojo-t

.c-rojo-an

.c-rojo-ro

.c-azul

.c-azul-c

.c-azul-o

.c-azul-ve

.c-azul-s

.c-azul-c

.c-azul-t

.c-azul-vi

.c-verde

.c-verde-c

.c-verde-o

.c-verde-t

.c-verde-az

.c-verde-am

.c-gris

.c-gris-c

.c-gris-o

.c-gris-t

.c-gris-az

.c-gris-o

.c-gris-az-c

.c-gris-az-o

.c-gris-n

.c-blanco

.c-negro

.c-violeta

.c-violeta-c

.c-violeta-o

.c-violeta-az

.c-violeta-o

.c-violeta-ro

.c-naranja

.c-naranja-c

.c-naranja-o

.c-naranja-t

.c-naranja-ro

.c-naranja-am

.c-amarillo

.c-amarillo-c

.c-amarillo-o

.c-amarillo-t

.c-amarillo-ve

.c-amarillo-an

Colores en Inglés

.c-red

.c-red-s

.c-red-d

.c-green

.c-green-s

.c-green-d

.c-grey

.c-grey-s

.c-grey-d

.c-violet

.c-violet-s

.c-violet-d

.c-blue

.c-blue-s

.c-blue-d

.c-yellow

.c-yellow-s

.c-yellow-d

.c-orange

.c-orange-s

.c-orange-d

.c-black

.c-white-s

Alineación del texto

Es muy común que se necesite darle una alineación al texto, para esto CSS brinda la instrucción text-aligs: [center | rigth | left] para alinear el texto a la izquierda, al centro o a la derecha.
Bodystile tiene incorporadas algunas clases que nos permitirán realizar lo antes mencionado pero si agregar código CSS.

Texto Alineado al Centro

La clase utilizada para alinear al centro el texto es .a-c o .ta-c.

Esto es un texto centrado con .a-c

Esto es un texto centrado con .ta-c

Esto es un texto centrado con .a-c

Esto es un texto centrado con .ta-c

Texto Alineado a la Derecha

La clase utilizada para alinear a la derecha el texto es .a-d o .ta-r.

Esto es un texto alineado a la derecha .a-d

Esto es un texto alineado a la derecha .ta-r

Esto es un texto alineado a la derecha .a-d

Esto es un texto alineado a la derecha .ta-r

Texto Alineado a la Izquierda

La clase utilizada para alinear a la izquierda el texto es .a-i o .ta-l.

Esto es un texto alineado a la izquierda a-i

Esto es un texto alineado a la izquierda ta-l

Esto es un texto alineado a la izquierda a-i

Esto es un texto alineado a la izquierda ta-l

Texto UPPER, LOWER, CAPITALIZE

Estas son tres clases muy útiles para ciuando queremos mostrar el texto todo en mayúsculas, todo en minúsculas o formato título (capitalize).
Las clases utilizadas son las siguientes:

.t-min o .t-lw
.t-may o t-up
.t.cap

esto es un texto en mayúsculas con t-may

esto es un texto en mayúsculas con t-up

esto es un texto en minúsculas con t-min

esto es un texto en minúsculas con t-lw

esto es un texto en formato título

esto es un texto en mayúsculas con t-may

esto es un texto en mayúsculas con t-up

esto es un texto en minúsculas con t-min

esto es un texto en minúsculas con t-lw

esto es un texto en formato título

Tamaño del texto

Es importante poder administrar el tamaño del texto de manera adecuada, ya que el diseño del Front-End va a depender en gran medida de esta propiedad.
En CSS la instrucción que nos permite realizar esto es font-size y a través de ella se configurará el tamaño de letra de los textos. Ahora bien, que ocurre cuando necesitamos diversos tamaños de letra para un mismo elemento y de esta forma ajustar el tamaño de letra de manera tal que se muestre de forma adecuada en todos los dispositivos.
Para esta tarea la biblioteca incluye un conjunto amplio de clases que permiten, para un mismo elemento configurar distintos tipos de tamaños de fuente.

Tamaño Global

La clase que se utilizará para definir el tamaño global de letra es:
.fz-[tamaño] donde (tamaño) es la medida en pixeles que va a tener el texto.

Párrafo de 15px

Párrafo de 20px

Párrafo de 25px

Párrafo de 30px

Párrafo de 35px

        
        
            Párrafo de 15px
            Párrafo de 20px
            Párrafo de 25px
            Párrafo de 30px
            Párrafo de 35px

Es importate aclarar que los tamaños definidos arriba van a ser los mismos para todos los dispositivos que accedan al sitio, esto implica que para dispositivos de tamaño de pantalla más pequeño el texto se podría ver muy grande.

Tamaño del Texto Resposive

En este apartado vamos a ver como definir diferentes tamaños de letra para un mismo elemento, de esta forma el mismo se visualizará de manera correcta en todos los dispositivos.
Es importante que el lector conozca los tamaños de pantalla tenidos en cuenta por la biblioteca (xs, s, m, l) que pueden consultar desde en siguiente enlace al apartado correspondiente a tamaños de pantalla utilizados.
(Ver Doc) Tamaños de Pantalla.

Este es un texto definido para varios tipos de letra

Si cambian el ancho del navegador donde están viendo esta documentación, van a notar que el texto cambiará su tamaño en función a las clases definidas en el mismo.

El formato es muy similar al fz-[tamaño] pero se agrega un parámetro adicional para diferenciar los tipos de dispositivos desde donde se verá el texto.

fz-xs-[pixeles] siendo pixeles (1 - 300) para equipos XS
fz-s-[pixeles] siendo pixeles (1 - 300) para equipos S
fz-m-[pixeles] siendo pixeles (1 - 300) para equipos M
fz-[pixeles] siendo pixeles (1 - 300) para todos los equipos

        
        
            
                Este es un texto definido para varios tipos de letra

En el ejemplo anterior se definió al elemento con una fuente de:

XS: 14px (Se muestra de 14px en dispositivos XS)
S: 18px (Se muestra de 14px en dispositivos S)
M: 22px (Se muestra de 14px en dispositivos M)
L: 28px (Se muestra de 14px en dispositivos L)

Para realizar todo lo mencionado se utilizaron las funcionalidades de SASS a través de los @media que permiten establecer y configurar los comportamientos de los estilos en función de los tamaños de pantalla.
Recomendación: _textoTam.scss

Line Height 4.8.0

En este apartado veremos como configurar el interlineado en diferentes tamaños de pantalla, esto quiere decir que un texto puede tener un determinado interlineado en equipos grandes y otro en equipos chicos o extra chicos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem illo pariatur soluta blanditiis tempore? Quo, dignissimos corrupti commodi molestias praesentium repellat ratione rerum quis ad, earum rem obcaecati dolorem dolores.

La clase que utilizamos para establecer el interlineado es .lh-[PX] donde PX es la cantidad de pixeles del interlineado que comienza de 15 a 100 como máximo.

Line Height Responsive

A veces es necesario definir varios interlineados para diferentes tipos de pantalla, esto implica que un texto se va a presentar de diferente manera según los intereses de los desarrolladores.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem illo pariatur soluta blanditiis tempore? Quo, dignissimos corrupti commodi molestias praesentium repellat ratione rerum quis ad, earum rem obcaecati dolorem dolores.

Notese que se cambia el tamaño de pantalla el interlineado cambiará y se reducirá conforme se vaya achicando la pantalla.

Resumen de clases

Clase	Rango	Tamaño	Descripción
lh-[PX]	15-100	Todos los dispositivos	Ajusta el interlineado en todos los dispositivos
lh-m-[PX]	15-100	774PX < X < 1030PX	Ajusta el interlineado en dispositivos medianos
lh-s-[PX]	15-100	400PX < X < 774PX	Ajusta el interlineado en dispositivos chicos
lh-xs-[PX]	15-100	400PX > X	Ajusta el interlineado en dispositivos xchicos