Uso de Clamp () en Divi 5 para crear una tipografía de respuesta a fluidos

Divi 5 ahora admite la tipografía de fluidos usando CSS Clamp (). Este es un gran paso adelante en el diseño receptivo y mejorará drásticamente la velocidad y la calidad de la construcción de sitios web. Aquí, quería mostrarle cómo comenzar a usar Clamp () en Divi 5, incluso si no sabía nada al respecto antes de leer esto.

Lea para comprender la teoría y cómo aplicarla. También vinculé una herramienta útil que puede facilitar la creación de su cálculo de sujeción ().

Clamp () vs consultas de medios para una tipografía receptiva

Las consultas de los medios pueden cambiar el tamaño de su tipografía en función de los tamaños de punto de interrupción. Cuando una página sale o baja y alcanza los siguientes puntos de interrupción definidos, las consultas de los medios aplicarán automáticamente los estilos asociados con ellos. Entonces, si tiene tres puntos de interrupción (móvil, tableta, escritorio), su texto puede cambiar en cada uno de esos puntos de interrupción.

Esto funciona muy bien y es lo que muchos diseñadores web se acostumbraron a usar. Sin embargo, no es fluido, lo que significa que su título de fuga en 767px de ancho de la ventana gráfica podría ser de 100 px grande, pero a 776px podría caer inmediatamente a 56px (si esos fueran sus puntos de interrupción y los valores de H1 asignados en ambos).

Clamp (), por otro lado, le permite tener una tipografía más pequeña en pantallas más pequeñas y escalarla a medida que aumentan las visitas de pantalla. Este video compara establecer tres puntos de interrupción con tres tamaños de fuente para un H1 y una convención de tamaño similar, pero realizada en Clamp ().

En este ejemplo, Clamp () transforma suavemente de 30px a 100px sin saltos abruptos, mientras que las declaraciones simples de píxeles en varios puntos de interrupción causan grandes cambios en el transcurso de un solo ancho de píxeles. El resultado es que tengo los tamaños de fuente Min/Max de mi elección de cualquier manera, pero con Clamp (), mi fuente es mucho más receptiva y se ve mejor según el tamaño de la pantalla. Tendría que usar todos los siete puntos de interrupción de Divi para obtener tamaños de fuente codificados para verse bien en la mayoría de los tamaños de pantalla.

Divi 5 Elementos de tipografía que apoyan la pinza ()

En Divi 5, es probable que use la mejor marca () con la configuración de tipografía. Específicamente, puede usar Clamp () para establecer:

• Tamaño de fuente (uso más común)
• Altura de línea
• Espaciado de letras

Esto le brinda una tipografía legible y receptiva sin establecer declaraciones de punto de interrupción para su entorno de tipografía. Por lo tanto, esto no solo crea un diseño más fluido, sino que también está acelerando su tiempo de construcción.

El tamaño de la fuente, el espaciado de las letras y la altura de la línea están disponibles tanto para encabezados como para la tipografía del cuerpo.

Cómo funciona ()

La función Clamp () usa tres valores:

clamp(min-value, preferred-value, max-value)

Cada valor está separado por comas, y cada uno cumple un papel específico:

Valor mínimo: este es el tamaño más pequeño permitido. No importa cuán pequeña sea la pantalla, su fuente no se encoge debajo de esto.

Valor preferido: este es su tamaño ideal o "objetivo". Por lo general, emplea unidades dinámicas o funciones matemáticas (como Calc ()) para escalar fluida entre su Min y Max.

Valor máximo: esto establece el mayor tamaño posible. Incluso en enormes pantallas, el elemento no excederá este valor.

Comprender las unidades CSS en Clamp ()

Las unidades afectan enormemente cómo las escalas de sujeción ():

• PX (píxeles): unidades absolutas; Tamaños fijos y estables. Útil para valores min/max para establecer límites claros.
• REM : Unidades relativas basadas en el tamaño de la fuente de la raíz. Si la fuente del navegador del usuario cambia, REM escala en consecuencia. Ideal para accesibilidad.
• VW (ancho de la visión): unidades dinámicas que escalan según el ancho de la pantalla. Ideal para el valor preferido para crear escala de fluidos.
• VH (altura de la ventana gráfica): similar a VW, pero para la altura. Menos útil a menos que trabaje con un idioma que imprime de arriba a abajo en lugar de derecha a izquierda (o viceversa).
• EM : en relación con el tamaño de fuente del elemento principal, ideal para una escala más controlada de respuesta.
• Y cualquier unidad que se sienta cómodo usando.

Por lo general, Min y Max usan unidades absolutas o estables como PX/REM, mientras que el valor preferido usa unidades dinámicas como VW/% o una función matemática para escala receptiva.

Cómo el valor preferido afecta a la clamp ()

El valor preferido es donde brilla realmente (). Define cómo escala su texto.

Un valor preferido más alto significa que el elemento alcanzará su límite de abrazadera máxima antes. Esto se vuelve confuso rápido (porque cosas como VW y REM son unidades relativas), pero quería mostrarle dos funciones similares de Clamp () que usan un multiplicador de VW ligeramente diferente en el valor preferido. El encabezado en la parte superior tiene un valor más pequeño: nota el tamaño real del encabezado como escamas de la ventana gráfica (resaltada en amarillo).

El valor preferido más bajo se reduce al valor mínimo en una vista marginalmente más amplia antes del valor preferido más alto (antes al escalar). El inverso es cierto para el valor más alto, que alcanza el valor máximo en un ancho de pantalla más pequeño antes del valor preferido más bajo (antes al escalar).

