Creați-vă sistemul de proiectare, partea 2: Grilă și aspect

Alegerea modului de gestionare a machetei și a poziționării conținutului este probabil una dintre primele decizii pe care le veți lua atunci când construiți un sistem de proiectare.

Definirea grilei înseamnă crearea sistemului pentru a vă structura conținutul, fie că este vorba de o singură componentă, fie de o pagină.

În acest articol, vom vedea cum poate fi implementat un sistem de grilă și cum se pot folosi unele tehnici CSS pentru a crea machete specifice.

Iată ce vom acoperi:
1) Aspect cu un număr de coloane generate automat - utilizând CSS Grid;
2) Aspect unidimensional - folosind Flexbox;
3) Aspect bidimensional - folosind grila CSS;
4) Aspect bidimensional cu elemente suprapuse - utilizând CSS Grid.

Acest articol face parte dintr-o serie de sisteme de design inspirate din biblioteca noastră de componente web. Biblioteca se bazează pe un sistem solid de globale CSS. Așadar, noi împărtășim lucrurile pe care le-am învățat stabilind stilul global al bibliotecii noastre!

Seria articolelor:
- Partea 1: Tipografie
- Partea 2: Grilă și dispunere
- Partea 3: Culori
- Partea 4: Spațiere
- Partea 5: Icoane
- Partea 6: Butoane

1 - Aspect cu un număr de coloane generate automat

Să zicem că aveți o galerie de produse pe care doriți să o prezentați într-o grilă: toate articolele dvs. trebuie să aibă aceeași lățime (sunt instanțe ale aceleiași componente „produs”, deci au aceeași dimensiune) și au o lățime minimă pentru ca designul să nu se rupă; presupunem că doriți, la diferite dimensiuni de ecran, numărul maxim de articole pe rând; ceva precum biblioteca CodyHouse (redimensionați pagina pentru a vedea schimbarea numărului de articole).

Ar fi ideal să găsiți o modalitate de a determina automat acest număr maxim de articole fără a fi necesar să adăugați un cod CSS nou la diferite interogări media.

Acest lucru se poate face folosind CSS Grid.

Să începem prin crearea unui mixin de grilă (îl vom reutiliza și pentru machete 3 și 4).

Acest mixin este utilizat pentru inițializarea containerului de grilă (cu grilă de afișare) și pentru a seta golul de grilă (care este spațiul liber dintre două elemente adiacente).

Am inclus codul CSS Grid în interiorul unei reguli @supports pentru a viza browserele care acceptă Grila (lăsând în afară și browserele care acceptă vechea specificație CS Grid, cum ar fi IE 11).

Acum putem defini mixinul care va crea galeria noastră; lățimea mină a elementelor va fi singurul argument al acestui mixin:

Funcția minmax ne permite să stabilim o lățime min pentru elementele noastre, în timp ce funcția de repetare () are grijă să creeze efectiv grila.

Acum putem folosi aceste mixinuri astfel:

Și iată un exemplu de aceste mixinuri în acțiune:

Mixinurile pe care le-am definit mai sus nu vor funcționa în versiunea IE și versiunile mai vechi ale Edge (<= 15). Galeria dvs. ar fi încă accesibilă, dar articolele dvs. vor apărea câte unul pe rând (100% lățime).

Dacă trebuie să oferiți un efect mai bun, atunci puteți utiliza proprietatea float pentru a vă recrea galeria, dar nu veți putea modifica numărul de articole pe rând la dimensiuni diferite de ecran: va trebui să setați un număr fix de articole pe rând (acest număr va fi transmis ca al doilea argument la grila mixtă Auto () mixin).

Iată ce devine mixinul de grilă odată cu adăugarea de retragere:

Proprietățile CSS definite în regula @supports sunt cele aplicate atunci când browserul acceptă CSS Grid (noua specificație); în timp ce proprietățile definite în afara @supports sunt aplicate în toate browserele (și acesta este motivul pentru care, în interiorul regulii @supports, a trebuit să adăugăm un pic de stil suplimentar pentru a suprascrie acele proprietăți).

Mixin-ul gridAuto () devine:

