Noi funcții CSS care schimbă designul web

A fost o vreme când designul web a devenit monoton. Designerii și dezvoltatorii au creat aceleași tipuri de site-uri web din nou și din nou, atât de mult încât am fost batjocoriți de oamenii din propria noastră industrie pentru că am creat doar două tipuri de site-uri web:

care dintre cele două site-uri web posibile proiectați în prezent? pic.twitter.com/ZD0uRGTqqm

– Jon Gold (@jongold) 2 februarie 2016

Este aceasta limita a ceea ce mințile noastre „creative” pot realiza? Acest gând a trimis în inima mea un sentiment incontrolabil de tristețe.

Nu vreau să recunosc, dar poate că asta era cel mai bun lucru pe care l-am putut realiza atunci. Poate că nu aveam instrumente potrivite pentru a face modele creative. Cerințele web-ului au evoluat rapid, dar am fost blocați cu tehnici străvechi, cum ar fi plutitorii și mesele.

Astăzi, peisajul designului s-a schimbat complet. Suntem echipați cu instrumente noi și puternice — Grilă CSS, proprietăți personalizate CSS, forme CSS și writing-mode CSS, pentru a numi câteva — pe care le putem folosi pentru a ne exersa creativitatea.

Cum CSS Grid a schimbat totul

Grilele sunt esențiale pentru web design; știai deja asta. Dar te-ai oprit să te întrebi cum ai proiectat grila pe care o folosești în principal?

Majoritatea dintre noi nu au făcut-o. Folosim grila cu 12 coloane care a devenit un standard în industria noastră.

• Dar de ce folosim aceeași grilă?
• De ce sunt grilele formate din 12 coloane?
• De ce grilele noastre au dimensiuni egale?

Iată un răspuns posibil la motivul pentru care folosim aceeași grilă: nu vrem să facem calculul .

În trecut, cu grile pe bază de plutire, pentru a crea o grilă cu trei coloane, trebuia să calculați lățimea fiecărei coloane, dimensiunea fiecărei jgheaburi și cum să poziționați fiecare element de grilă. Apoi, trebuia să creați clase în HTML pentru a le stila corespunzător. A fost destul de complicat.

Pentru a ușura lucrurile, am adoptat cadrele grid. La început, cadre precum 960gs și 1440px ne permiteau să alegem între grile cu 8, 9, 12 și chiar 16 coloane. Mai târziu, Bootstrap a câștigat războiul cadrelor. Deoarece Bootstrap permitea doar 12 coloane, iar schimbarea a fost o durere, în cele din urmă ne-am stabilit pe 12 coloane ca standard.

Dar nu ar trebui să dăm vina pe Bootstrap. A fost cea mai bună abordare pe atunci. Cine nu și-ar dori o soluție bună, care funcționează cu un efort minim? Odată rezolvată problema grilei, ne-am îndreptat atenția către alte aspecte ale designului, cum ar fi tipografia, culoarea și accesibilitatea.

Acum, odată cu apariția CSS Grid, grilele au devenit mult mai simple . Nu trebuie să ne mai temem de matematica grilă. A devenit atât de simplu încât aș susține că crearea unei grile este mai ușoară cu CSS decât într-un instrument de proiectare precum Sketch!

De ce?

Să presupunem că doriți să faceți o grilă cu 4 coloane, fiecare coloană având o dimensiune de 100 de pixeli. Cu CSS Grid, puteți scrie 100px de patru ori în declarația grid-template-columns și va fi creată o grilă cu 4 coloane.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

Dacă doriți o grilă cu 12 coloane, trebuie doar să repetați 100px de 12 ori.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

Da, codul nu este frumos, dar nu ne preocupă optimizarea pentru calitatea codului (încă) – încă ne gândim la design. CSS Grid facilitează crearea unei grile pe web pentru oricine – chiar și pentru un designer fără cunoștințe de codare.

Dacă doriți să creați coloane de grilă cu lățimi diferite, trebuie doar să specificați lățimea dorită în declarația grid-template-columns și ești gata.

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

Faceți grilele receptive

Nicio discuție despre CSS Grid nu este completă fără a vorbi despre aspectul receptiv. Există mai multe moduri de a face CSS Grid receptiv. O modalitate (probabil cea mai populară modalitate) este utilizarea unității fr . O altă modalitate este de a modifica numărul de coloane cu interogări media.

fr este o lungime flexibilă care reprezintă o fracție. Când utilizați unitatea fr , browserele împart spațiul deschis și alocă zonele pe coloane pe baza multiplului fr . Aceasta înseamnă că pentru a crea patru coloane de dimensiune egală, ai scrie 1fr patru ori.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

