Navodila za oblikovalce Flexbox in Grid

Kaj morajo oblikovalci vedeti o teh orodjih za transformacijsko postavitev.

CSS je od uvedbe leta 1996 prešel daleč, vendar orodja, ki jih imamo na voljo za postavitev, niso bistveno spremenili. Postavitve tabel so bile neverjetno preveč toge, postavitve, ki temeljijo na plovcih, so bile v bistvu kramp, postavitve, ki temeljijo na pozicioniranju, niso bile prilagodljive in nihče ni mogel učinkovito rešiti velike zapletenosti. Ne razumite me narobe - te metode so nas daleč daleč, vendar niso namenjene zapletenim nameščanjem.

Kratek prihod teh starih načinov za postavitev je postal še bolj očiten z odzivnim spletnim oblikovanjem, v katerem je sprejemanje pretočnosti spleta bistveno.

S flexboxom in omrežjem imamo na koncu orodja, namenjena posebej za postavitev, ki so učinkovitejša in brez praznin, potrebnih s prejšnjimi metodami postavitve. Odklepajo nove možnosti za stare težave, omogočajo stvari, ki prej niso bile možne, in rešujejo resnične težave, s katerimi se soočamo z odzivnim spletnim oblikovanjem.

Flexbox

Flexbox, imenovan CSS fleksibilna polja, je nov način postavitve, ki nam omogoča nadzor poravnave, ki ga ne more izdelati nobena druga metoda CSS. Odlikuje se pri „mikro postavitvi“: zmožnost poravnave, urejanja in razporeditve prostora med predmeti v vsebniku ali spreminjanje širine ali višine elementa, da se najbolje zapolni razpoložljivi prostor.

Izboljšano zavijanje

V odzivnem spletnem oblikovanju se širina, ki je na voljo, spreminja, ko širina vidnega polja spreminja velikosti. To lahko privede do nenamernega zavijanja vsebine, še posebej, če je vsebina daljša, kot je zasnovana ali pa je vsebnik vsebine preozek. Verjetno smo že videli že vse: oblikovanje predstavlja "idealno" dolžino vsebine, a takoj, ko je implementirana in dodana resnična vsebina, se vsebina prelevi v naslednjo vrstico, ker ni bilo dovolj prostora ali se ne razbije posoda. Oboje ni idealno in lahko povzroči porušitev postavitve.

Težava ni v tem, da je razpoložljivi prostor vedno dovolj velik, da lahko sprejme vsebino, ki se lahko razlikuje po dolžini. Tradicionalno smo uporabili medijske poizvedbe CSS za prilagajanje postavitve na določenih mejnih točkah, da omilimo težave pri zavijanju vsebine. Vendar medijska poizvedba ne upošteva dolžine same vsebine - odzivajo se na izrecno širino ali višino. To pogosto povzroči preveliko količino medijskih poizvedb za nadzor določenega dela vsebine na izrecnih mejnih točkah.

Primer izboljšanega zavijanja s Flexboxom

Flexbox reši to težavo, tako da nam omogoča, da izkoristimo razpoložljivi prostor in nato zalijemo vsebino, kadar je ni. To vedenje samodejnega prilagajanja ni samo priročno, ampak izboljša vzdrževanje, saj se nam ni treba zanašati na prelomno točko, da ročno prilagodimo oblikovanje. Zgornji primer prikazuje to vedenje: prikažite lokacijsko oznako poleg naslova, če je na voljo dovolj prostora, in poravnajte oznako lokacije levo pod naslovom, če ni dovolj prostora.

Tradicionalne metode, kot je lebdenje, bi imele za posledico, da bi na manjših prizoriščih ostala oznaka lokacije desno poravnana, kar je manj kot idealno. To lahko popravite tako, da nalepko nalepite levo na določeno prelomno točko. Težava tega pristopa je, da ste odvisni od točke preloma, da spremenite slog svoje vsebine, ki se lahko razlikuje po dolžini.

Izboljšan razmik in poravnava

Kar zadeva razmik in poravnavo v CSS-ju, smo morali biti pametni, da uresničimo vse, kar ni bilo ponavadi privzeto. Celo učinki, ki se zdijo nepomembni, so lahko v CSS-ju zapleteni, na primer navpična poravnava ali enakomerna razdelitev prostora med predmeti, se morajo zanesti na rešitve ali kraje. Nekaterih stvari je povsem nemogoče doseči.

Flexbox to reši tako, da omogoča razporeditev prostora med neznanim številom predmetov znotraj območja neznane širine ali višine in poravnate elemente na osi X ali Y. Deluje podobno, kako lahko orodja za oblikovanje, kot sta Sketch ali Illustrator, nadzorujejo razmik in poravnavo, kar omogoča nadzor, ki ga pričakujemo v spletu.

Primer izboljšane razporeditve prostora s Flexboxom

Odličen primer tega nadzora je zgornji: navigacijski elementi so enakomerno razporejeni, navpično osredotočeni, prvi in ​​zadnji element pa se prilegata robu navigacijskega vsebnika. To bi bilo nemogoče uporabiti tradicionalne metode, kot sta uporaba vdelanih blokov na predmete ali zanašanje na postavitev tabel.

Naročilo vira

