Kujundusjuhend Flexboxi ja Gridi jaoks

Mida peavad disainerid nende ümberkujundavate paigutusriistade kohta teadma.

CSS on pärast selle kasutuselevõttu 1996. aastal jõudnud kaugele, kuid tööriistad, mis meil paigutuse jaoks saadaval on, pole palju muutunud. Tabelipaigutused olid uskumatult liiga jäigad, ujukipõhised paigutused olid põhimõtteliselt häkk, positsioneerimispõhised paigutused polnud kohandatavad ega ükski neist suutnud tõhusalt hakkama saada suure keerukusega. Ärge saage minust valesti aru - need meetodid jõudsid meile tõesti kaugele, kuid need pole ette nähtud keerukate paigutuste jaoks.

Nende vanade paigutusmeetodite puudused on veelgi ilmsemaks reageerivas veebidisainis, milles veebi voolavuse omaksvõtmine on ülioluline.

Flexboxi ja ruudustiku abil on meil lõpuks spetsiaalselt paigutuseks mõeldud tööriistad, mis on tõhusamad ja varasemate paigutusmeetodite korral vajalikest häkkidest puuduvad. Need avavad vanade probleemide jaoks uued võimalused, võimaldavad asju, mis varem polnud võimalik, ja lahendavad reaalseid probleeme, millega me reageeriva veebidisaini abil silmitsi seisame.

Flexbox

Flexbox ehk CSS elastsed kastid on uus paigutusmeetod, mis annab meile joondamise kontrolli, mida ükski teine ​​CSS-meetod ei suuda toota. See paistab silma mikrotasandil: võimalus joondada, järjestada ja jaotada ruumi konteineris olevate esemete vahel või muuta elemendi laiust või kõrgust, et saadaolevat ruumi kõige paremini täita.

Täiustatud pakkimine

Reageeriva veebikujunduse korral varieerub saadaolev laius, kuna vaateakna laius muudab suurust. See võib põhjustada sisu tahtmatu pakkimise, eriti kui sisu on kavandatud pikem või kui sisu konteiner on liiga kitsas. Oleme ilmselt kõik varem näinud: kujundus moodustab „ideaalse” sisu pikkuse, kuid niipea, kui see on rakendatud ja reaalne sisu on lisatud, mähitakse sisu järgmisele reale, kuna seal polnud piisavalt ruumi või puhkeb sellest välja konteiner. Mõlemad ei ole ideaalsed ja võivad paigutuse puruneda.

Probleem pole selles, et pole kindel, et saadaolev ruum on alati piisavalt suur, et mahutada erineva pikkusega sisu. Traditsiooniliselt oleme CSS-i meediapäringuid kasutanud konkreetsetes murdepunktides paigutuse kohandamiseks, et leevendada sisu mähkimisega seotud probleeme. Kuid meediumipäringud ei võta arvesse sisu enda pikkust - nad vastavad selgelt määratletud laiusele või kõrgusele. Selle tulemuseks on sageli liiga suur hulk meediumipäringuid konkreetse sisu kontrollimiseks otsestes murdepunktides.

Näide täiustatud ümbrisest Flexboxiga

Flexbox lahendab selle probleemi, võimaldades meil saadaolevat ruumi ära kasutada ja sisu ümber mähkida siis, kui see pole nii. See automaatne kohandamine pole mitte ainult mugav, vaid parandab hooldatavust, kuna me ei pea stiili käsitsi kohandamiseks lootma murdepunkti. Ülaltoodud näide näitab seda käitumist: kuvage pealkirja kõrval asukoha silt, kui ruumi on piisavalt, ja kui piisavalt ruumi pole, joondage asukoha silt pealkirja all vasakul.

Traditsiooniliste meetodite (nt hõljumine) korral oleks asukoha silt jäänud väiksematele vaateavadele paremale joondatud, mis on vähem kui ideaalne. Saate seda parandada, hõljudes silti konkreetses murdepunktis vasakule. Selle lähenemisviisi probleem on see, et olete oma sisu kujunduse muutmiseks sõltuv murdepunktist, mille pikkus võib varieeruda.

Täiustatud vahekaugus ja joondamine

Kui tegemist on CSS-i eraldamise ja joondamisega, siis pidime olema nutikad, et midagi ette võtta, mis polnud vaikekäitumine. Isegi triviaalsena tunduvad efektid võivad CSS-is olla keerukad, näiteks vertikaalne joondamine või ruumi ühtlane jaotamine üksuste vahel, peavad tuginema ümbersuunamistele või häkkidele. Mõnda asja on täiesti võimatu saavutada.

Flexbox lahendab selle, võimaldades ruumi jaotamise tundmatu arvu üksuste vahel tundmatu laiuse või kõrgusega piirkonnas ja joondage elemendid X- või Y-teljel. See toimib sarnaselt sellega, kuidas kujundusriistad, näiteks Sketch või Illustrator, saavad juhtida vahemaid ja joondamist, võimaldades kontrolli, mida me veebis ootame.

Näide täiustatud ruumijaotusest Flexboxi abil

Selle juhtimise suurepärast näidet võib näha ülalpool: navigatsioonielemendid on jaotatud ühtlaselt, vertikaalselt keskele ning esimene ja viimane element asuvad navigatsioonimahuti serva lähedal. See oleks olnud võimatu traditsioonilisi meetodeid kasutades, nagu näiteks sisemise ploki rakendamine üksustele või tuginedes tabeli paigutusele.

Allikatellimus

