Låt oss möta det, lyhörd design är hårt arbete. Webbdesign var svår nog när vi bara funderade på stationära plattformar, men utmaningen av till synes oändligt varierande skärm- och visningsstorlekar har verkligen lagt till komplexiteten i webbsidan.
Oavsett om du är helt ny till lyhörd design eller anser dig själv vara en expert i området, kommer verktyget som vi ska titta på idag att blåsa bort dig. Det heter Gridset och det är fantastiskt.
Vad är Gridset?
Gridset är ett Mark Boulton-projekt som för närvarande är i beta, och det syftar till att drastiskt förenkla den responsiva webbdesign och utvecklingsprocessen.
Du har säkert sett massor av verktyg som gör detta löfte. Saken är, de flesta är lite mer än glorifierade rutnäträknare. Gridset är annorlunda. Det ger dig en robust verktygssats som gör det möjligt att bygga och tillämpa ett antal olika nät som optimeras för ett antal enheter.
Det är svårt att beskriva hur och varför Gridset är så häftigt, så varför visar jag dig inte ett provprojekt?
Skapa en ny nätverkssats
När du loggar in i appen visas en lista över rutnät som du har byggt tidigare (du bygger inte bara ett rutnät men flera). Du kan antingen välja att redigera en av dessa eller skapa en ny, jag skapar en från början. För att göra detta, tryck på? Ny uppsättning? knappen och använd ett namn du väljer.
Efter det är det dags att hoppa in och börja bygga ditt första rutnät. Du får se skärmen nedan, vilket ger dig möjlighet att välja mellan några praktiska förinställda rutmallar och bygga din egen. Vi börjar bygga våra egna i nästa steg.
Ställ in fyra rutor
Med hjälp av de grundläggande kontrollerna på skärmens vänstra sida bryter vi ut fyra olika nät: skrivbordet A, skrivbordet B, bordet och mobilen. Tänk på att det här är väldigt godtyckliga val för denna handledning, var god att gå på egen väg om de beslut som vi fattar i hela artikeln. Du borde fortfarande kunna följa med bra.
Detta skapar fyra olika tomma skifferlister i den primära mittdelen, varav vi vill gå in och skräddarsy för våra ändamål.
Anpassa ditt första nät
Nu är det dags att verkligen gräva in och se hur denna sak fungerar. Som standard ska du se något som exemplet i skärmdumpen nedan som standardstatus för ett givet nät:
Detta är inte riktigt ett rutnät alls, snarare är det bara en stor kolumn. För att anpassa rutnätet använder vi kontrollserien längst upp. Låt oss säga att jag ville ha ett tre kolonnnät med 30px rännor som aktiveras vid 990px bred och högre. Allt jag behöver göra är att skriva dessa värden i fälten.
Vad är prefixet?
Det finns ett litet fält här som frågar efter ett klassprefix ,? vad handlar det om? Svaret är att när du har ställt upp dina olika nät med hjälp av Gridset, är det lika lätt att slå på några klassnamn i din HTML.
? När du har ställt upp dina olika nät med hjälp av Gridset, är det lika enkelt att slå på några klassnamn i din HTML.?Gridset kan du välja exakt vad dessa klasser kommer att se ut, men de begränsar dig till tre tecken, så semantik kommer sannolikt att offras lite här. Det typiska exemplet är att använda? D? för skrivbordet,? t? för tablett och? m? för mobilen. Jag ska bygga två skrivbordsnät, så jag ska använda? Da? och? db? för att hålla dem åtskilda.
Förhållande och Uppdatering
Nu, bara för att jag använde tre kolumner betyder inte nödvändigtvis att jag vill att dom splittras jämnt. Lyckligtvis tillåter Gridset dig att justera förhållandet med en liten rullgardinsmeny. För övrigt vill jag att min delas upp i tredjedelar så vi går med det alternativet.
När du är klar med att ändra alla inställningar, klicka bara på uppdateringsknappen för att se din nätverksuppdatering.
Som du kan se visar förhandsvisningen nu ett tre kolumngrid som speglar de inställningar som vi valde. Det finns mycket mer flexibilitet här om du behöver det. Försök att klicka på en kolumn för att se och justera dess inställningar individuellt eller klicka och dra för att omordna kolumner.
Ställ in dina andra nät
Nu när vi har sett hur man sätter upp ett galler, låt oss spränga igenom de andra tre. För att illustrera hur flexibelt Gridset kan vara, låt oss sätta upp ett annat skrivbordssnät,? Db ?. Den här kommer att vara praktiskt taget densamma, bara uppdelad i fyra kolumner om vi vill dela sidans innehåll i halvor eller fjärde. Vi skapar inte en ny bredd som behöver redovisas, bara ett annat nät inom samma intervall.
För att avsluta ska vi sätta upp ett tablettnät som är 768px bred med 20px takrännor och fyra kolumner, avslutar sedan med ett mobilnät som är 320px bred med 10px takrännor och två kolumner.
Återigen, var uppmärksam på prefixen eftersom de kommer att bli viktiga snart. Vi tog standardvägen och använde? T? för tablett och? m? för mobilen.
Observera också att varje enskild kolumn är märkt i alla nät: da1, db3, t2, etc. Dessa representerar specifika slots som vi kan använda i vår kod.
Använda nätet
Fram till denna punkt har Gridset närmat sig? Snyggt? men inte oumbärlig. Det är trevligt att få några visuella representationer av våra nät, men hur bra är det utan några hjälpmedel?
Det här är där Gridset verkligen blåser bort tävlingen. För att se varför klickar du på? Använd? knappen längst upp på verktygsfältet till vänster.
Härifrån, se till att du har? Bädda in? valda och du får se en enkel stilarklänk som du kan trycka direkt in i din kod. I mitt fall var det följande:
Det betyder att Gridset har tagit det arbete jag har gjort på nätet, genererat den nödvändiga CSS-filen och värd den så att jag kan köra test. Den här filen uppdateras automatiskt efter behov, så om jag går in och ändrar till nätet behöver jag inte röra en enda kodrad. Hur coolt är inte det?
Andra godisar
Det finns tre andra flikar i "Använd?" avsnitt också. ?Ladda ner? låter dig ladda ner den genererade CSS så att du inte är beroende av webbplatsen för att vara värd för din fil efter att testfasen är klar. ?Fuska? visar alla mätningar för de galler som du byggt så att du enkelt kan koda din egen layout med samma nummer. Formateringen här är väldigt snäll och de uppmanar dig att skriva ut en referens PDF.
?Tillgång? låter dig ange e-postadress till en annan användare som du också skulle kunna använda nätet. Det här är bra för när du jobbar med ett lag.
Kodning av ett exempel
Nu när vi har alla våra nät installerade, är det dags att kasta den stilarklänken i en HTML-fil och ge layouten en provkörning. Genomförandet här är extremt enkelt, använd bara gridklasserna som vi satt upp tidigare.
Låt oss exempelvis säga att vi hade två divs, var och en innehåller en rubrik och en paragraf. Såhär:
Tänk nu att vi ville dela upp dem så att de var i samma rad, men den första diven tog upp 2/3 av sidbredd och lämnade 1/3 för den andra. Använda vårt? Skrivbord A? rutnät, vi skulle ta tag i? da? prefix.
Vår första div skulle sträcka sig över både? Da1? och? da2? kolumn, så den klass vi vill tillämpa är? da1-da2 ?. Vi vill bara att andra div ska uppta den tredje kolumnen, så här skulle vi helt enkelt skriva? Da3 ?.
Lägga till övriga grids
Lätt rätt? Så hur gör vi denna suger responsiva? Det är vad det här handlar om, så låt oss ta det! Allt vi behöver göra är att lägga till klasser för de andra rutorna som vi satt upp.
Börja med mobilnätet och arbeta sedan upp. Jag vill ha innehållet jämnt fördelat på både mobil- och tablettversionerna, så jag ställer in div ett till? M1? och? t1-t2? och div två till? m2? och? t3-t4 ?.
Det betyder att varje div kommer att uppta en kolumn i mobilvyn, hoppa sedan upp till två kolumner i tablettvyn och hoppa sedan upp igen till en 2: 1-delning i skrivbordet. Det är några fancy layout voodoo med mycket lite arbete!
Nu gör vi det
Okej, så nu vi har kärnan på hur det här fungerar, låt oss koda upp en fullständig exempelsida med sju olika divs.