Introducción a la tipografía

Los elementos de texto y las clases se utilizan estrictamente para el tamaño, no para el estilo.
Normalmente, estos elementos se envuelven con un block-wrapper para tener acceso a modificadores de uso frecuente como clases combinadas.

Encabezados

Las etiquetas HTML tienen clases correspondientes para sus estilos. Los niveles de encabezado deben seguir la jerarquía correcta en el HTML, pero los estilos pueden sobrescribirse con clases. Recomendamos utilizar siempre la clase para convertir en hábito la separación entre la etiqueta y el estilo. Evite las clases combinadas siempre que sea posible.

Encabezado 1

text-h1

Etiqueta HTML h1

Heading 1

Encabezado 2

text-h2

Etiqueta HTML h2

Heading 2

Encabezado 3

text-h3

Etiqueta HTML h3

Heading 3

Encabezado 4

text-h4

Etiqueta HTML h4

Heading 4

Encabezado 5

text-h5

Etiqueta HTML h5

Heading 5

Encabezado 6

text-h6

Etiqueta HTML h6

Heading 6

Texto

Las clases de texto se utilizan estrictamente para el tamaño de fuente y el interlineado. Si necesitas tamaños mayores, debes usar clases de encabezado. Cualquier otro estilo suele provenir de un elemento padre. A veces es necesario anular el color o el grosor de fuente del elemento padre, en cuyo caso puedes usar clases combinadas o etiquetas span.

text-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-lg

text-md

(Base)

texto-sm

texto-xs

párrafo

Texto enriquecido

Estos son los estilos del elemento de texto enriquecido y sus elementos anidados. Utiliza esta clase para añadir espacio entre elementos y para aplicar estilos a cualquier elemento anidado de texto enriquecido para que coincida con los estilos de la marca.

texto-enriquecido

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Lista ordenada

Elemento 1
Elemento 2
Elemento 3

Lista sin ordenar

Elemento A
Elemento B
Elemento C

Enlace de texto

Texto en negrita

Énfasis

^Superíndice

_Subíndice

Otros elementos de texto

Esta es una lista de otros elementos HTML que necesitan estilo, como enlace , cita , lista , etc.

enlaces

Text Link

citas en bloque

Block Quote

listas desordenadas

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

listas ordenadas

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Introducción al color

Esta área no sirve para definir clases específicas, sino como punto de control para añadir los colores de tu proyecto a las muestras globales y describir cómo se utilizan.

Colores del tema

Esta es la lista de colores y su uso.

Color de superficie

HEX

#F9F4EE

Se utiliza como color de fondo principal.

Superficie secundaria

HEX

#F5EEE4

Se utiliza como color de fondo oscuro secundario.

Superficie inversa

HEX

#0A2447

Se utiliza como color de fondo inverso.

Texto principal

HEX

#0A2447

Se utiliza como color de texto principal.

Texto secundario

HEX

#067CC2

Se utiliza como color de texto secundario.

Texto atenuado

HEX

#4ED9FF

Se utiliza como color de texto atenuado.

Texto inverso

HEX

#F9F4EE

Se utiliza como color de texto inverso.

Borde predeterminado

HEX

#0A2447

Se utiliza como color de borde predeterminado.

Borde sutil

HEX

#067CC2

Se utiliza como color de borde sutil.

Borde intenso

HEX

#0A2447

Se utiliza como color de borde intenso.

section

cc-bottom-large

Heading

Contenedores

Las secciones suelen necesitar un contenedor para evitar que los diseños sean demasiado anchos. Los contenedores también controlan el relleno horizontal para mantener el mismo espaciado en todo el proyecto.
‍
Un contenedor predeterminado actúa como un marcador de ancho de "12 columnas", ya que ocupa todo el ancho del diseño (normalmente 1440px). Por eso los nombres de las clases combinadas mencionan columnas.

container

Heading

container

cc-10cols

Heading

container

cc-8cols

Heading

container

cc-6cols

Heading

Diseños

Los diseños suelen tener nombres más específicos según el proyecto. En muchos casos, existen opciones de diseño básicas que pueden servir como bloques de construcción.

Como punto de partida, tenemos los siguientes diseños predeterminados que cubren los estilos básicos: layout-grid, layout-vertical, laayout-horizontal. Cada uno de ellos cuenta con clases combinadas para modificar sus propiedades predeterminadas, pero puedes añadir más según lo necesites.

Diseño de cuadrícula

layout-grid

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

layout-grid utiliza por defecto 12 columnas iguales. Puedes jugar con la columna hija y la pila de filas para distribuirlas según tus diseños. Esto te dará un control total sobre la posición y el tamaño de cada elemento en la cuadrícula.
También existen algunas clases combinadas para ayudar a modificar el número de columnas y otros estilos, como el tamaño del espacio entre ellas, etc.

layout-grid

column

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

column es simplemente un div que se utiliza dentro de una columna de cuadrícula. Su propósito es permitir el uso de clases combinadas reutilizables para la alineación, el espaciado, etc.