Allika järjekord viitab järjekorrale, milles elemendid lehel kuvatakse vastavalt HTML-i ilmumise kohale. Vaikimisi kuvatakse elemente ülalt alla ja vaikimisi vasakult paremale - nende laiuse määrab nende kuva omadus.

Dokumendi loomulike allikate järjekord peaks juhendama teid, kui mõelda, kuidas teie kujundus kohandub erineva vaateakna laiusega, kuid on kordi, kui üksuste ümberkorraldamiseks on kasulik seda muuta. Ainus viis seda enne flexboxi kasutamist oli elemendi peitmine ja teise kuvamine, mille tulemuseks oli HTML-i dubleerimine, või tugineda absoluutsele positsioneerimisele, mis ei toimi alati, kui sisu suurus võib erineda. Flexboxi abil saate lihtsalt paindlike üksuste järjekorda muuta, ilma et peaksite muutma aluseks olevat HTML-i struktuuri.

Näide kauba tellimisest Flexboxi abil

Ülaltoodud näide demonstreerib Flexboxis tellimist: jaluse vasakus servas kuvame logo, mis on kooskõlas päisega. Väikestes vaatepordides kuvame asukohad logo ees. See ümberkorraldamine on mõttekas, kuna asukohad on selles kontekstis olulisemad.

Võre paigutus

CSS-ruudustik on kahemõõtmeline paigutussüsteem, mis on loodud spetsiaalselt veebi jaoks. See annab meile võimaluse jagada leht regioonideks, mida saab igaüks täiendavalt määratleda suuruse, positsiooni ja kihi järgi, mille tulemuseks on uskumatult võimas algne raamistik.

Sobib otstarbeks

CSS-il pole kunagi olnud sihtotstarbelisele paigutusele sobivat tööriista, seega pidime olema üsna leidlikud, kuidas oma tööd ruudustikku rakendada. Selle vajaduse täitmiseks on loodud võrguraamistikud, kuid mitte oma probleeme tutvustamata. Paljud kõige populaarsemad ruudustikuraamistikud nõuavad märgistuses paigutuse määratlemist, mis võib põhjustada koodi paisumist, hooldatavuse probleeme ja hägustab dokumendi struktuuri ja esitluse eraldamist.

Võrgu abil ei vaja me enam ruudustiku raamistikku - see on looduslik raamistik, mis on küpsetatud otse CSS-i. See võimaldab meil CSS-is paigutust intuitiivselt määratleda, hõlmates samal ajal veebi vaikimisi voolavust. Selle uue paigutustööriista võimalused on lõputud ja see võimaldab meil teostada paigutusi, mis olid Javascriptiga võimalikud ainult enne selle saabumist.

Võrgustiku paigutuse näide

Järgmise põlvkonna veebipaigutused

Mis puutub paigutusse, siis oleme juba mõnda aega ummikus rööpas. CSS-is väljakujunenud mustrid ja varasemate paigutustööriistade piirangud on meid minevikus viinud küljenduse homogeensuse teele. Selle tuvastamiseks ei pea te veebis kaugele minema: päis, põhisisu, külgriba, jalus.

Reageeriva veebikujunduse saabumine on käivitanud uusi ideid lehe paigutuseks ja koos sellega hakkavad tekkima ka head mustrid: tõmmake külgriba ümber, lihtsustage kujundust ja keskenduge sisule. Kuid näeme ka kujunemas mustreid, mis on muutunud nii üldlevinud, et kuuleme hüüatust, et “kõik veebisaidid näevad välja ühesugused”.

Võrgustiku paigutus võimaldab meil väljuda paigutusest, kus oleme käinud, ja annab meile tööriistad, mida vajame järgmise põlvkonna paigutuste loomiseks. Saame lõpuks sisu üles ehitada, selle asemel et sundida seda üldisteks kujundusmustriteks, mida võib leida kõigilt teistelt tundlikelt veebisaitidelt.

Ettevaatust!

Oluline on märkida, et mitte kõik brauserid ei toeta flexboxi ja ruudustiku funktsioone. Peame arvestama, kes on iga projekti jaoks meie vaatajaskond, ja otsustama, kas enamus kasutajaid saavad neist täpsematest funktsioonidest kasu, pakkudes samal ajal mõistlikku varu mitte toetavatele brauseritele. On täiesti vastuvõetav pakkuda pärand brauserites kasutajatele teie kasutajaliidese lihtsustatud versiooni ja täiustada seda uuemate brauserite kasutajatele.

Seal on veel. Palju muud.

Me oleme ainult kriimustanud pinda, mida flexbox ja võrk saavad teha. Õnneks on saadaval palju suurepäraseid dokumente, mis puudutavad nende uute paigutuse tööriistade võimalusi. Siin on mõned minu lemmikud:

Flexbox

Võrgustik

Kõik, kes on veebi loonud, on CSS-i paigutusega seoses mitmesugustest piirangutest valusalt teadlikud. Sageli nõudis see disainilahenduse kompromiteerimist, nii et see toimiks arenduses ootuspäraselt, või mis veelgi hullem, tuginedes vajaliku käitumise rakendamisel Javascriptile.

Flexboxi ja ruudustiku paigutuse saabumine tähistab uut paigutuse ajajärku veebis. Peame oma kujunduse osas omaks võtma uue mõtteviisi, et mitte olla piiratud mineviku harjumuste, puuduste ja häkkidega. Võtame omaks need uued tööriistad ja uuendame veebipaigutuse võimaluste uurimist.