Aquí hay una vista gráfica de lo que está sucediendo en este caso:

En aras de la demostración, aquí hay otro gráfico que compara dos funciones ligeramente más simples () que difieren solo ligeramente.

Nuevamente, esto se siente complicado, pero en la práctica, es mucho menos. Le recomiendo que use un generador de tamaño de tipografía que admite la abrazadera CSS. Uno de mis favoritos es la calculadora de escala de tipo fluido. Usted proporciona los valores que desea probar, y generará automáticamente las variables CSS con sus funciones de abrazadera. Súper elegante!

Puede desplazarse hacia abajo y ver cómo su tipografía se escalará en función del ancho de la pantalla.

Y pronto podrá guardar esas variables CSS en las variables de diseño de Divi 5 y llamarlas fácilmente en sus ajustes preestablecidos sin confiar en una hoja de estilo CSS separada.

Usar Clamp () para tipografía con divi

Veamos Clamp () en acción. Aquí hay una forma de configurar la tipografía para todo su sitio web utilizando Divi.

Aplicar Clamp () a encabezados y títulos

Usaré el generador de escala de tipo fluido que se presenta anteriormente para facilitar. Este es uno de los conjuntos de tipografía fluida usando Clamp () que creé con ella. Puede usar el VAR como este, pero usaré los valores directamente en los preajustes de la opción predeterminados para mostrarle cómo usar Divi en su máxima extensión.

:root {
--divi-sm-body: clamp(0.8rem, 0.11vi + 0.77rem, 0.94rem);
--divi-button: clamp(1rem, 0.2vi + 0.95rem, 1.25rem);
--divi-body: clamp(1.25rem, 0.33vi + 1.17rem, 1.67rem);
--divi-h6: clamp(1.56rem, 0.53vi + 1.43rem, 2.22rem);
--divi-h5: clamp(1.95rem, 0.81vi + 1.75rem, 2.96rem);
--divi-h4: clamp(2.44rem, 1.2vi + 2.14rem, 3.95rem);
--divi-h3: clamp(3.05rem, 1.77vi + 2.61rem, 5.26rem);
--divi-h2: clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem);
--divi-h1: clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem);
}

Primero, cree presets de grupo de opción predeterminados para cada nivel de encabezado/título. Para hacerlo, haga clic en un módulo con un encabezado o título (comparten un grupo de opciones, aunque tienen nombres ligeramente diferentes en los módulos). En la pestaña Design , encuentre texto o texto de título . Haga clic en el icono preestablecido del grupo de opciones .

Esto mostrará un menú de al menos el grupo de opciones predeterminado preestablecido. Continuaremos y usaremos el preajuste OG predeterminado aquí para nuestro H1. Haga clic en el icono " Gear " para abrir la configuración de diseño preestablecido OG. En pasos posteriores, crearemos más preajustes OG para cada nivel de encabezado (H1-H6).

Notará el grupo de opciones de que estamos trabajando en invertidos desde el modo de luz hasta el modo oscuro (o viceversa si comenzó en modo oscuro), que es una forma útil de saber en qué contexto de diseño se encuentra. Desplácese hacia abajo para encabezar el tamaño de texto y pegar el valor de su preferencia. En nuestro caso, estamos usando esto para el H1:

 clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem) 

Asegúrese de desplazarse hacia abajo y hacer clic en Guardar , o no aplicará con éxito su preajuste OG.

Ahora, continuaremos a través de todos nuestros niveles de encabezado. Solo te mostraré el próximo nivel de encabezado (H2). A través del mismo método que antes, llegue al área preestablecida OG, solo haga clic en Agregar nuevo preajuste esta vez.

Para que nuestro preajuste OG se use en H2S, usaremos esta función Clamp () desde el generador:

 clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem); 

Seleccione la opción H2 en el área de selección de nivel de encabezado . Luego pegue el valor de la abrazadera () en el tamaño del texto del encabezado , que establecerá el tamaño de los encabezados H2 utilizando ese preajuste OG.

A partir de ahí, continuará a través de sus niveles de encabezado. También podemos configurar el tamaño del texto de nuestro cuerpo y cosas como el texto del botón. Muchos módulos tienen tipos especiales de texto que podrían usar estos valores de Clamp (), pero para algunos, es posible que desee crear algunos más (como etiquetas de módulo de formulario o meta texto de publicaciones de blog).

Si quisiera usar las variables CSS, seguiría los mismos pasos exactos (suponiendo que haya cargado las variables de tamaño de fuentes en las opciones de temas> CSS ), pero en lugar de pegar el valor Clamp (), pegaría la var (algo como "–Divi-H1" o cualquier convención de nombres que elija usar).

Salta a la experiencia Divi 5 hoy

Divi 5 está agregando características a un ritmo vertiginoso. Los puntos de interrupción receptivos, todas las unidades CSS avanzadas y los preajustes de los grupos de opciones son solo algunos de los primeros frutos de nuestra infraestructura recientemente desarrollada.

Construir sitios web profesionales con Divi se está volviendo aún más fácil y más poderoso. No podría estar más emocionado de que pruebes la nueva experiencia. CSS CLAMP es solo una de las muchas características que los usuarios de Divi han pedido y ahora tienen. Entonces, si no ha descargado el último Alpha Divi 5, ahora es el momento.

Pruebe diferentes funciones de CSS en toda su compilación para ver cómo abren nuevas posibilidades de diseño. Esta pequeña característica tiene un poderoso impacto y demuestra que Divi 5 está diseñado para hacer que su proceso de diseño sea mejor que nunca.