Vi starter alle et sted. Som en ny designer kunne jeg ikke bry meg mindre om strukturen i designene mine. Jeg ville åpne Photoshop, og skyve piksler rundt til jeg laget noe som jeg syntes så kult. Som jeg lærte å kode, var prosessen min likegyldig.
Jeg ser ikke tilbake på gamle dager med for mye kjærlighet. Mitt arbeid var slurvet og ufokusert. Jeg hadde ingen klare mål. Som en begynnelse antar jeg at det ikke er så ille, med tanke på at det meste av designutdanningen min kom fra Photoshop-opplæringssider, var arbeidet mitt ikke forferdelig.
Men da lærte jeg om nettverkssystemer. Jeg glemmer nøyaktig når og hvordan de ble populært brukt i webdesign, men plutselig ble hvert webdesign-relatert nettsted jeg gikk til, sprengt med artikler om 960.gs, eller et annet gridsystem. Betydningen av å gi en konsistent visuell struktur i våre layouter ble understreket av alle de store navnene, og ble til en trend.
Like raskt ble trenden en industristandard, og nå tenker de fleste av oss ikke to ganger om hvorvidt vi skal implementere et rutenett system. Det eneste spørsmålet er, hvilken? Vil vi gå med et av de store navnene eller en mindre kjent variant, eller til og med lage vår egen?
I denne artikkelen vil jeg gjerne ta en titt på det andre alternativet: nye og mindre kjente nettverkssystemer. Det er alltid noen der ute som kommer opp med nye måter å løse de ulike problemene med layout, og jeg synes det er viktig å være kjent med så mange tilnærminger som mulig, så la oss se på noen grunnleggende gridrammer.
34Grid handler om like kolonnefordeling. Det kan huse ulik distribusjoner også, men det er ikke det primære formålet med dette rutenettet. For de av dere som ønsker å dele de fleste eller alle sidene dine i horisontalt like deler, er dette ditt rammeverk.
Hvordan det fungerer
Rammen er utformet slik at den kan tilpasses dine behov, slik at du ikke bare laster ned og går. Du må konfigurere rutenettet på prosjektets hjemmeside først. En rask form gir deg mulighet til å bestemme hvor mange kolonner som skal passe på rad, hvor store marginene dine vil være, og om du vil bruke CSS3-overganger til kolonnene dine når visningsporten endrer størrelse.
Koden i seg er delt inn i to CSS-filer: en med basekoden og en med alle medieforespørrelsene. CSS klassene er enkle. Ved å bruke '.col_1' til en kolonne fylles raden til 100%. '.col_2' vil opprette en kolonne med en bredde på 50%, og så videre.
I tillegg blir img-elementer, objekter og noen andre automatisk endret. Det er en ekstra klasse for å hjelpe videoobjekter oppføre seg. Prosjektets nettside gir råd om hvordan du får Facebook og Twitter-embedsmenn til å spille fint.
ulempene
Det ser ikke ut til å være noen måte å nest kolonner, eller skape mer komplekse kolonneordninger innenfor en enkelt rad. På den annen side, hvis du ikke trenger kompleksitet, og du bare vil ha en enkel ramme som du kan justere når du trenger, vil 34Grid gjøre jobben.
Enkelt rutenett er et responsivt alternativ som makses ut i en bredde på 1140 piksler. Med andre ord, mens det er designet for å leke godt med tabletter og telefoner, sørger Simple Grid for at større skjermer ikke er utelatt.
Hvordan det fungerer
Som navnet tilsier, er dette rutenettet ganske lett. Det hele kommer i en fire kilobyte ukomprimert CSS-fil.
Klassenavn er laget for å bli lett forstått: '.col-2-6' vil dele raden i seks kolonner, og definere kolonnebredden til to kolonner bredt. Hver rad kan deles inn i en kolonne, '.col-1-1', eller to, tre, fire etc. helt opp til tolv.
ulempene
Som 34Grid synes det ikke å være noen bestemmelse laget for hekkehodene. Også målemarginene håndteres for første og siste kolonne, kan føre til vanskeligheter når du for eksempel lager et fotogalleri.
Denne er for alle som foretrekker et enkelt rutenett med ren engelsk klassenavn. Det er lydhør, lett forståelig og raskt implementert.
Hvordan det fungerer
Etter at de vanlige'container 'og'grid'-elementene er satt på plass, blir kolonnene implementert på den gammeldags måten. En klasse ('.unit') brukes til å definere de generelle egenskapene til en kolonne, og en annen klasse brukes til å definere bredden. Rader kan deles i 2-5 kolonner, og klassenavnene ser alle ut som dette: '.on-of-three, .two-of-three'.
Også inkludert er noen grunnleggende typografiske stiler.
ulempene
Nok en gang er dette et rutenettverk som er ment for ukompliserte oppsett, så ingen bestemmelse for nestede kolonner. Også det er bare ett bruddpunkt, satt til en visningsbredde på 650 piksler, så noen av kolonnene dine kan for tidlig ende opp ganske bredt.
Matt (AKA Boon ) er litt som meg. Han elsker design, men elsker ikke matematikk like mye. Som et resultat, hans Proportional Grids ser ut til å gjøre unna med endeløse beregninger så mye som mulig, avhengig av box-sizing eiendom. Resultatet er et komplett, men likevel ganske lett, grid system som dekker dine baser for responsiv layout.
Hvordan det fungerer
Når jeg sier at dette systemet er avhengig av box-sizing , Jeg mener at kolonner får prosentvise bredder uten å regne med rennere. Fastbredde takrenner er definert av padding ; og box-sizing sørger for at kolonnene leker pent sammen.
Gutterbredder og de fleste andre målinger er definert med "ems". Sann til navnet på dette rutenettet, er kolonneklassene proporsjonale (dvs. .col-one-third , .col-two-thirds ), og kolonner er mer eller mindre uendelig nestable, noe som jeg liker veldig mye.
Klasser er inkludert for å endre kolonnedimensjoner ved tre forskjellige bruddpunkter. Mediaspørsmålene er strukturert i "mobile først" mote, i tråd med standardpraksis.
Det finnes et eget stilark for Internet Explorer 8 og eldre. Å se som IE8 støtter ikke medieforespørsler, og versjoner som er eldre enn det, støtter ikke box-sizing , de er utstyrt med en fast bredde layout.
Inkludert er også SASS (både .sass og .scss) filer for rask og enkel tilpasning av rutenettet.
ulempene
Jeg ville ikke ha noe imot å ha noen flere kolonnebredder å jobbe med (femte, sjette, åttende). Ellers er dette et stort sett feilfritt og godt avrundet gridsystem.
Av de avanserte gridsystemene på denne listen, En% er den enkleste, men det er på ingen måte ufullstendig. Den er designet for å imøtekomme noe større skjermer, og store UI-elementer, hvis hjemmesiden er noen indikasjon.
Navnet kommer fra det faktum at rutenettet og kolonnebredden er beregnet slik at den alltid tilsvarer 99%, i stedet for 100%. Dette eliminerer behovet for noen av de mer komplekse repeterende decimaler og nummerrunding som nettlesere ofte blir tvunget til å gjøre.
Hvordan det fungerer
Rutenettet er delt inn i de klassiske tolv kolonnene. Klassene er enkle ( .onerow , .col1 , .col6 ), og jeg liker at du for det meste bare bruker en klasse per kolonne.
To bruddpunkter er som standard inkludert: 768 piksler og 1024 piksler. Hvis jeg er ærlig, virker den første en liten ... stor ... men du kan alltid legge til et annet bruddpunkt hvis du trenger en. To eksemplarer på skrivebordslayoutbredde er også gitt: 1000 piksler og 1200 piksler.
På prosjektets hjemmeside kan du laste ned Photoshop-handlingfiler og PSD-er som er egnet for å mocke opp oppsettene dine med dette rutenettet.
ulempene
Mine to store problemer her er de vanlige. Først: ingen nesting kolonner. Nestende kolonner er gode, folk! For det andre: Den siste kolonnen i hver rad må ha .last klasse brukt på den.
Et kors-nettleser-CSS-gridramme som ikke skjuler piksler i marginer! Det er tagline for Flurid, og en rask titt gjennom dokumentasjonen vil fortelle deg hvorfor: Flurids skaperen virkelig ikke vil at layoutet ditt skal bryte. Noen gang.
Her er tingen, på grunn av måten subpixellrunding fungerer, vil en nettleser av og til si "skru den" og sett den siste kolonnen på rad et sted som det ikke skal gå. Flurid er bygget for stabilitet, slik at utformingen alltid vil fungere, selv på eldre versjoner av IE. (Kompatibilitet er oppført som IE5 +.)
Hvordan det fungerer
Flurid har alle funksjonene du trenger: vanlige kolonner, blandede kolonner, nestede kolonner og skiftede kolonner. Listen over mulige kolonnebredder og klasser er omfattende og forholdsbasert, slik at du vil gi deg tid til å bli kjent med dem.
Noen rimelig fullstendig dokumentasjon leveres via GitHub, samt et jQuery-plugin som legger til ekstra funksjoner. Ja, det kommer med sin egen jQuery-plugin, som gir like høyde kolonner, og kan sette alternerende klasser på kolonnene dine, for stylingpleiet.
ulempene
Det er så pesky .last klasse igjen. Likevel, ifølge dokumentasjonen, er det en god grunn til det denne gangen.