Să facem câteva calcule pentru a înțelege de ce sunt create patru coloane de dimensiuni egale .

În primul rând, să presupunem că spațiul total disponibil pentru grilă este 1260px .

Înainte de a aloca lățime fiecărei coloane, CSS Grid trebuie să știe cât spațiu este disponibil (sau rămas). Aici, scade declarațiile grip-gap din 1260px . Deoarece fiecare decalaj este de 20 20px , ne rămâne cu 1200px pentru spațiul disponibil. (1260 - (20 * 3) = 1200) .

Apoi, adună multiplii fr . În acest caz, avem patru multipli de 1fr , așa că browserele împart 1200px la patru. Fiecare coloană este astfel 300px . Acesta este motivul pentru care obținem patru coloane egale.

Cu toate acestea, grilele create cu unitatea fr nu sunt întotdeauna egale !

Când utilizați fr , trebuie să știți că fiecare unitate fr este o fracțiune din spațiul disponibil (sau rămas).

Dacă aveți un element care este mai lat decât oricare dintre coloanele create cu unitatea fr , calculul trebuie făcut diferit.

De exemplu, grila de mai jos are o coloană mare și trei coloane mici (dar egale), chiar dacă este creată cu grid-template-columns: 1fr 1fr 1fr 1fr .

După ce au împărțit 1200px în patru și au alocat 300px fiecărei coloane de 1fr , browserele își dau seama că primul element de grilă conține o imagine de 1000px . Deoarece 1000px este mai mare de 300px , browserele aleg să aloce 1000px primei coloane.

Asta înseamnă că trebuie să recalculăm spațiul rămas.

Noul spațiu rămas este 1260px - 1000px - 20px * 3 = 200px ; acest 200px este apoi împărțit la trei în funcție de cantitatea de fracții rămase. Fiecare fracție este atunci 66px . Sperăm că asta explică de ce unitățile fr nu creează întotdeauna coloane cu lățime egală.

Dacă doriți ca unitatea fr să creeze coloane de lățime egală de fiecare dată, trebuie să o forțați cu minmax(0, 1fr) . Pentru acest exemplu specific, veți dori, de asemenea, să setați proprietatea max-width a imaginii la 100%.

Notă : Rachel Andrew a scris un articol uimitor despre modul în care diferitele valori CSS (conținut minim, conținut maxim, fr etc.) afectează dimensiunile conținutului. Merită citit!

Grile cu lățime inegală

Pentru a crea grile cu lățimi inegale, pur și simplu variați multiplu fr. Mai jos este o grilă care urmează raportul de aur, unde a doua coloană este de 1,618 ori față de prima coloană, iar a treia coloană este de 1,618 ori față de a doua coloană.

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

Schimbarea grilelor la diferite puncte de întrerupere

Dacă doriți să schimbați grila la diferite puncte de întrerupere, puteți declara o nouă grilă într-o interogare media.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

Nu este ușor să creezi grile cu CSS Grid? Designerii și dezvoltatorii anteriori ar fi ucis pentru o astfel de posibilitate.

Grile bazate pe înălțime

Era imposibil să facem grile pe baza înălțimii unui site web anterior, deoarece nu exista o modalitate de a spune cât de înalt este fereastra de vizualizare. Acum, cu unități de vizualizare, CSS Calc și CSS Grid, putem chiar să facem grile bazate pe înălțimea ferestrei.

În demonstrația de mai jos, am creat pătrate de grilă pe baza înălțimii browserului.

Jen Simmons are un videoclip grozav care vorbește despre proiectarea pentru a patra margine - cu CSS Grid. Vă recomand cu căldură să îl urmăriți.

Plasarea elementului în grilă

Poziționarea elementelor din grilă a fost o mare durere în trecut, deoarece a trebuit să calculezi proprietatea margin-left .

Acum, cu CSS Grid, puteți plasa elemente de grilă direct cu CSS fără calcule suplimentare.

 .grid-item { grid-column: 2; /* Put on the second column */ } 

Puteți chiar să spuneți unui element de grilă câte coloane ar trebui să ocupe cu cuvântul cheie span .

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

Inspirații

Grila CSS vă permite să aranjați lucrurile atât de ușor încât puteți crea rapid o mulțime de variante ale aceluiași site web. Un prim exemplu este pagina de pornire personală a lui Lynn Fisher.

Dacă doriți să aflați mai multe despre ce poate face CSS Grid, consultați laboratorul lui Jen Simmon, unde ea explorează cum să creați diferite tipuri de layout-uri cu CSS Grid și alte instrumente.

