Jag älskar att hitta gratis verktyg som kan göra mitt jobb (och ditt) bara lite enklare. Webbutvecklaregemenskapen överträffar positivt med begåvade människor som är mer än villiga att dela sina skapelser med världen samtidigt som de inte frågar någonting i gengäld.
Idag ska vi titta på ett sådant verktyg från Erskine Design, som heter Gridpak. Med det kan vi snabbt och enkelt skapa vår egen responsiva rutnät för att bygga webbsidor som fungerar bra på många olika skärmstorlekar. Det är lite knepigt att implementera men så hjälper vi dig att räkna ut hur du ställer in dina stilar när du har tagit ner hämtningen.
Den här artikeln är en del av vår serie på? Utöver skrivbordsdesign?, Som kom med dig i samarbete med Heart Internet VPS.
Möt Gridpak
Som jag är säker på att du vet, det kan vara ganska lite matematik som är inblandat i att skapa ett enkelt, icke-mottagligt rutnät och det blir mycket mer komplext när du börjar ändra det nätet vid olika brytpunkter. Om du är en formgivare som undviker matematik, så är det möjligt att närma sig ett sådant projekt kan det vara en ganska skrämmande uppgift.
Gridpak är en gratis webbapp som lovar att ta smärtan ut ur att skapa ditt eget svarssystem. Du behöver inte överensstämma med den styva strukturen hos ett galler byggt av någon annan eller måste arbeta för hårt för att skapa ditt eget. Med bara några klick och dra åtgärder har du en fantastisk responsiv rutmall som är byggd enligt dina specifikationer.
Även om Gridpak är en bris att använda, kan det vara lite förvirrande först om du inte vet vad du gör. När jag först hittade platsen klickade jag ganska länge innan jag kände att jag verkligen hade ett handtag på processen. Jag ska gå igenom hur allt fungerar så att du snabbt och effektivt kan utnyttja det här praktiska verktyget i ditt arbetsflöde.
Kontrollerna
När du först laddar upp Gridpak-sidan ser du en bild av ett sex kolumngrid. Till höger om gallret finns en serie kontroller. Även om detta verkar som en blygsam mängd inställningar, är den anpassningsnivå som finns här ganska grundlig.
Som du kan se kan du snabbt och enkelt ställa in antalet kolumner såväl som både vadderingen och rännan, antingen i procent eller pixlar. Den lilla runda knappen med pilarna representerar i princip ditt visningsport. Dra det åt vänster och höger för att se hur nätverket skulle reagera på att ändra visningsstorlekar. Det finns också en knapp för att lägga till en brytpunkt, som vi kommer att gå över nästa.
Brytpunktsindikator
Längst ned i användargränssnittet är en pixellinjeledare samt en liten ikon som indikerar att det aktuella standardnätet kommer att appliceras under hela kontinuumet för visningsstorlekar, från noll till oändlighet. Detta innebär i grund och botten bara att det inte finns några bra punkter än, men samma raster gäller alla storlekar.
Lägger till vår första brytpunkt
Nu är hela poängen här att du vill att den grundläggande underliggande ramen för din webbplats ska förändras och utvecklas till olika visningsstorlekar. Nyckeln till att använda detta är att komma ihåg att tänka på ditt rutnät när det gäller intervall, inte bara brytpunkter. En viss del av inställningarna kommer att ha en rad möjliga visningsstorlekar där nätverket kommer att vara aktivt.
Det typiska användningsfallet är att ställa in ett rutnät för mobil-, tablett- och skrivbordsstorlekar. Att ställa in det här är enkelt, dra bara skjutreglaget till målbredden, lägg till en brytpunkt, dra upp till nästa målstorlek, lägg till en annan brytpunkt, etc.
Här lägger jag skjutreglaget på 320 pixlar och lägger till en brytpunkt, lägg sedan den vid 480px och lägger till en annan brytpunkt. När du drar skjutreglaget uppdateras rutnätet baserat på de inställningar du har tillämpat. De intervall som du har ställt upp syns tydligt längst ner, med det aktuella intervallet markerat i rött.
Arbetsflödet här är lite wonky. Tricket är att se till att du har valt det rätta intervallet. Så när jag vill justera mina inställningar för 0-319px lägger jag till en brytpunkt på 420px, flytta sedan min skjutreglage till vänster lite för att se till att intervallet är aktivt.
Gå vidare
När du har tagit ditt rutnät för första breddbredden, lägg till en annan brytpunkt, flytta sedan din reglage lite och sätt in rutnätet för den sektionen.
Här kan du se att jag har ställt in ett tre kolumngrid som aktiveras från 320-479px. När det här är inställt, kan jag se rasteruppdateringen live om jag flyttar min reglage fram och tillbaka till de olika visningsinställningarna.
Efterbehandling lägger jag till ett annat rutnät som upptar intervallet från 480-959 och en sista som svarar på allt vid 960px eller högre.
Hämta
När du har tagit ut dina nät, är det dags att ladda ner filerna och komma igång. Nedladdningen är en av de mest imponerande aspekterna av hela appen. Det är väldigt omfattande och erbjuder inte bara en CSS-fil, utan även LESS- och SCSS-filer utöver rutnät PNG för Photoshop och en JavaScript för att överla gränssnittet på ditt levande dokument.
Gridpak About Page berättar allt om varje objekt som ingår i nedladdningen så jag kommer att hoppa över redundansen och låta dig kolla den där ute. Vad som är viktigare är hur man implementerar rutnätet i ditt eget arbete, och det är förmodligen inte så lätt att dra av det som du hoppas att det ska vara. Låt oss dyka in och se varför.
Grid Komplikationer
Nu gör webben-användargränssnittet det mycket enkelt att ställa in en bra bit av anpassad kod som använder mediafrågor. Om vi tittar på vår CSS, LESS eller SCSS kan vi tydligt se att mediafrågorna verkligen genererades.
Även om mycket av CSS-arbetet är gjort för dig är du definitivt inte klar. Visserligen är det ganska svårt att implementera nätet på ett användbart sätt.Anledningen till detta är självklart att lyhörd design kan vara ganska komplicerad, nätverkssystem kan vara komplicerade, och när du slänger de två tillsammans får du mycket komplexitet. Om du verkligen har ett handtag på CSS, bör du kunna räkna ut det, men om du är ganska ny, kommer du sannolikt att springa in i massor av huvudvärk. Därför rekommenderar jag det här borde inte Var din första fördjupning i lyhörd design.
Hur det fungerar
Eftersom det här kan vara ganska knepigt, och det finns inte mycket dokumentation tillgänglig, försöker jag gå igenom det. Som med något CSS-nätsystem, kommer Gridpak att ge dig några förbyggda klasser som gäller för ditt innehåll. Utvecklaren rekommenderar dock att du använder dina egna semantiska klasser istället och bara använder de förbyggda klasserna som en guide.
Så låt oss säga att du har en div som innehåller tre stycken text. Vilken klass ska du använda på det? Det här är knepigt eftersom du kanske vill att den ska vara span_one och en punkt och span_three vid en annan punkt. Lyckligtvis har vi redan bestämt oss för att använda våra egna klassnamn så det blir lite lättare.
Om vi vill ringa till vår del av avsnitt? Funktioner? Lägger vi till det klassnamnet i var och en av punkterna i vår HTML och hoppar över till CSS. Här ser vi först för generisk container CSS och var noga med att lägga till vår nya klass för att se till att det tar upp dessa stilar:
Då går du in i den specifika mediefrågan och ställer in stilar för din funktionersklass inom det här intervallet. Än en gång måste du lägga till klassen i tidigare existerande generiska klasser:
Därefter går du in och lägger till klassen bredvid den specifika span som du försöker matcha. Vid den här visningsstorleken vill jag att alla tre styckena ska visas i en enda rad, så jag lägger till klasserna i bredvid span_2-klassen (det är ett sex kolumngrid här så tre två är lika med sex).
Detta kommer att göra är så att alla tre styckena visas i en enda rad. Men vad händer när vi går in i ett annat visningsport? Till exempel, i den minsta storleken kanske vi vill att punkterna ska staplas ovanpå varandra med 100% bredd. Återigen går vi in och hittar span som matchar den bredd vi ska gå till, sammanfaller span_2 igen och lägger till i vår .features klass (glöm inte att lägga till den i generiska klasserna också).
Du kommer säkert också att köra in i några marginproblem som du gör det här (det gjorde jag säkert). Detta beror på att marginalerna återställs först efter varje rad? div, men när varje stycke tar upp 100% av bredden, måste vi döda marginalerna på dem alla. I slutändan förväntar du dig att du behöver vara tvungen att ändra.
Tänk också på att span_2 inte alltid är det lämpliga valet för det här exemplet. Till exempel, om vårt rutnät går upp till 12 kolumner i full storlek, kommer vi förmodligen att lägga till funktionerna klass i bredvid span_4-klassen, vilket kommer att se till att de tre styckena återigen upptar hela bredden.
Är det här användbart?
När jag tog min första nedladdning förväntade jag mig att implementeringen var ganska enkel. Men det tog definitivt en tid att sätta ihop mitt huvud runt så att det fungerade. Kanske överbelastar jag det, men det verkar som om någon är tillräckligt skicklig för att implementera Gridpak är nog tillräckligt skicklig för att hoppa över det hela medan någon som behöver lite hjälp med responsiv design kan tycka att CSS är lite komplicerad till slut.
I all ärlighet skulle jag gärna se att Gridpak byggdes som en anpassad generator för Skeleton Boilerplate, som har ett lyhörd grid som är både mer mångsidigt och lättare att implementera.
Men det sägs att jag hade mycket roligt att leka med Gridpak och definitivt se det som ett bra sätt att starta ett lyhörd projekt så länge du vet vad du gör. Som jag har sagt tidigare är jag inte den största fanen av att ställa in mediefrågor baserade speciellt på populära skärmstorlekar, men det är ett argument för en annan dag.
Jag skulle gärna höra dina tankar. Har du använt Gridpak ännu för att faktiskt bygga en webbsida? Vad tyckte du om det? Har du ett arbetsflöde som är annorlunda och / eller bättre än mitt ovanför? Jag skulle gärna höra det!