Mixinul acceptă acum două argumente: primul este lățimea minimă a elementelor din galerie (la fel ca înainte - va fi folosit doar dacă browserele acceptă CSS Grid), al doilea (care este opțional - valoarea implicită este 3 ) este numărul de articole pe rând pe browserele care nu acceptă CSS Grid (unde se aplică retragerea).

2— Aspect unidimensional

Aceasta este probabil cea mai ușoară dispunere pe care o putem crea: avem elemente pe care dorim să le aranjăm în coloane, cu opțiunea de a personaliza lățimea lor și de a putea totuși să distribuim spațiul între ele în mod egal.

Există puține tehnici pe care le putem folosi pentru a implementa acest tip de aspect. Vom folosi Flexbox în combo cu clase de utilitate pentru a personaliza lățimea articolelor.

Această abordare a fost în jur de mult timp. Este la îndemână, dar dacă nu doriți să utilizați clase de utilități în HTML-ul dvs. (ceva de genul col - 1, col - 5, ...), atunci o metodă diferită este cea pe care o descriu în secțiunea 3, unde creăm același aspect folosind CSS Grid.

Înainte de a defini clasele noastre de grilă, să stabilim o variabilă pe care o vom folosi ca spațiu de grilă:

Să definim o clasă pentru containerul nostru de grilă:

Ne inițializăm containerul flex (folosind flex display) și permitem copiilor să se înfășoare pe mai multe linii, dacă este nevoie (folosind proprietatea flex-wrap).
Marjele negative sunt adăugate pentru a echilibra umplutura pe care o folosim pentru a crea decalajul grilei (a se vedea definiția clasei .col mai jos), astfel încât să nu rămână spațiu gol între elementul .flex-grid și containerul său.

Articolele noastre de grilă vor avea o clasă .col:

Folosim căptușirea pentru a crea diferența dintre elemente și clipul de fundal, astfel încât culoarea de fundal / imaginea elementului .col să nu fie aplicată pe căptușire (lăsând spațiul vizibil).

Nu este necesar să folosiți proprietatea clip-fundal dacă nu intenționați să adăugați o culoare / imagine de fundal la elementul .col (sau dacă elementul .col are un copil la care puteți aplica acest stil de fundal).

În mod implicit, toate elementele .col au o lățime de 100% (flex-base 100%). Putem folosi clase pentru a modifica acea valoare de lățime:

Funcția lățime rotundă este utilizată pentru a rotunji lățimea coloanelor la un număr cu 2 zecimale (acest lucru împiedică ruperea layout-ului în IE).

Aceasta creează clasele .col - 1 până la .col - 12 (puteți modifica valoarea variabilei $ grid-column dacă nu utilizați o grilă de 12 unități).

Dacă doriți să creați un aspect cu două elemente, prima ocupând 9 din cele 12 coloane disponibile, iar cea din urmă 3 rămase, puteți folosi ceva de genul:

Puteți defini, de asemenea, clase diferite pentru interogări media diferite dacă doriți să modificați lățimea elementelor dvs. la dimensiuni de ecran diferite. Ceva asemănător cu:

Iată un exemplu de clase flex în acțiune:

Am decis să includem acest sistem de grile în biblioteca noastră, datorită ușurinței de utilizare. Cu toate acestea, este opțional, puteți utiliza metoda descrisă în continuare (care nu se bazează pe clase de utilități) dacă doriți.

3 - Aspect bidimensional

În aspectul 2, am considerat cazul în care trebuia să controlăm lățimea elementelor din rândul nostru. Nu am considerat deloc înălțimea elementelor.

Dacă dorim să creăm un aspect bidimensional unde să putem controla și înălțimea elementelor noastre, atunci CSS Grid este probabil cea mai bună soluție.

Iată un exemplu de aspect pe care îl puteți crea folosind această tehnică:

Vom reutiliza mixina grilă (definită în secțiunea 1) și vom adăuga un al doilea mixin gridLayout ().
Acest nou mixin va accepta, ca argument, o listă de perechi de numere:

Pentru fiecare element din aspectul dvs., va trebui să treceți o pereche de numere (în exemplul de mai sus, trec 4 perechi, ceea ce înseamnă că aspectul nostru este compus din 4 elemente). Pentru fiecare cuplu de numere, primul va fi numărul de coloane pe care elementul trebuie să le ocupe, al doilea numărul de rânduri.

