Utilisation de clamp () dans Divi 5 pour créer une typographie réactive fluide

Divi 5 prend désormais en charge la typographie fluide à l'aide de CSS clamp (). Il s'agit d'un énorme pas en avant dans la conception réactive et améliorera considérablement la vitesse et la qualité de la création de sites Web. Ici, je voulais vous montrer comment commencer à utiliser CLAMP () dans Divi 5, même si vous n'en saviez rien avant de lire ceci.

Lisez pour comprendre la théorie et comment l'appliquer. Je lie également à un outil utile qui peut faciliter la création de votre calcul ().

Clamp () vs requêtes médiatiques pour la typographie réactive

Les requêtes multimédias peuvent modifier la taille de votre typographie en fonction des tailles de point d'arrêt. Lorsqu'une page augmente ou vers le bas et atteint les points d'arrêt définis suivants, les requêtes multimédias appliqueront automatiquement les styles qui leur sont associés. Donc, si vous avez trois points d'arrêt (mobile, tablette, bureau), votre texte peut changer à chacun de ces points d'arrêt.

Cela fonctionne très bien et c'est ce que de nombreux concepteurs de sites Web se sont habitués à utiliser. Cependant, ce n'est pas fluide, ce qui signifie que votre taille 1 de police à la largeur de la fenêtre de 767px pourrait être de 100 pix, mais à 776px pourrait immédiatement chuter à 56px (si c'était vos points de rupture et les valeurs H1 attribuées aux deux).

CLAMP (), d'autre part, vous permet d'avoir une typographie plus petite sur des écrans plus petits et de le faire évoluer à mesure que les fenêtres d'écran se développent. Cette vidéo compare la définition de trois points d'arrêt avec trois tailles de polices pour un H1 et une convention de dimensionnement similaire mais réalisée dans CLAMP () à la place.

Dans cet exemple, CLAMP () passe en douceur de 30px à 100px sans sauts brusques, tandis que les simples déclarations de pixels à divers points d'arrêt provoquent de grands changements au cours d'une largeur de pixel unique. Le résultat est que j'ai les tailles de police min / max de mon choix de toute façon, mais avec CLAMP (), ma police est beaucoup plus réactive et semble mieux en fonction de la taille de l'écran. Je devrais utiliser tous les sept points d'arrêt de Divi pour obtenir des tailles de polices codées en dur pour bien paraître sur la plupart des tailles d'écran.

Divi 5 Éléments de typographie qui soutiennent la clamp ()

Dans Divi 5, vous utiliserez probablement le plus de clamp () avec les paramètres de typographie. Plus précisément, vous pouvez utiliser CLAMP () pour définir:

• Taille de la police (utilisation la plus courante)
• Hauteur de ligne
• Espacement des lettres

Cela vous donne une typographie lisible et réactive sans mettre en place aucune déclaration de point d'arrêt pour votre paramètre de typographie. Donc, non seulement cela fait un design plus fluide, mais vous accélérez également votre temps de construction.

La taille de la police, l'espacement des lettres et la hauteur de ligne sont disponibles pour les titres et la typographie du corps.

Comment fonctionne CLAMP ()

La fonction clamp () utilise trois valeurs:

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

Chaque valeur est séparée par des virgules, et chacune joue un rôle spécifique:

Valeur min: c'est la plus petite taille autorisée. Peu importe la taille de l'écran, votre police ne rétrécira pas en dessous.

Valeur préférée: il s'agit de votre taille idéale ou «cible». Il utilise généralement des unités dynamiques ou des fonctions mathématiques (comme calc ()) pour évoluer de manière fluide entre votre min et max.

Valeur maximale: Cela définit la plus grande taille possible. Même sur d'énormes écrans, l'élément ne dépassera pas cette valeur.

Comprendre les unités CSS dans CLAMP ()

Les unités affectent considérablement la façon dont les échelles CLAMP ():

• PX (Pixels): unités absolues; tailles fixes et stables. Utile pour les valeurs min / max pour établir des limites claires.
• REM : unités relatives basées sur la taille de la police racine. Si la police du navigateur de l'utilisateur change, REM échelle en conséquence. Idéal pour l'accessibilité.
• VW (largeur de la fenêtre): unités dynamiques qui évoluent en fonction de la largeur de l'écran. Idéal pour la valeur préférée pour créer une mise à l'échelle des fluides.
• VH (hauteur de la fenêtre): similaire à VW, mais pour la hauteur. Moins utile à moins de travailler avec une langue qui imprime de haut en bas au lieu de droite à gauche (ou vice versa).
• EM : par rapport à la taille de la police de l'élément parent, idéal pour une mise à l'échelle réactive plus contrôlée.
• Et toute unité que vous êtes à l'aise d'utiliser.

En règle générale, Min et Max utilisent des unités absolues ou stables comme PX / REM, tandis que la valeur préférée utilise des unités dynamiques comme VW /% ou une fonction mathématique pour une mise à l'échelle réactive.

Comment la valeur préférée affecte la clamp ()

La valeur préférée est l'endroit où CLAMP () brille vraiment. Il définit comment votre texte évolue.

Une valeur préférée plus élevée signifie que l'élément atteindra sa limite de pince maximale plus tôt. Cela devient déroutant rapidement (parce que des choses comme VW et REM sont des unités relatives), mais je voulais vous montrer deux fonctions de clamp () similaires qui utilisent un multiplicateur VW légèrement différent dans la valeur préférée. L'en-tête sur le dessus a une valeur plus petite - notez la taille réelle de l'en-tête à mesure que les échelles de la fenêtre (mises en évidence en jaune).

La valeur préférée inférieure évolue à la valeur minimale à une fenêtre légèrement plus large plus tôt que la valeur préférée supérieure (plus tôt lors de la mise à l'échelle). L'inverse est vrai pour la valeur plus élevée, qui atteint la valeur maximale à une largeur d'écran plus petite plus tôt que la valeur préférée inférieure (plus tôt lors de la mise à l'échelle).

Voici une vue de graphique de ce qui se passe dans ce cas:

Par souci de démonstration, voici un autre graphique comparant deux fonctions de pince () légèrement plus simples qui ne diffèrent que légèrement.

Encore une fois, cela semble compliqué, mais dans la pratique, c'est beaucoup moins. Je vous recommande fortement d'utiliser un générateur de taille de typographie qui prend en charge CSS Clamp. L'un de mes favoris est la calculatrice de l'échelle de type fluide. Vous fournissez les valeurs que vous souhaitez essayer, et elle générera automatiquement des variables CSS avec vos fonctions de pince. Super snazzy!

Vous pouvez faire défiler vers le bas et voir comment votre typographie va évoluer en fonction de la largeur de l'écran.

Et bientôt, vous pourrez enregistrer ces variables CSS dans les variables de conception de Divi 5 et les appeler facilement dans vos préréglages sans compter sur une feuille de style CSS distincte.

Utilisation de clamp () pour la typographie avec divi

Voyons Clamp () en action. Voici une façon de configurer la typographie pour tout votre site Web à l'aide de Divi.

Appliquer Clamp () aux titres et titres

J'utiliserai le générateur d'échelle de type fluide présenté ci-dessus pour faciliter la facilité. C'est l'un des ensembles de typographie fluide à l'aide de clamp () que j'ai créé avec. Vous pouvez utiliser les VAR comme celui-ci, mais j'utiliserai les valeurs directement dans les préréglages du groupe d'options par défaut pour vous montrer comment utiliser Divi dans toute sa mesure.

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

Tout d'abord, créez des préréglages de groupe d'options par défaut pour chaque niveau d'en-tête / titre. Pour ce faire, cliquez sur un module avec un titre ou un titre (ils partagent un groupe d'options, bien qu'ils aient des noms légèrement différents entre les modules). Dans l'onglet Design , trouvez du texte de titre ou du texte de titre . Cliquez sur l' icône de préréglage du groupe d'options .

Cela montrera un menu d'au moins le préréglage du groupe d'options par défaut. Nous allons aller de l'avant et utiliser le préréglage OG par défaut ici pour notre H1. Cliquez sur l'icône « Gear » pour ouvrir les paramètres de conception préréglage OG. Dans les étapes ultérieures, nous créerons plus de préréglages OG pour chaque niveau d'en-tête (H1-H6).

Vous remarquerez le groupe d'options dans lequel nous travaillons dans les inverses du mode clair au mode sombre (ou vice versa si vous avez commencé en mode sombre), ce qui est un moyen utile de savoir dans quel contexte de conception vous vous trouvez. Faites défiler jusqu'à la taille du texte et collez la valeur de la pince () de votre préférence. Dans notre cas, nous l'utilisons pour le H1:

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

Assurez-vous de faire défiler vers le bas et cliquez sur Enregistrer , ou vous n'appliquerez pas avec succès votre préréglage OG.

Maintenant, nous continuerons à travers tous nos niveaux de cap. Je vais juste vous montrer le prochain niveau de cap (H2). Via la même méthode qu'avant, accédez à la zone OG Preset, cliquez uniquement sur Ajouter un nouveau préréglage cette fois.

Pour que notre préréglage OG soit utilisé sur H2S, nous utiliserons cette fonction clamp () du générateur:

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

Sélectionnez l'option H2 dans la zone de sélection du niveau de cap . Collez ensuite la valeur CLAMP () dans la taille du texte de titre , qui définira la taille des en-têtes H2 en utilisant ce préréglage OG.

De là, vous continuerez à travers votre niveau de cap. Nous pouvons également configurer la taille de notre texte corporel et des choses comme le texte de la bouton. De nombreux modules ont des types spéciaux de texte qui pourraient être en mesure d'utiliser ces valeurs CLAMP (), mais pour certains, vous voudrez peut-être en créer plus (comme des étiquettes de module de formulaire ou un article de blog Meta Text).

Si vous vouliez utiliser des variables CSS, vous suiveriez les mêmes étapes exactes (en supposant que vous avez chargé les variables de dimensionnement des polices dans les options de thème> CSS ), mais au lieu de coller la valeur CLAMP (), vous colleriez le VAR (quelque chose comme "–divi-h1" ou quelle que soit la convention de nommage que vous choisissez d'utiliser).

Sauter dans l'expérience Divi 5 aujourd'hui

Divi 5 ajoute des fonctionnalités à un rythme effréné. Les points d'arrêt réactifs, toutes les unités CSS avancées et les préréglages du groupe d'options ne sont que quelques-uns des premiers fruits de notre infrastructure nouvellement développée.

La construction de sites Web professionnels avec Divi devient encore plus facile et plus puissant. Je ne pourrais pas être plus excité pour vous d'essayer la nouvelle expérience. CSS Clamp n'est qu'une des nombreuses fonctionnalités que les utilisateurs Divi ont demandé et ont maintenant. Donc, si vous n'avez pas téléchargé le dernier Divi 5 Alpha, c'est le moment.

Essayez différentes fonctions CSS sur toute votre construction pour voir comment elles ouvrent de nouvelles possibilités de conception. Cette petite fonctionnalité a un impact puissant et prouve que Divi 5 est conçu pour rendre votre processus de conception meilleur que jamais.