Tidigare har vi tittat på flera CSS-nätsystem. Vi har också gått över hur LESS.js kan ge mycket flexibilitet till hur du utformar webbsidor. Idag ska vi kombinera dessa två idéer och skapa ett rutnät som använder mindre.
Läs vidare för att se varför på jorden skulle vi göra en sådan sak. Om du förstår konceptet kan du också hoppa över handledningen och gå direkt till nedladdningen. Låt oss börja.
Demo och Download
Du kan ladda ner filerna och ändra / använda dem, men du vill. Kom bara ihåg att kompilera din MINDRE fil till en CSS-fil innan du använder ramverket på en levande webbplats.
Visa exempel
Hämta MINDER CSS-rutnät
Varför mindre?
Många av er undrar tvivel på varför någon skulle kombinera en CSS-ram med mindre. Här har vi två separata och lika förvirrande verktyg som hälften av utvecklarföretaget antingen hatar eller inte förstår och jag bestämmer mig för att gå och sätta ihop dem för att skapa en jätte förvirrande röra !? Detta kommer säkert att inse en upplopp.
Trots det faktum att många utvecklare aldrig skulle använda ett sådant verktyg, ger ett MINDRE-driven gridsystem mycket mening. För närvarande är nätsystemen ganska styva. Du brukar antingen välja mellan ett par olika nedladdningar eller använda en online-nätverksbyggare för att anpassa dina alternativ. Men när du redan har hämtat kan det vara en verklig smärta att tweak hur rutnätet fungerar.
Eftersom LESS tillåter dig att infoga variabler i din CSS, kan vi använda den för att skapa en ram som lätt kan anpassas under utvecklingsfasen. Målet är att skapa något som tillåter anpassade rutbredder med mycket liten ansträngning.
Nätverket vi bygger idag kommer att fokusera på två variabler som ses i alla andra system: kolonnbredd och rännbredd. Sammanfattningsvis utgör dessa två grunden för nätets övergripande utseende och är faktiskt en primär källa till många argument. Om utvecklare inte kan bestämma över vilka bredder kolumnerna och takrännorna borde ha, säger jag att vi låter den vara öppen för varje utvecklare att bestämma per projekt.
På praktisk nivå betyder det att du kan använda samma nätsystem för 10 olika projekt och komma med 10 väldigt olika resultat. Detta går långt för att lindra en del av den styva strukturen som påläggs dina mönster genom ett visst nätsystem.
I slutändan borde vi ha ett system som gör det möjligt för utvecklaren att välja en anpassad kolumnbredd och rännbredd som ändrar hela flödet av layouten genom att bara ändra två siffror i vår CSS.
Är jag första person att försöka detta?
Med all ärlighet är jag förmodligen inte den första personen som kombinerar LESS och en CSS-ram. Det är dock fortfarande en bra lärande som i slutändan ger dig ett förstärkt grepp om hur båda verktygen fungerar.
Komma igång: 1Kb-nätet
I stället för att bygga hela projektet från början, bestämde jag mig för att hitta ett befintligt nätsystem och ändra det för att fungera med MINDRE. Detta kommer att fungera med något system men för enkelhetens skull i den här handledningen valde jag 1Kb CSS Grid.
Anledningen till att jag valde detta system är uppenbart: dess storlek. 960 GS och Blueprint CSS är bra och dandy, men är ganska obehagliga och skulle ta mycket längre tid att integrera mindre i. Med 1Kb Grid kan vi enkelt se alla CSS i ett skott och fullt ut förstå förändringarna utan för mycket ansträngande förklaring.
I själva verket är här hela CSS för 1Kb rutnät vid 960px bred med 12 kolumner och en rännbredd på 20px (10px på varje sida).
Det är allt det finns! Jag älskar enkelheten hos mindre gallersystem utan att alla extra ramfluffar som CSS återställer, textstilar och liknande. Detta ger den perfekta utgångspunkten för vårt LESS experiment.
Arbetar med mindre
Om du behöver en uppdatering av LESS.js, kolla in vår senaste handledning. Du måste ha en grundläggande förståelse för LESS och hur du ska arbeta med det för att fortsätta, men för dig som åtminstone sett det tidigare, förklarar jag kortfattat vad du behöver veta.
Använd .LESS inte .CSS
Den CSS-fil som du skapar ska ha en .LESS-förlängning i stället för den typiska .CSS. Kom ihåg att länka till den här filen på rätt sätt i huvuddelen av din HTML.
Dessutom måste du infoga en länk till den LÄSTA JavaScript-filen. För att göra det enkelt, kopiera och klistra in de två linjerna nedan:
När du är klar, vill du kompilera din .LESS-fil till en .CSS-fil. Detta låter komplicerat men är faktiskt en helt automatiserad process med Less.app.
Deklarera variabler
I LESS, deklareras variabler med hjälp av? @? symbol. Precis som i JavaScript kan du utföra matematiska operationer på dina variabler på ett antal sätt.
Du kan sedan infoga variabler var som helst du normalt skulle placera det värde som det innehar.
Matten
Innan vi börjar modifiera 1Kb-nätet måste vi förstå hur det fungerar. I vår nuvarande version finns det 12 kolumner, vardera med en bredd på 60px och en rännan på 10px på både vänster och höger sida.
Det är lite förvirrande, men på något sätt måste allt detta lägga upp till totalt 960px bred. Lyckligtvis finns det ett fantastiskt och gratis onlineverktyg som kan hjälpa oss att räkna ut alla nitty gritty matematik: Instacalc.
Möt Instacalc
Instacalc är en bra online-kalkylator som är perfekt för programmerare, inte bara på grund av att uppdateringarna uppdateras utan att det gör att du kan använda variabler och enkelt se om din matte fungerar som du vill.
Nedan använde jag Instacalc att plotta ut de variabler som vi behöver i vår LESS-fil genom att börja med standard 1Kb-nummer. Kom ihåg att vi vill att hela systemet ska hänga på två värden så att det bara tar en sekund att anpassa.
Även i denna form kan matte vara lite förvirrande men det är faktiskt ganska enkelt. Först ställer vi bredden på våra kolumner till 60 och bredden på vår rännan till 10. Sedan lägger vi helt enkelt samman bredden på alla tolv kolumnerna plus hela rännbreddets bredd (vi dubblar rännans bredd eftersom den visas på varje sida av varje kolumn). Som du kan se, i slutet landar vi rätt vid 960, vilket indikerar att vi gjorde allt rätt.
Som du kan se i bilden nedan kan vi nu ändra de två första värdena till allt vi vill, och resten uppdateras automatiskt. Vårt system med variabel bredd är igång!
Deklarera Variablerna
Nu när vi har variablerna och matematiken utarbetad på en plats där vi kan se dem jobba, är det dags att ansluta dem till vår MINDRE CSS. Infoga följande kod i toppen av din MINDRE fil.
Som du kan se är det precis vad vi gjorde med Instacalc. Vår kolumnbredd har ställts till 60px, vår rännan är 10px (vilket resulterar i en 20px rännan) och vår totala bredd är lika med rännans bredd plus kolonnens bredd.
Allt vi behöver göra varje gång vi vill ändra ramverket skriver in nya värden för de två första variablerna. Resten av ramverket uppdateras automatiskt baserat på vad vi gör nästa.
Skapa gridklasserna
Nästa steg är att infoga variablerna som vi just skapat i klasserna som utgör 1Kb-nätet. Här är originalkoden:
För att ändra detta börjar vi enkelt. Klasslängden grid_1 är helt enkelt inställd på variabeln columnWidth. Grid_2-klassen är dubbelt så bred och innehåller nu extra utrymme för den nya kolumnen. Dessa belopp ökar helt enkelt när du går längre: kolumnbreddsmultiplikatorn ökar med en varje gång och breddmultiplikatorns räckvidd ökar med två varje gång.
Nu fungerar det som det är men om du vill förenkla saker längre kan du använda en Mixin för att hantera all den röriga koden. Det här är mycket renare enligt min mening:
Slutför CSS
För att avsluta CSS måste vi infoga rännan variabeln i kolumnbredden och kapslad radavsnitt och totalWidth-variabeln i radklassen. Kom ihåg att hela punkten i övningen är att ersätta dessa statiska nummer med variabler som uppdateras automatiskt när vi ändrar kolumn och rännbredd.
Det är allt! Vi är helt färdiga med att beskriva våra ramar.
Få alltid att falla på plats
Nu när vi har förklarat alla steg, här är den färdiga LESS-filen allt i ett skott:
Vi kan ansluta detta direkt till HTML-dokumentet som följer med 1Kb Grid för att se om allt fungerar korrekt.
Förhandsvisning
Om du förhandsgranskar det här i webbläsaren, ska det fungera perfekt.
Försök nu att justera de två första variablerna i koden till allt du vill och kolla in resultatet. Till exempel kan vi ändra kolumnbredd till 80 och rännan till 50 för att få ett bredare innehållsområde med mindre blankutrymme.
Slutsats
Och där har du det, ett flexibelt nät system som kan ändras till valfri bredd och rännstorlek genom att bara ersätta två värden. Detta reporerar bara potentialens yta här. Du kan tillämpa samma principer på alla dina favoritramar.
Lämna en kommentar nedan och låt oss veta hur du skulle ändra och förbättra det mindre CSS-nätet. Också vara säker på att meddela om du utvidgar konceptet och gör något coolt med det!