Við byrjum öll einhvers staðar. Sem nýr hönnuður gat ég ekki annt um byggingu í hönnun minni. Ég myndi opna Photoshop og ýta á dílar þar til ég gerði eitthvað sem ég hélt horfði kalt. Eins og ég lærði að kóða, var ferlið mitt á sama hátt lýðræðislegt.
Ég lít ekki aftur á gömlu dagana með of mikilli hrifningu. Verkið mitt var slæmt og óskýrt. Ég hafði engin skýr markmið. Sem upphaf, geri ég ráð fyrir að það er ekki svo slæmt, miðað við að flestar hugmyndirnar mínar komu frá Photoshop námskeiðum, verk mín voru ekki hræðileg.
En þá lærði ég um netkerfi. Ég gleymi nákvæmlega hvenær og hvernig þær voru vinsælar notaðir í vefhönnun, en allt í einu, hvert vefhönnun tengt síða sem ég fór til var að springa með greinum um 960.gs eða eitthvað annað netkerfi. Mikilvægi þess að veita samkvæm sjónræna uppbyggingu í útliti okkar var lögð áhersla á öll stóru nöfnin og breytt í þróun.
Rétt eins og hratt varð stefna iðnaður staðall, og nú flestir ekki hugsa tvisvar um hvort við ætlum að innleiða rist kerfi eða ekki. Eina spurningin er hverjir? Ætum við að fara með einn af stóru nöfnum eða minna þekktum afbrigði, eða jafnvel gera okkar eigin?
Í þessari grein langar mig að líta á aðra valkostinn: nýtt og minna þekkt netkerfi. Það er alltaf einhver þarna úti sem kemur upp með nýjar leiðir til að leysa hinar ýmsu vandamál skipulagsins og ég held að það sé mikilvægt að kynnast eins mörgum aðferðum og mögulegt er. Lítum því á nokkrar grunnupplýsingar.
34Grid er allt um jafnan dálks dreifingu. Það getur móts við ójafna dreifingu eins og heilbrigður, en það er ekki aðal tilgangur þessarar ristakerfis. Fyrir þá sem vilja skipta flestum eða öllum síðum þínum inn í lárétta jafna hluta, þá er þetta ramma þín.
Hvernig það virkar
Ramminn er hannaður til að aðlagast þörfum þínum, þannig að þú hleður ekki bara niður og fer. Þú þarft að stilla ristina þína á heimasíðu verkefnisins fyrst. A fljótur formur gerir þér kleift að ákvarða hversu margar dálkar passa í röð, hversu stór mörkin þín verða og hvort CSS3 skiptir yfir í súlurnar eða ekki, þegar sjónarhornið breytist stærð.
Kóðinn sjálft er skipt í tvo CSS skrár: einn með grunnkóðanum og einn með öllum fjölmiðlum. CSS flokkarnir eru einfaldar. Notkun '.col_1' í dálki mun fylla röðina í 100%. '.col_2' mun búa til dálk með breidd 50% og svo framvegis.
Að auki eru sjálfgefnar þættir, hlutir og sumir aðrir sjálfkrafa breyttar. Það er auka bekk til að hjálpa myndbandshópum að haga sér. Vefsíða verkefnisins veitir ráðgjöf um hvernig á að fá Facebook og Twitter embættismenn til að leika vel.
Göllum
Það virðist ekki vera nokkurn veginn að hreppa dálka, eða búa til flóknari dálkafyrirkomulag í einum línu. Á hinn bóginn, ef þú þarft ekki flókið, og þú vilt bara einfalda ramma sem þú getur breytt þegar þú þarft að, 34Grid mun gera starfið.
Einfalt rist er móttækilegur valkostur sem maxes út á breidd 1140 punktar. Með öðrum orðum, meðan það er hannað til að leika vel við töflur og síma, tryggir Simple Grid að stærri skjáir séu ekki vinstri út.
Hvernig það virkar
Eins og nafnið gefur til kynna er þetta ristakerfi alveg létt. Allt þetta kemur í fjögurra kilobyta óþjappað CSS skrá.
Flokkur nöfn eru hönnuð til að skilja auðveldlega: '.col-2-6' mun skipta röðinni í sex dálka og skilgreina dálkbreiddina í tvær dálkar breiður. Hver röð er hægt að skipta í eina dálk, '.col-1-1', eða tveir, þrír, fjórir, osfrv allt að tólf.
Göllum
Eins og 34Grid virðist ekki vera neitt ákvæði fyrir hreiður dálka. Einnig er hægt að meðhöndla margar línur í fyrsta og síðasta dálki, geta valdið erfiðleikum við að búa til, til dæmis myndgallerí.
Þessi er fyrir þá sem vilja einfaldan rist með einfaldri ensku nöfn í flokki. Það er móttækilegt, auðvelt að skilja og fljótt útfært.
Hvernig það virkar
Eftir að venjulega '.container' og'grid 'þættirnir eru settar inn eru súlurnar framleiddar á gamaldags hátt. Ein tegund ('.unit') er notuð til að skilgreina almennar eiginleikar dálks, og annar flokkur er notaður til að skilgreina breiddina. Rúður er hægt að skipta í 2-5 dálka og flokkarheiti líta allir út eins og þetta: '.on-of-three, .two-of-three'.
Einnig eru nokkrar helstu leturgerðir.
Göllum
Enn og aftur, þetta er rist ramma ætlað fyrir óbrotinn skipulag, svo engin ákvæði fyrir hreiður dálka. Einnig er aðeins eitt brotalið, sett á 650 breidd breiddar á útsýnisbreidd, þannig að sum dálkarnir þínir kunna að verða ofarlega oftar en áður.
Matt (AKA Boon ) er svolítið eins og ég. Hann elskar hönnun, en elskar ekki stærðfræði alveg eins mikið. Þess vegna, hans Hlutfallsleg rist virðast gera burt með endalausum útreikningum eins mikið og mögulegt er með því að fara eftir box-sizing eign. Niðurstaðan er heill, en samt frekar léttur, ristarkerfi sem nær yfir undirstöðurnar þínar fyrir móttækilegan skipulag.
Hvernig það virkar
Þegar ég segi að þetta kerfi veltur á box-sizing , Meina ég að dálkar séu gefnir hundraðshlutar án þess að reikna með ristum. Fastur rennibekkir eru skilgreindir af padding ; og box-sizing tryggir að dálkarnir leika vel saman.
Gutter breidd og flestar aðrar mælingar eru skilgreindar með "ems". Sannar að nafni þessarar ristar eru dálkaflokkar hlutfallslegir (þ.e. .col-one-third , .col-two-thirds ) og dálkar eru meira eða minna óendanlega nestable, sem er eitthvað sem mér líkar mjög mikið við.
Flokkar eru innifalin til að breyta dálkarmælingum á þremur mismunandi brotstigum. Fjölmiðlafyrirspurnirnar eru byggðar á "hreyfanlegur-fyrst" tísku, í samræmi við venjulegar venjur.
Það er sérstakt sniðmát fyrir Internet Explorer 8 og eldri. Sjást þar sem IE8 styður ekki fjölmiðlafyrirspurnir og útgáfur eldri en það styður ekki box-sizing , þeir eru með fastbreiddar skipulag.
Einnig er með SASS (bæði .sass og .scss) skrár til að auðvelda og auðvelda netkerfisnetið.
Göllum
Ég myndi ekki huga að hafa fleiri dálkbreiddar til að vinna með (fimmta, sjötta og áttunda). Annars er þetta að mestu villa-frjáls og vel hringlaga rist kerfi.
Af háþróuðu ristakerfi á þessum lista, Einn% er einfaldasta, en það er alls ekki ófullkomið. Það er hannað til að koma til móts við nokkuð stærri skjái og stórar UI-þættir, ef heimasíða hennar er einhver vísbending.
Nafnið kemur frá þeirri staðreynd að rist og dálksbreidd er reiknuð þannig að það sé alltaf 99%, í stað 100%. Þetta útilokar þörfina fyrir nokkrar flóknari endurteknar decimals og númerafrelsingu sem vafrar eru oft neydd til að gera.
Hvernig það virkar
Ristið sjálft er skipt í klassíska tólf dálka. Námskeiðin eru einföld ( .onerow , .col1 , .col6 ), og mér líkar það að þú, að mestu leyti, notaðu aðeins einn flokka á dálki.
Tveir brotsstaðir eru sjálfgefinir: 768 punktar og 1024 punktar. Ef ég er heiðarlegur virðist þessi fyrsti hluti ... stór ... en þú getur alltaf bætt við öðru brotaliði ef þú þarft einn. Tveir skrifborðsútbreiddar dæmi eru einnig veittar: 1000 punktar og 1200 punkta.
Á verkefnasíðunni er hægt að hlaða niður Photoshop aðgerðaskrár og PSDs sem henta til að mocka upp skipanir þínar með þessu netkerfi.
Göllum
Tvö stór vandamál mín hér eru venjulegir. Í fyrsta lagi: engin hreiður dálkar. Nesting dálkar eru góðir, fólk! Í öðru lagi: Síðasti dálkurinn í hverri röð þarf að hafa .last bekknum sótt um það.
CSS rist ramma sem er ekki í vafra sem felur ekki í sér dílar í brúnum! Það er tagline fyrir Flurid, og fljótur að líta í gegnum skjölin mun segja þér af hverju: Höfundur Flurid vill virkilega ekki að skipulagið þitt brjóti. Alltaf.
Hér er hluturinn, vegna þess hvernig undirlínur rúnna virkar, mun vafrinn stundum segja "skrúfa það" og setja síðasta dálkinn í röðinni einhvers staðar ætti það ekki að fara. Flurid er byggt fyrir stöðugleika, þannig að skipulagið muni alltaf virka, jafnvel á eldri útgáfum af IE. (Samhæfni er skráð sem IE5 +.)
Hvernig það virkar
Flurid hefur alla eiginleika sem þú þarft: reglulega dálka, blönduð dálka, hreiður dálkar og breytta dálka. Listinn yfir mögulega dálksbreidd og flokka er víðtæk og hlutfall byggð þannig að þú vilt gefa þér tíma til að kynnast þeim.
Nokkrar fullnægjandi skjöl eru veittar í gegnum GitHub, auk jQuery tappi sem bætir við auka möguleikum já, það kemur með eigin jQuery tappi, sem gefur jafna hæðarsúlur og getur sett skiptisflokka á dálkunum þínum til þess að nota stílinn þinn.
Göllum
Það er það leiðinlegt .last bekknum aftur. Enn, samkvæmt heimildum, það er góð ástæða fyrir þessu sinni.