Cum să alegeți grila de fundație potrivită

În videoclipul de astăzi vom vorbi despre cele trei sisteme de rețea care se găsesc în prezent în cadrul Fundației ZURB. Mai precis, vom examina care dintre ele ar trebui să utilizăm în diferite situații. Hai să intrăm!

Am construit un ghid cuprinzător care vă ajută să învățați fundația, indiferent dacă începeți sau doriți să explorați subiecte mai avansate Aflați Fundația.

Alegerea unei rețele de fundație

1. Grila plutitoare

Prima și cea mai lungă servire a rețelelor Fundației este grila flotantă. După cum sugerează și numele, utilizează coloane plutitoare pentru a crea planuri.

Marcajul va fi probabil cunoscut de tine; utilizează aceeași structură de coloane și coloane găsită pe alte sisteme:

 
2
 
10
 
 
 
3
 
9
 

2. Grilă Flex

Cel de-al doilea exemplu a fost introdus în cadrul Fundației 6 și este denumit "rețeaua flexibilă". Este alimentat de CSS flexbox și, deși se comportă foarte asemănător cu grila plată, are câteva caracteristici unice, cum ar fi alinierea verticală și orizontală și dimensionarea automată.

Marcarea este exact aceeași cu grila flotorului; definiți rânduri și coloane și utilizând clase speciale puteți stabili dimensiunea acelor coloane. Cu toate acestea, deoarece această rețea se bazează pe flexbox avem acces la unele capabilități mai avansate. Autosizarea este o astfel de caracteristică; dacă lăsăm o clasă de dimensionare pe o coloană, se va extinde pentru a umple spațiul disponibil:

 
2
 
fără dimensionare
 
 
 
3
 
fără dimensionare
 

Alternativ, folosind a se contracta clasa va micșora coloana la dimensiunea minimă pe care o are conținutul acesteia:

 
2
 
se contracta
 
 
 
3
 
se contracta
 

Pentru mai multe exemple, consultați ecranul de mai sus.

3. Grila XY

Cel de-al treilea exemplu este cea mai recentă rețea (și, după părerea mea, cea mai minunată); grila XY, introdusă în Fundația 6.4. În timp ce, de asemenea, este alimentat de flexbox are unele asemănări cu rețeaua flex, dar există, de asemenea, unele diferențe mari.

Prima diferență semnificativă este că rețeaua XY poate face elemente atât orizontal cât și vertical.

A doua diferență este marcarea. Aici definim un element container (fie cu o clasa de grid-x sau grid-y) și apoi completați-l cu celulă elemente:

 
4
 
2
 
6
 

În mod implicit, nu există niciun jgheab, astfel încât toate celulele vor sta flush cu celulele din jur. În schimb, definim jgheabul pe grid-x element: grilă-margine-x sau grid-padding-x (înlocuind X Pentru o y dacă avem de-a face cu o rețea verticală). Valorile acestor valori pot fi setate folosind variabilele Sass $ grid-margin-jgheaburilor și $ grid-padding-jgheaburilor respectiv. 

Ce grila de fundație ar trebui să alegeți?

Atunci când alegeți grila care trebuie utilizată, decizia trebuie luată pe baza câtorva factori.

1. Suportul pentru browser este cel mai important, deoarece flexbox nu are suport universal (IE fiind browserul discutabil în acest caz). Grila float nu este afectată de suportul flexbox în browsere.
2. În al doilea rând, aveți nevoie de aspectul vertical al grilajului? Dacă da, va trebui să mergeți pentru grila XY.
3. În cele din urmă, cât de important este viteza de scriere a codului și întreținerea pentru dvs.? Grila XY utilizează o sintaxă mult mai simplă decât predecesorii săi, deci va fi mult mai ușor de utilizat.

Pentru mai multe detalii, consultați ecranul de mai sus sau consultați cursurile mele cele mai recente!

• Familiarizarea cu fundația XY Grid Tuts + Course
• Fundația avansată: Utilizarea cursului ZURB Stack Tuts +
• Noțiuni de bază cu Fundația Building Blocks Tuts + Curs