Utilizarea Clamp () în Divi 5 pentru a crea tipografie cu sensibilitate fluidă

Divi 5 acceptă acum tipografia fluidă folosind CSS Clemp (). Acesta este un pas uriaș înainte în proiectarea receptivă și va îmbunătăți dramatic viteza și calitatea construirii site -urilor web. Aici, am vrut să vă arăt cum să începeți să folosiți Clamp () în Divi 5, chiar dacă nu știți nimic despre asta înainte de a citi acest lucru.

Citiți alături pentru a înțelege teoria și cum să o aplicați. De asemenea, mă conectez la un instrument util care poate face mult mai ușor crearea calculului Clemp ().

CLAMP () vs interogări media pentru tipografie receptivă

Interogările media pot schimba dimensiunea tipografiei dvs. pe baza dimensiunilor punctului de întrerupere. Când o pagină se scalează în sus sau în jos și atinge următoarele puncte de întrerupere definite, interogările media vor aplica automat stilurile asociate cu acestea. Deci, dacă aveți trei puncte de întrerupere (mobil, tabletă, desktop), textul dvs. se poate schimba la fiecare dintre aceste puncte de întrerupere.

Acest lucru funcționează foarte bine și este ceea ce mulți designeri web s -au obișnuit să folosească. Cu toate acestea, nu este fluid, ceea ce înseamnă că direcția dvs. de 1 font la 767px Viewport lățime ar putea fi de 100px mare, dar la 776px ar putea scădea imediat la 56px (dacă acestea ar fi punctele dvs. de întrerupere și valorile H1 atribuite la ambele).

Clamp (), pe de altă parte, vă permite să aveți o tipografie mai mică pe ecrane mai mici și să o extindeți pe măsură ce ecranul se extinde. Acest videoclip compară setarea a trei puncte de întrerupere cu trei dimensiuni de fonturi pentru un H1 și o convenție de dimensionare similară, dar în schimb, făcută în Clamp ().

În acest exemplu, Clamp () tranziții fără probleme de la 30px la 100px fără salturi abrupte, în timp ce declarațiile simple de pixeli la diferite puncte de întrerupere provoacă schimbări mari pe parcursul unei lățimi de pixeli. Rezultatul este că am dimensiunile de font Min/Max la alegerea mea în orice mod, dar cu Clamp (), fontul meu este mult mai receptiv și arată mai bine în funcție de dimensiunea ecranului. Ar trebui să folosesc toate cele șapte puncte de întrerupere ale lui Divi pentru a obține dimensiuni de fonturi codate pentru a arăta bine pe majoritatea dimensiunilor ecranului.

Divi 5 Elemente de tipografie care acceptă Clamp ()

În Divi 5, veți folosi probabil Clamp () cel mai mult cu setările de tipografie. Mai exact, puteți utiliza Clamp () pentru a seta:

• Dimensiunea fontului (cea mai obișnuită utilizare)
• Înălțimea liniei
• Distanțare a scrisorilor

Acest lucru vă oferă o tipografie lizitabilă, receptivă, fără a stabili declarații de breakpoint pentru setarea tipografiei dvs. Deci, nu numai că acest lucru face un design mai fluid, dar vă grăbiți și timpul de construire.

Dimensiunea fontului, distanțarea literelor și înălțimea liniei sunt disponibile atât pentru rubrici, cât și pentru tipografia corpului.

Cum funcționează Clamp ()

Funcția Clamp () folosește trei valori:

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

Fiecare valoare este separată de virgule și fiecare îndeplinește un rol specific:

Valoare minimă: Aceasta este cea mai mică dimensiune permisă. Oricât de mic este ecranul, fontul dvs. nu se va micșora sub acest lucru.

Valoarea preferată: Aceasta este dimensiunea dvs. ideală sau „țintă”. De obicei, folosește unități dinamice sau funcții matematice (cum ar fi Calc ()) pentru a se extinde fluid între min și max.

Valoare maximă: Aceasta stabilește cea mai mare dimensiune posibilă. Chiar și pe ecrane uriașe, elementul nu va depăși această valoare.

Înțelegerea unităților CSS în clemă ()

Unitățile afectează foarte mult modul în care CLAMP () Scale:

• PX (pixeli): unități absolute; dimensiuni fixe, stabile. Util pentru valorile min/max pentru a stabili limitele clare.
• Rem : unități relative bazate pe dimensiunea fontului rădăcină. Dacă fontul browserului utilizatorului se schimbă, REM scalează în consecință. Excelent pentru accesibilitate.
• VW (Lățimea Viewportului): unități dinamice care scalează pe baza lățimii ecranului. Ideal pentru valoarea preferată pentru a crea scalare de fluide.
• VH (Viewport Height): Similar cu VW, dar pentru înălțime. Mai puțin util, cu excepția cazului în care lucrați cu o limbă care tipărește de sus în jos în loc de dreapta la stânga (sau invers).
• EM : În raport cu dimensiunea fontului elementului părinte, ideală pentru o scalare receptivă mai controlată.
• Și orice unitate pe care o utilizați confortabil.

În mod obișnuit, Min și Max folosesc unități absolute sau stabile precum PX/REM, în timp ce valoarea preferată folosește unități dinamice precum VW/% sau o funcție matematică pentru scalarea receptivă.

Cum afectează valoarea preferată Clamp ()

Valoarea preferată este locul în care Clamp () strălucește cu adevărat. Definește modul în care textul tău scalează.

O valoare preferată mai mare înseamnă că elementul va atinge limita maximă de prindere mai devreme. Acest lucru devine rapid confuz (pentru că lucruri precum VW și REM sunt unități relative), dar am vrut să vă arăt două funcții similare de clemă () care folosesc un multiplicator VW ușor diferit în valoarea preferată. Titlul deasupra are o valoare mai mică - notă dimensiunea reală a rubricii pe măsură ce scale de vizionare (evidențiate în galben).