layout-grid

cc-2cols

Lorem ipsum dolor

Modifica la cuadrícula para que tenga solo 2 columnas. ¡Muy útil para cuadrículas de repositorios!

layout-grid

cc-3cols

Lorem ipsum dolor

Modifica la cuadrícula para que tenga solo 3 columnas. ¡Muy útil para cuadrículas de repositorios!

layout-grid

cc-4cols

Lorem ipsum dolor

Modifica la cuadrícula para que tenga solo 4 columnas. Útil para cuadrículas de tarjetas o logotipos más compactas.

layout-vertical

Clases combinadas:

cc-x-left

cc-x-centre

cc-x-right

cc-y-top

cc-y-centre

cc-y-bottom

cc-centre

Diseño vertical predeterminado

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Diseño vertical alineado a la izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Diseño vertical centrado

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Utiliza cc-x-* para alinear los elementos secundarios en el eje transversal (horizontal) y cc-y-* para alinearlos en el eje principal (vertical) de un layout-vertical. cc-centre aplica ambos a la vez. Los elementos de botón reales hacen que las diferencias de alineación sean evidentes, ya que sus anchos difieren.

layout-horizontal

Clases combinadas:

cc-x-left

cc-x-centre

cc-x-right

cc-y-top

cc-y-centre

cc-y-bottom

cc-centre

cc-x-left

cc-x-centre

cc-x-right

cc-y-top

cc-y-centre

cc-y-bottom

cc-centre

Las mismas clases combinadas que layout-vertical, pero con los ejes intercambiados: cc-x-* controla el eje principal y cc-y-* el eje transversal, ya que layout-horizontal se ejecuta de izquierda a derecha.

layout-vertical

layout-horizontal

layout-grid

Clases combinadas:

cc-gap-2xs

cc-gap-xs

cc-gap-sm

cc-gap-md

cc-gap-lg

cc-gap-xl

cc-gap-2xl

cc-gap-2xs

cc-gap-xs

cc-gap-sm

cc-gap-md

cc-gap-lg

cc-gap-xl

cc-gap-2xl

Disponible en layout-vertical, layout-horizontal y layout-grid. Establece tanto grid-column-gap como grid-row-gap utilizando la escala de espaciado. Las cajas más anchas en los tamaños mayores dejan espacio para el mayor espaciado entre los botones.

layout-grid

cc-horizontal

Logotipo completo de Monkey Minds. Icono de silueta negra sencilla de un gorila de perfil con el texto Monkey Minds debajo.

Este modificador es útil para grupos de botones, logotipos o cualquier situación en la que desee que elementos adicionales se apilen en una sola línea. Las columnas se generan automáticamente

image-wrapper

Clases combinadas:

cc-1x1

cc-16x9

cc-4x3

image-wrapper es una clase base genérica que tiene overflow hidden, position relative y un ancho del 100%. Es útil para evitar crear una clase nueva para imágenes de tamaño estándar en columnas. También está alineada en la parte superior para evitar que se estire en toda la columna (puedes cambiar esto colocándola en un elemento padre flex). Usa una clase combinada para darle altura completa.

image

Clases combinadas:

cc-contain

image está configurada por defecto como cover, con ancho y alto completos. Puedes usar la clase combinada cc-contain para object-fit: contain

block-wrapper

Clases combinadas:

cc-mb-sm

cc-mb-md

cc-mb-lg

cc-gap-sm

cc-gap-md

cc-gap-lg

Predeterminado

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Margen pequeño

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Margen mediano

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Margen grande

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Espaciado pequeño

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Espaciado medio

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Espaciado grande

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Este elemento tiene el propósito de controlar el espaciado del contenido. Coloca aquí todos tus Encabezados, Párrafos, Imágenes y Botones y utiliza las clases combinadas para trabajar el espaciado entre ellos.

Consejo profesional: ¡Siempre puedes envolver un block-wrapper dentro de otro block-wrapper para gestionar diferentes propiedades de espaciado!

Bloque anidado

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

Diseños Flex

Utilidades

Las utilidades tienen un prefijo u- para separarlas de los estilos base. Pueden funcionar por sí solas, pero normalmente se usan para modificar un elemento base, como un block-wrapper.
‍
En las secciones, evítalas tanto como sea posible, ya que normalmente se les aplica relleno (padding), aunque los cambios de fondo son aceptables.
‍
Cosas como la alineación del texto deberían estar en la capa de diseño.

Modificadores de color de texto

Se pueden añadir a cualquier elemento, aunque se recomienda colocarlos lo más arriba posible según tus necesidades.
‍
Por ejemplo, si quieres que dos bloques de texto tengan este color y son elementos hermanos, puedes aplicarlo a su elemento padre.
‍
Si tienes muchos encabezados con color, es buena idea aplicarlo directamente en el elemento en lugar de en el padre o en un span, para que sea más fácil acceder a él la próxima vez.

u-color-primary