Naročilo vira se nanaša na vrstni red, v katerem so elementi prikazani na strani glede na to, kje so v HTML. Elementi se privzeto prikažejo od zgoraj navzdol in privzeto od leve proti desni - njihova širina je določena z lastnostjo prikaza.

Vrstni red dokumenta bi vas moral voditi pri razmišljanju o tem, kako se bo vaš dizajn prilagodil različnim širinim vidnim poljem, vendar je v nekaterih primerih koristno spremeniti, da lahko elemente preuredite. Edini način, da to storite pred flexboxom, je bil skriti element in prikazati drugega, kar ima za posledico podvojen HTML ali se zanesti na absolutno pozicioniranje, ki ne deluje vedno, kadar se vsebina lahko razlikuje po velikosti. S flexboxom lahko preprosto spremenite vrstni red elementov flex, ne da bi morali spreminjati osnovno strukturo HTML.

Primer naročanja artiklov s Flexboxom

Zgornji primer prikazuje naročanje v Flexboxu: logotip prikazujemo na levi strani spodnjega dela noge, ki je skladen z glavo. Na majhnih razgledih prikazujemo lokacije pred logotipom. To preurejanje je smiselno, ker so lokacije v tem kontekstu pomembnejše.

Postavitev mreže

CSS postavitev omrežja je dvodimenzionalni sistem postavitve, ustvarjen posebej za splet. Omogoča nam razdelitev strani na regije, ki jih je mogoče podrobneje opredeliti glede na velikost, položaj in plast, kar ima za posledico neverjetno močan izvorni okvir.

Primerno za namen

CSS še nikoli ni imel pravega orodja za postavitev namenov, zato smo morali biti zelo iznajdljivi, kako lahko uporabimo mrežo pri svojem delu. Za izpolnitev te potrebe so se pojavili mrežni okviri, vendar ne brez uvedbe lastnih težav. Mnogo najbolj priljubljenih mrežnih okvirov zahteva določitev postavitve v označevanju, kar lahko privede do prekrivanja kode, težav z vzdrževanjem in zamegljenosti ločitve strukture dokumenta in predstavitve.

Z mrežo ne potrebujemo več ogrodja mreže - to je izvorni okvir, spečen prav v CSS. Omogoča nam, da na intuitiven način določimo postavitev v CSS-u, pri čemer ves čas sprejemamo privzeto pretočnost spleta. Zmogljivosti tega novega orodja za postavitev so neskončne in omogoča nam, da naredimo načrte, ki so bili mogoči samo z Javascriptom pred njegovim prihodom.

Primer postavitve mreže

Spletne postavitve naslednje generacije

Kar se tiče postavitve, smo bili dolgo časa obtičali v progi. Uveljavljeni vzorci in omejitve prejšnjih orodij za postavitev v CSS so nas v preteklosti vodili po poti homogenosti postavitve. Za ogled ni treba iti daleč po spletu: glava, glavna vsebina, stranska vrstica, podnožje.

Prihod odzivnega spletnega oblikovanja je sprožil nekaj novih idej za postavitev strani, z njo pa se začenjajo pojavljati nekateri dobri vzorci: odrezati stransko vrstico, poenostaviti oblikovanje in se osredotočiti na vsebino. Pojavljamo pa tudi vzorce, ki so postali tako vseprisotni, da slišimo vzklik, da so "vsa spletna mesta videti enako".

Postavitev mreže nam bo omogočila izhod iz razporeditve postavitve, v kateri smo bili, in nam dala orodja, ki jih potrebujemo za izdelavo postavitev naslednje generacije. Končno lahko vsebino nadgradimo, namesto da jo vsilimo v splošne vzorce oblikovanja, ki jih lahko najdemo na vsaki drugi odzivni spletni strani.

Beseda previdnosti

Pomembno je upoštevati, da vsi brskalniki ne podpirajo funkcij flexbox in grid. Upoštevati moramo, kdo je naše občinstvo pri vsakem projektu, in ugotoviti, ali bo večina uporabnikov izkoristila te naprednejše funkcije, hkrati pa zagotoviti smiselno opustitev za nepodprte brskalnike. Popolnoma sprejemljivo je, da uporabnikom starih brskalnikov zagotovite poenostavljeno različico uporabniškega vmesnika in ga izboljšate za uporabnike v novejših brskalnikih.

Še več Veliko več.

Praskali smo le po površini tistega, kar lahko naredi flexbox in mreža. Na srečo je na voljo veliko odlične dokumentacije, ki se dotika zmogljivosti teh novih orodij za postavitev. Tu je nekaj mojih najljubših:

Flexbox

Mreža

Vsakdo, ki gradi splet, se boleče zaveda različnih omejitev, ko gre za postavitev v CSS. Pogosto je to zahtevalo ogrožanje zasnove, tako da deluje, kot je bilo pričakovano v razvoju, ali še huje, pri izvajanju vedenja, ki smo ga potrebovali, se zanaša na Javascript.

Prihod flexbox-a in postavitve omrežja nakazujeta novo obdobje postavitve v spletu. V zvezi s postavitvijo moramo sprejeti novo miselnost, da je ne bi omejile navade, pomanjkljivosti in heksanje preteklosti. Sprejemimo ta nova orodja in obnovimo naše raziskovanje, če je to mogoče s postavitvijo v spletu.