Valoarea preferată mai mică este scăzută până la valoarea minimă la o vizionare marginal mai largă mai devreme decât valoarea preferată mai mare (mai devreme la scăderea). Inversul este valabil pentru valoarea mai mare, care atinge valoarea maximă la o lățime mai mică a ecranului mai devreme decât valoarea preferată mai mică (mai devreme la scalare).

Iată o vedere grafică a ceea ce se întâmplă în acest caz:

De dragul demonstrației, iată un alt grafic care compară două funcții de clemă ușor mai simple () care diferă doar ușor.

Din nou, acest lucru se simte complicat, dar în practică, este mult mai puțin. Vă recomand să utilizați un generator de dimensiuni tipografice care acceptă clema CSS. Unul dintre preferatele mele este calculatorul de scară de tip fluid. Oferiți valorile pe care doriți să le încercați și va genera automat variabile CSS cu funcțiile de clemă. Super Snazzy!

Puteți derula în jos și puteți vedea cum se va scala tipografia dvs. în funcție de lățimea ecranului.

Și în curând veți putea salva acele variabile CSS în variabilele de design Divi 5 și le veți numi cu ușurință în presetările dvs. fără a vă baza pe o foaie de stil CSS separată.

Utilizarea clemei () pentru tipografie cu divi

Să vedem Clamp () în acțiune. Iată o modalitate de a configura tipografia pentru întregul site web folosind Divi.

Aplicarea clemei () la rubrici și titluri

Voi folosi generatorul de scară de tip fluid prezentat mai sus pentru ușurință. Acesta este unul dintre seturile de tipografie fluidă folosind Clamp () pe care le -am creat cu acesta. Puteți utiliza Vars ca acesta, dar voi folosi valorile direct în presetările de grupuri de opțiuni implicite pentru a vă arăta cum să utilizați Divi în cea mai mare măsură.

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

În primul rând, creați presetări de grupuri implicite pentru fiecare nivel de titlu/titlu. Pentru a face acest lucru, faceți clic pe un modul cu un titlu sau un titlu (partajează un grup de opțiuni, deși au nume ușor diferite între module). În fila Design , găsiți text de rubrică sau text de titlu . Faceți clic pe pictograma Presetare a grupului de opțiuni .

Aceasta va afișa un meniu de cel puțin presetarea grupului de opțiuni implicite. Vom merge mai departe și vom folosi presetarea OG implicită aici pentru H1 -ul nostru. Faceți clic pe pictograma „ Gear ” pentru a deschide setările de proiectare presetate OG. În etapele ulterioare, vom crea mai multe presetări OG pentru fiecare nivel de rubrică (H1-H6).

Veți observa grupul de opțiuni pe care lucrăm în inversuri de la modul Light la modul întunecat (sau invers, dacă ați pornit în modul întunecat), ceea ce este un mod util de a ști în ce context de proiectare vă aflați. Derulați în jos pentru a îndrepta dimensiunea textului și lipiți valoarea CLAMP () a preferințelor dvs. În cazul nostru, folosim acest lucru pentru H1:

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

Asigurați -vă că derulați în jos și faceți clic pe Salvați sau nu veți aplica cu succes presetarea OG.

Acum, vom continua prin toate nivelurile noastre de rubrică. Vă voi arăta doar următorul nivel de rubrică (H2). Prin aceeași metodă ca înainte, ajungeți în zona prestabilită OG, faceți clic pe Adăugați o nouă presetare de această dată.

Pentru ca presetarea noastră OG să fie utilizată pe H2S, vom folosi această funcție de clemă () de la generator:

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

Selectați opțiunea H2 din zona de selecție a nivelului de rubrică . Apoi, lipiți valoarea Clamp () în dimensiunea textului de titlu , care va seta dimensiunea titlurilor H2 folosind acea presetare OG.

De acolo, veți continua prin nivelurile dvs. de rubrică. De asemenea, putem configura dimensiunea textului corpului nostru și lucruri precum textul butonului. Multe module au tipuri speciale de text care ar putea să utilizeze aceste valori CLAMP (), dar pentru unii, poate doriți să creați ceva mai mult (cum ar fi etichetele de module de formular sau postarea blogului blogului).

Dacă doriți să utilizați variabile CSS, veți urma aceiași pași exacți (presupunând că ați încărcat variabilele de dimensionare a fontului în opțiuni tematice> CSS ), dar în loc să lipiți valoarea clemei (), ați lipi var (ceva de genul „–Divi-H1” sau orice convenție de denumire pe care alegeți să o utilizați).

Salt în experiența Divi 5 astăzi

Divi 5 adaugă caracteristici într -un ritm. Punctele de întrerupere responsive, toate unitățile CSS avansate și presetările de grupuri de opțiuni sunt doar câteva dintre primele fructe ale infrastructurii noastre recent dezvoltate.

Construirea de site -uri web profesionale cu DIVI devine și mai ușoară și mai puternică. Nu aș putea fi mai încântat pentru tine să încerci noua experiență. Clema CSS este doar una dintre numeroasele caracteristici pe care utilizatorii Divi le -au solicitat și le au acum. Deci, dacă nu ați descărcat cel mai recent Divi 5 Alpha, acum este timpul.

Încercați diferite funcții CSS pe întreaga dvs. construcție pentru a vedea cum deschid noi posibilități de proiectare. Această mică caracteristică are un impact puternic și dovedește că Divi 5 este conceput pentru a face procesul de proiectare mai bun ca niciodată.