En av de mest intressanta och användarvänliga gridgeneratorerna runt är ett verktyg som heter Gridpak, som låter dig använda ett enkelt och roligt användargränssnitt för att skapa fluid, media-frågestyrda grids. Vi granskade Gridpak för omkring ett år sedan och kom fram till att även om det var användbart, kom det kort inom användarvänlighet när det gällde att implementera koden.
Utvecklarna har gjort vissa framsteg på detta område och jag tycker att det är dags att vi tog en annan titt. Följ med oss när vi dyker in i hur Gridpak har förbättrat sitt kodutbud och struktur för att ge en bättre, mer strömlinjeformad upplevelse för användarna.
Möt Gridpak
Gridpak har presenterats i en hel del responsiva webbdesignverktygs roundups, så du har säkert stött på det en eller två gånger. Här är en skärmdump för att jogga ditt minne:
Om du inte läste vår senaste artikel, är det du ser här en visuell representation av ditt nät. Huvudgrafiken i mitten visar kolumnerna, vadderingen och rännan baserat på din ingång och det aktuella valda intervallet. Låt oss kort gå över hur verktyget fungerar.
Lägga till brytpunkter
För att komma igång, ta den stora cirkeln till höger som innehåller två pilar och dra den åt vänster eller höger. Du kommer att se hela rutnätet och expandera när du gör det här. På botten hittar du en indikator som berättar för aktuell bredd. När du får det här till en plats där du vill infoga en ny brytpunkt, klicka på? Lägg till brytpunkt? knapp.
När du fortsätter med att konfigurera brytpunkter, delas underdelen av användargränssnittet i olika sektioner, som tjänar som intervall av visningsbredder. I skärmdumpen nedan kan du se att mitt första intervall går från 0 till 319px, vid vilken tidpunkt det finns en brytpunkt, skapar en ny sektion som sträcker sig från 320px till 479px. Vi fortsätter denna process tills alla designers mediefrågor redovisas.
Tweaking The Grid
Observera i föregående skärmdump att när mitt nuvarande bredd ligger inom ett visst område, är detta område markerat i rött längst ner. Det betyder att jag kan gå in och ställa in de specifika rutnät inställningarna för det här intervallet. För att göra detta använder jag de enkla verktygen längst till höger på sidan.
Här kan vi ställa in antalet kolumner, vadderingar och takrännor för varje sektion. Dra bara ditt rutnät för att markera varje avsnitt, sätt sedan upp ditt rutnät för det avsnittet, så att det är så annorlunda som du vill från alla andra avsnitt. Till exempel kan ditt mobilnät bara ha en eller två kolumner medan skrivbordet har tolv.
Hämta
När du är klar med att konfigurera ditt nät i Gridpak, är du redo att ladda ner dina filer. Den här gången kommer du märka att vi har några fler filer att arbeta med:
Som jag nämnde ovan gav jag tidigare utvecklarna en hård tid, för på den här tiden var det roligt och Gridpak blev så dumt svårt att använda. Det verkar som om de har förbättrat upplevelsen genom att fokusera på tre viktigaste saker:
- En helt fungerande demonstration: Detta är absolut nyckeln. Förra gången vi tittade på Gridpak, fanns det ingen demo som fick oss att räkna ut saker för oss själva. Att ha detta i handen betyder att vi kan gräva i ett exempel som är korrekt inställt och lära oss hur sakerna fungerar. Jag tycker att det här är hur de flesta utvecklare brukar lära sig, så det ger en mycket bättre upplevelse för första gången Gridpak-användare.
- En bättre? README? fil: The? README? filen verkar ha blivit mycket bättre också. Den går igenom varje bit av nedladdningen och sätter dig på rätt spår för hur man arbetar med de förkonstruerade klasserna i din CSS-fil.
- Omfattande kommentarer: Förutom instruktionerna i? README ?, och kanske ännu mer användbara, är de kommentarer som du hittar spridda över de olika kodfilerna. Utvecklarna har tagit hand om att förklara varje bit av pusslet när de går så att oavsett var du befinner dig i en fil finns det en fin beskrivning av vad som händer för att hjälpa dig att arbeta med det du har fått.
I allmänhet har killarna bakom Gridpak inte förändrats någonting om hur det fungerar, men de förbättringar som de har gjort för att sprida användbar information och instruktioner till användaren gör hela verktyget mycket mer tillvägagångssätt och användarvänligt.
Använda koden
Förra gången berörde jag bara kortfattat hur Gridpak-systemet fungerar. Beväpnad med mer informativt stöd än någonsin skulle jag vilja gräva lite djupare så att du kan vara säker på att du vet exakt hur allt fungerar och kan faktiskt använda det här i ett projekt ganska snabbt.
Bitarna
Ingår i din nedladdning är en serie CSS-filer (CSS, LESS och SCSS) samt en handfull bilder och en JavaScript-fil. Demon har också en HTML-fil som referens.
Bilderna och JavaScript-filen är bara för att skapa ett galleröverlagring så att du kan se hur dina kolumner fungerar. Varje nät system har en av dessa och jag använder dem helt enkelt aldrig, så jag slänger ut dessa och fokuserar på de verkliga bitarna som du ska använda för din utvecklings arbetsflöde.
HTML
Det första du vill göra är att skapa en egen HTML-fil. Koda upp huvuddelen som normal, och starta sedan uppmärkningen så här:
Allt du skapar kommer att kastas inuti denna sida? div, som huvudsakligen bara tjänar som en omslag som centrerar innehållet på sidan.
Därefter delar du allt innehåll i rader. För att göra detta kastas varje element på sidan till en div med en klass av "rad". Du har flera av dessa:
Inne i raden kan du placera ditt normala innehåll, precis som alltid. Var noga med att använda? Col? klass på varje bit av innehåll, vilket i huvudsak gäller de globala kolumnstilarna.
Semantiska klassnamn
Efter applicering av? Col? klass, är du fri att använda ett semantiskt klassnamn. Det finns inget behov av att använda roliga klassnamn som? 1-3-6? eller? m1?, använd något beskrivande som kommunicerar exakt vad den delen är och gör. Här är ett exempel med en rubrik:
Om vi utvidgar detta lite för att inkludera några olika sektioner, här är vad vår kod skulle se ut. Lägg märke till de klara, beskrivande klassnamnen och inkludera? Col? på varje div.
SCSS
Förra gången vi tittade på Gridpak, dyker vi in i slätten CSS. För att byta upp saker, låt oss titta på SCSS-filen den här gången, eftersom Sass är fantastisk och du borde nog bara ge in och använda den redan.
Tre Mixins
För att fullt ut förstå vad som händer i SCSS-filen måste du klara dig runt tre inkluderade mixins: col, span och span_first.
col
Den första mixin som vi stöter på är? Col?, Som vi ska använda för att definiera de? Col? klasser som vi såg i HTML-koden ovan.
Jag har delat upp det i tre avsnitt så att du enkelt kan se vad som händer. Den första delen flyter kolumnerna och lägger till en transparent gräns för varje. Därefter ställer vi in boxningsstorlek och bakgrundsblock. Dessa hjälper till att manipulera boxmodellen till något lite mer vänlig vad gäller matematik.
Denna mixin implementeras lätt nog, det kastas bara in i "col" klass. Du lägger också några extra kolumnstilar som du vill söka själv här.
spänna
Nästa upp är? Span? blanda i. Det här är all den snygga matematiken som görs för att räkna ut de olika möjliga bredderna.
Denna bit av kod kan vara mycket förvirrande på grund av variablerna, så låt oss ta en titt på var och en av dessa och se vad den gör.
- $ Num: När vi implementerar det senare kommer det att berätta mixin vilken kolumn vi är på. Om vi ställer in den första av tre kolumner skulle den vara inställd på 1.
- $ Gutter_pc: Rännan, uttryckt i procent.
- $ Gutter_px: Rännan, uttryckt som ett pixelvärde.
- $ Padding: Padding, uttryckt som antingen ett pixelvärde eller procentandel.
- $ MAX_COLUMNS: Antalet kolumner i vårt nuvarande aktiva nätuppsättning. Det kan vara inställt på 1 för mobilnätet och 12 för skrivbordet.
- $ One_col: Bredden på en enda kolumn, beräknad automatiskt.
Det kan låta som ett hemskt jobb, och du ställer in dessa variabler varje gång du skapar en ny mediefråga, men kom ihåg att den här uppgiften faktiskt redan är klar. De inställningar som vi matar in på gränssnittet i de första stegen ovan kommer att definiera inställningarna för dessa variabler vid varje brytpunkt eller intervall.
span_first
Detta tillämpas på den första spänningen i varje intervall. Det rensar vänstra marginalen i första kolumnen.
Använda dina nät
Strax ur Gridpak hittar du en del av din CSS eller SCSS dedikerad till var och en av de områden som du etablerat. Varje avsnitt är mycket väl kommenterad för att låta dig veta vad som händer. Här är en av mina räckvidd, utan någon extra kod tillagd av mig:
Som du kan se är sektionen toppad med en kommentar som berättar om det intervall vi tittar på (0-319px), liksom de spänningar som vi hittar i detta sortiment. Det ser ut som att det här är vårt mobilsortiment, så vi hittar två spannmål, en på 48% och en på 100%. 48% spänningen täcker en kolumn och 100% spänningen täcker alla kolumnerna.
Lämpliga marginaler och vadderingar tillämpas på vår? Col? klass, då ställs variabler för vår span mixin. Återigen läggs dessa värden automatiskt in baserat på vad du gjorde i webappen. Här kan vi se resultatet av denna process:
Därefter ges den första kolumnen vår? Span_first? blandning för att avlägsna den vänstra marginalen.
Slutligen ställs var och en av spännvidderna in med hjälp av? Span? mixin med variablerna ovan som ingången.
Nu är det här den del där vi faktiskt har lite manuell inmatning att göra. För att ställa in bredden för de olika bitarna i vår HTML, lägger vi helt enkelt in klassnamnen med lämplig spänning.
Till exempel, om vi vill att vårt innehåll och huvudinnehåll till var och en tar upp en enda kolumn som är ungefär hälften av sidan, skulle vi lägga till sina klassnamn med? Span_1 ?. Vi vill att vår rubrik sträckte sig hela vägen över sidan, så vi slänger den in med? Span_2? Som sträcker sig hela vägen över sidan.
Det är verkligen allt det finns! Allt du behöver göra är att upprepa denna snabba process för att lägga till klasser för var och en av de intervall som vi ställer in i webben.
Låt oss säga att vi hoppar till vårt skrivbord och innehåller tolv möjliga spänningar. Här vill vi ha huvudet att ta upp 100% bredd, det inslagna innehållet tar upp en tredjedel av bredden och huvudinnehållet tar upp 2/3 av bredden. Vi lägger till? klass till? span_12 ?, den? maincontent? klass till? span_9? och den? featured? klass till? span_3 ?.
Här är en titt på bredderna som denna kod skulle gälla för var och en av dessa avsnitt. Med mycket liten ansträngning har vi ett trevligt litet nätinnehåll:
Fortsätt bara med att konfigurera varje intervall och ändra storlek på ditt fönster så ser du att ditt innehåll anpassas automatiskt. Om du vill se det i åtgärd, kolla in demoversidan som följer med varje Gridpak-hämtning.
Slutsats
Efter att ha tillbringat tid med Gridpak sedan min första granskning trodde jag att det var nödvändigt att återvända till det här verktyget och säga att jag faktiskt tror att det är ganska användbart som en startpunkt för responsiv design. Den aktuella dokumentationen och kommentaren ska gå igenom allt du behöver veta, vilket leder till att lärarkurvan sjunker avsevärt.
Om du ska använda SCSS-versionen som jag gjorde ovan kommer du att ha en ganska noggrann och flexibel ram för att börja och du behöver mycket lite ansträngning för att få ditt innehåll att följa de olika brytpunkterna. Att ställa in dessa med webben-användargränssnittet är definitivt enklare än att handkodning dem alla.
Jag har fortfarande ett problem med idén om att starta mediefrågor och infoga innehåll i motsats till att bygga mediasökningar som innehållet leder men så länge du börjar med rätt HTML-struktur, kan du fortfarande tänka dig att arbeta på detta sätt samtidigt som du utnyttjar Gridpak .
Lämna en kommentar nedan och låt mig veta vad du tycker om Gridpak. Skulle du överväga att använda den som utgångspunkt för ditt nästa responsiva designprojekt? Vilka andra användbara RWD-verktyg har du stött på nyligen?