Pentru a afla mai multe despre CSS Grid, consultați următoarele resurse:

• Master CSS Grid, Rachel Andrew și Jen Simmons tutoriale video
• Layout Land, Jen Simmons O serie de videoclipuri despre aspect
• Atelier de layout CSS, Rachel Andrew Un curs de layout CSS
• Învață CSS Grid, Jonathan Suh Un curs gratuit despre CSS Grid.
• Grid critters, Dave Geddes Un mod distractiv de a învăța CSS Grid

Proiectare cu forme neregulate

Suntem obișnuiți să creăm machete dreptunghiulare pe web deoarece modelul casetei CSS este un dreptunghi. Pe lângă dreptunghiuri, am găsit și modalități de a crea forme simple, cum ar fi triunghiuri și cercuri.

Astăzi, nu trebuie să ne oprim aici. Cu formele CSS și clip-path la dispoziția noastră, putem crea forme neregulate fără prea mult efort.

De exemplu, Aysha Anggraini a experimentat cu un aspect inspirat de benzi desenate, cu grilă CSS și clip path de decuplare .

Hui Jing explică cum să folosești formele CSS într-un mod care să permită textului să curgă de-a lungul curbei Beyonce.

Dacă doriți să aprofundați, Sara Soueidan are un articol care vă va ajuta să creați machete non-dreptunghiulare.

Formele CSS și clip-path vă oferă posibilități infinite de a crea forme personalizate unice pentru modelele dvs. Din păcate, din punct de vedere al sintaxelor, formele CSS și clip-path nu sunt la fel de intuitive ca Grila CSS. Din fericire, avem instrumente precum Clippy și Shape Path Editor din Firefox care ne ajută să creăm formele pe care le dorim.

Comutarea fluxului de text cu writing-mode CSS

Suntem obișnuiți să vedem cuvintele curgând de la stânga la dreapta pe web, deoarece web-ul este creat în principal pentru oameni vorbitori de engleză (cel puțin așa a început).

Dar unele limbi nu curg în această direcție. De exemplu, cuvintele chinezești se pot citi de sus în jos și de la dreapta la stânga.

writing-mode al CSS face textul să curgă în direcția nativă pentru fiecare limbă. Hui Jing a experimentat un aspect bazat pe chineză, care curge de sus în jos și de la dreapta la stânga pe un site web numit Penang Hokkien. Puteți citi mai multe despre experimentul ei în articolul ei, „The One About Home”.

Pe lângă articole, Hui Jing are o discuție grozavă despre tipografie și writing-mode , „When East Meets West: Web Typography and How It Can Inspire Modern Layouts”. Vă încurajez cu căldură să îl urmăriți.

Chiar dacă nu proiectați pentru limbi precum chineza, aceasta nu înseamnă că nu puteți aplica writing-mode CSS în engleză. În 2016, când am creat Devfest.asia, am flexibilizat un mic mușchi creativ și am optat pentru rotirea textului cu writing-mode .

Laboratorul lui Jen Simmons conține și multe experimente cu writing-mode . Recomand cu căldură să-l verificați și.

Efortul și ingeniozitatea merg pe cale lungă

Chiar dacă noile instrumente CSS sunt utile, nu aveți nevoie de niciunul dintre ele pentru a crea site-uri web unice. Puțină ingeniozitate și ceva efort merg departe.

De exemplu, în Super Silly Hackathon, Cheeaun rotește întregul site cu -15 grade și te face să arăți prost când citești site-ul.

Darin Senneff a creat un avatar de conectare animat cu ceva trigonometrie și GSAP. Uită-te la cât de drăguță este maimuța și cum își acoperă ochii atunci când te concentrezi pe câmpul parolei. Similar cu formularul de conectare interactiv, există și un calculator foarte frumos și interactiv, care ajută la estimarea cantității de venituri pierdute atunci când utilizați servicii externe, cum ar fi JustEat!

Când am creat pagina de vânzări pentru cursul meu, Learn JavaScript, am adăugat elemente care îl fac pe cel care învață JavaScript să se simtă ca acasă.

Încheierea

Un design web unic nu se referă doar la aspect. Este vorba despre modul în care designul se integrează cu conținutul. Cu puțin efort și ingeniozitate, toți putem crea modele unice care vorbesc publicului nostru. Instrumentele pe care le avem astăzi la dispoziție ne ușurează munca.

Întrebarea este, îți pasă suficient pentru a realiza un design unic? Sper să faci.