În codul de mai sus, spunem: primul element din aspect trebuie să ocupe 7 coloane și 2 rânduri; al doilea element 5 coloane și 1 rând; același lucru pentru cel de-al treilea element; ultimele 12 coloane (100% lățime) și 1 rând.

Să vedem cum arată mixinul:

În primul rând, folosim grilă-șablon-coloane pentru a defini grila noastră de coloane; aceasta va crea un șablon de 12 coloane, toate având aceeași lățime.

Observați că nu avem definite șablonul-șablon-rânduri (sau grilă-rânduri auto). Acest lucru se datorează mai ales faptului că înălțimea rândului depinde de tipul de conținut pe care doriți să îl afișați: puteți decide să aveți rânduri cu o înălțime fixă, rânduri care sunt un procent din viewport sau doar să lăsați conținutul dvs. să determine înălțimea. Puteți specifica acest lucru în clasa dvs. atunci când apelați mixin.

Bucla „fiecare” este locul unde sunt alocate elementele: pentru fiecare dintre perechile trecute la mixin, luăm elementul corespunzător (folosind selectorul: al șaptelea tip) și îl plasăm în grila noastră (folosind cuvântul cheie span ).

Iată un exemplu de mixin în acțiune:

Notă: al doilea număr din fiecare pereche nu este obligatoriu (în mixin, verificăm dacă a doua valoare este trecută înainte de a seta proprietatea de final de grilă).

Trecerea unui singur număr per articol vă va permite să creați un aspect unidimensional; aceasta este o alternativă la metoda descrisă în secțiunea 2 (Flexbox + clase de utilități).

Putem modifica mixin gridLayout () pentru a adăuga un efect de rezervă pentru browserele care nu acceptă CSS Grid. Rețineți că, odată cu declinul, nu veți putea controla înălțimea articolelor dvs.

4 - Aspect bidimensional cu elemente suprapuse

Acesta este un caz de aspect specific: să zicem că doriți să creați un aspect bidimensional (așa cum am făcut cu cazul 3 în care puteți seta atât lățimea cât și înălțimea articolelor dvs.), dar doriți să controlați poziția de început / final a dvs. de asemenea, elemente (astfel încât să se poată suprapune).

Cu mixina gridLayout (), elementele sunt plasate automat în grilă fără a se suprapune. Nu veți putea crea așa ceva:

Putem crea un nou mixin AdvancedAdvanced () care va aduce aspectul nostru cu un pas mai departe; iată cum îl vom folosi:

De această dată, va trebui să trecem pentru fiecare element din aspectul nostru, patru numere: primele două sunt poziția de început și sfârșit a elementului în coloanele grilei, în timp ce ultimele două poziția de început și sfârșit a rândului.

În exemplul de mai sus, avem 3 elemente: primul începe de la coloana 1 și se termină la coloana 8 (ceea ce înseamnă, este nevoie de 7 coloane în aspectul nostru -> amintim coloana 8 marchează sfârșitul elementului, deci nu este inclus) și începe de la rândul 1 și se termină la rândul 3 (2 rânduri); cea de-a doua ia aceleași coloane, dar începe de la rândul 3 și se termină la rândul 5 (2 rânduri); cel de-al treilea începe de la coloana 5 și preia toate coloanele rămase (-1 înseamnă că merge până la coloana 12, dar include și ea) și începe de la rândul 2 și se termină la rândul 4 (2 rânduri).

Iată mixinul nostru:

Aceasta este destul de similară cu cea gridLayout (); de data aceasta, însă, folosim grila-coloană (/ rând) -start / end pentru a specifica poziția elementelor noastre.

Iată un exemplu de mixin în acțiune:

Putem oferi și un defecțiune pentru acest mixin; rețineți că nu veți putea crea efectul de suprapunere, precum și personalizați înălțimea articolelor.

Este tot ce trebuie să împărtășesc modul în care stabilim sistemul grilă pentru biblioteca CodyHouse. Ca de obicei, suntem deschiși la sugestii! Orice feedback este binevenit.

Sper că v-a plăcut articolul! Pentru mai multe nuggets pentru design web, urmați-ne aici pe Medium sau Twitter.