Byggnätet var måttligt komplicerat innan lyhörd design, dessa dagar kan de vara rättvist skrämmande. När du dyker in i en komplex layout är det lätt att gå vilse i alla matte och procentsatser. Visst, hardcore nördarna bland oss älskar att leka med det här, men vissa utvecklare vill bara komma till jobbet!
Idag ska vi titta på ett fantastiskt rutnät som hjälper dig att ställa in dina lyssnare med mycket liten ansträngning. Det är semantiskt, byggt för responsiv design, helt flexibel för hur du arbetar, och drivs av Sass. Möt Zen Grids.
Se den i aktion
Om du vill ha en snygg titt på vad vi bygger idag med Zen Grids, klicka på länken nedan.
demo: Klicka här för att starta.
Vad är Zen Grids?
Jag vet vad du tänker,? Ett annat freaking system! ?? Zen Grids är dock annorlunda. Rätt sagt, alla säger det. Den här är verkligen värt en titt men.
Det finns många anledningar att jag tycker att Zen Grids är ett riktigt bra verktyg som du bör kolla in, här är några av dem:
Inget av de saker du hatar
Det finns många anledningar att hata nätverkssystem. Ugly, non-semantic klassnamn, en crapload av till synes överflödiga men på något sätt nödvändiga divs; listan fortsätter och fortsätter. Zen Grids har dock inte någon av de sakerna. Du ställer in ditt dokument hur som helst du vill och det pluggar perfekt in i ditt arbetsflöde.
Byggd på Sass
Jag vet att det här är en nackdel för många av er, men det är ett solidt plus för mig. Sass är anledningen till att Zen Grids kan vara semantisk. SCSS-filerna tar hand om all matte och tillåter dig att applicera nätmixin när och var du vill.
Responsive Friendly
Tekniskt skulle jag inte kalla Zen Grids ett lyhörd system (även om det fakturerar sig själv som sådant) eftersom det verkligen inte kommer med några frågefunktioner som bygger på sättet som Bootstrap gör.
Jag skulle kalla det a vätska nät system eftersom det bygger på procentandelar. Med det sagt är det enkelt att koppla Zen Grids upp till några av dina egna mediefrågor och göra det lyhört.
Lätt som 1, 2, 3
Zen Grids är verkligen, mycket lätt att använda. 1 importdeklaration, 2 variabler och 3 mixins. Det här är allt som krävs för att bygga en grundläggande layout. I mina experiment har jag tryckt på det till fyra mixins (du behöver en extra för att boa), men det är fortfarande inte halvt dåligt med tanke på den komplexitet som kan uppnås.
Innan du börjar
Jag ska dyka in och lära dig hur du använder denna suger, men innan vi kommer in i det behövs en liten installation. Först måste du se till att du har Sass och Compass installerad.
Få Scout
Om du är bekväm med Ruby, Terminals och Shell Scripts, ska det här vara ganska enkelt. För resten av oss rekommenderar jag bara att ladda ner Scout och ringa det en dag. Scout är fri, öppen och plattform. Peka det i en mapp som innehåller SCSS-filer och det kommer automatiskt att kompilera dem till CSS. Codekit och LiveReload är ännu bättre, men de kommer att kosta dig.
Få Zen Grids
När du har Sass och Compass upprättat, ta Zen Grids från GitHub. Ladda ner .zip och kasta allt utom "stylesheets"? mapp. Här hittar du de SCSS-filer som kommer att driva ditt nät.
Komma igång
Till att börja med rekommenderar jag att du gräver till din nedladdning och hitta? _Grids.scss? fil. Ta ut det och lägg det i en ny projektmapp, skapa sedan en ny SCSS-fil och importera den.
Det är det, nu är vi redo att bygga ett galler!
Starta en behållare
För att starta ett nytt rutnät behöver du någon form av behållare. Jag anser inte att det här är en smärta alls, eftersom jag vanligtvis gör detta även utan någon form av tredje parts nätsystem.
Här har jag skapat en div med en klass? Container ,? men kom ihåg att jag lovade att Zen Grids skulle ansluta till ditt specifika arbetsflöde. Det innebär att behållaren kan vara allt du vill ha. Använd en sektion istället för en div, ändra klassen till? Main ,? bli tokig. Det spelar ingen roll!
Nu kom över till din SCSS och inkludera zen-grid-behållare mixin med standard Sass syntax.
Vad det här gör är att berätta för Zen Grids att du vill att det här objektet ska bli en behållare. Medan du är i det, kan du lika bra sätta en bredd och centrera div.
Ställ in variablerna
Nu är det dags att ställa in variablerna för kolonnräkningen och rännan. Jag gillar att göra det här inne i behållarklassen eftersom vi kommer att ändra det senare och det är lättare att hålla rakt på det här sättet.
För att starta, sätt zen-kolonn-count till 3 och zen-gutter-bredd till 10px. Självfallet kommer detta att ge oss en tre kolonnlayout med en rännan på 10px mellan varje kolumn.
Skapa lite innehåll
Därefter vill vi skapa lite HTML-innehåll. Eftersom vi bara lär oss att använda Zen Grids, kommer jag att använda lite supergeneriskt innehåll här som ett exempel. Här skapade jag tre div, var och en innehåller en enkel punkt:
Tänk på att dessa klassnamn är helt godtyckliga och bara numrerade för att vi ska kunna hålla reda på allt genom exemplen. Du har fullständig frihet att använda vilka klassnamn du väljer. Din bör återspegla standard semantiska metoder.
Basic Block CSS
Återigen, rent för demoens skull, kommer jag att tillämpa lite generisk styling på varje ämnesblock som vi skapar. Detta hjälper oss att se vad som händer med varje block.
Flöda innehållet
Vi har tre divs att arbeta med och vi har redan satt upp tre kolumner, så låt oss tilldela en div till varje kolumn. Om du gör det krävs det zen-grid-objektet blanda i. Så här kommer det att se ut i vår SCSS.
Vad händer med den här syntaxen? Här är ett praktiskt diagram för att hjälpa dig:
Som du kan se bestämmer det första numret hur många kolumner objektet spänner över. Det andra numret bestämmer positionen för det objektet. I vårt exempel ovan placerade vi de tre delarna till slitsarna 1, 2 och 3 i följd.
Detta skapar ett enkelt rutnät uppdelat i tredjedelar med varje ämnesblock som upptar en tredjedel:
Låt oss bli komplicerade
Okej, nu vet vi grunderna om hur denna sak fungerar, så låt oss hoppa in i en mycket mer komplex layout. I stället för tre kvarter av innehåll kommer vi att ha åtta. Vi använder olika behållare, nya rader och till och med några häckar bara för att trycka vårt test till gränsen.
html
Den här gången kommer vi att kasta i en stor bit av HTML. Vi använder fortfarande samma grundläggande inställning som tidigare, den enda verkliga komplikationen är att den? Nestade? behållaren sitter faktiskt inne i vår andra behållare.
För att göra innehållsblickorna snygga den här gången är här den stil som vi ska använda:
Nesting
Precis som tidigare börjar vi med tre kvarter av innehåll. Den knepiga delen är dock att det tredje innehållsblocket verkligen är en kapslad behållare som innehåller två andra block. Att ställa upp detta är faktiskt väldigt enkelt.
Precis som tidigare, använd zen-rutnät (1, 3) på? .nested? klass, men inkluderar också zen-nested-behållare () för att ange att detta kommer att vara en kapslad behållare.
Inget problem rätt? Nu lägger vi till block tre och fyra i den kapslade behållaren. Tänk på att den kapslade behållaren också innehåller tre kolumner, så jag vill ha block tre och fyra till var och en ta upp tre kolumner (de är fulla bredd och staplade på varandra).
Ta en titt på koden för block fyra här. För att börja, använde jag zen-clear () blanda i. Så här skapar du en ny rad. Utan detta skulle block tre och block fyra ockupera samma plats.
Här är den effekt som detta har på vår layout:
Trevlig! Det här är precis vad vi skjuter för att uppnå. Vårt innehåll delas upp i tre kvarter med det högra högra blocket delas upp i två delblock. Allt utan en enda bit av matte!
Ändra rutnätet
Vi avslutar här genom att koda upp container2. Den här behållaren rymmer fyra kvarter av innehåll, och jag skulle vilja flöda dem alla bredvid varandra, men vår inställning har bara tre kolumner? vad nu?
Svaret är givetvis att vi måste återställa våra variabler när vi ställer in den nya behållaren. Jag var inte säker på om Sass skulle hantera detta korrekt när jag först försökte det, men det verkar fungera perfekt. Här är koden:
Som du kan se gick vi med fyra kolumner och en 10px rännan den här gången. Vi ställer sedan in varje block av innehåll till en slits i bredd och placerade dem successivt över kolumnerna.
Där går vi, en anständigt komplex layout med bara några enkla att applicera mixins. För flexibiliteten som erbjuds av det här verktyget blir det inte mycket lättare än det här.
Gör det Responsive
Innan jag sa att det var lätt att göra vårt nät lättåtkomligt. Hittills är det flytande, så det ändrats baserat på änkstorleken, men det flyter aldrig någonsin. Låt oss fixa det med en snabb media fråga:
Här skapade jag en mediefråga på 700px och helt reflowed layouten för att rymma den smalare viewporten. Här är hur det kommer att se ut efter brytpunkten.
Hur bra är det? Vi drog bara av en anmärkningsvärt komplex och lyhörd layout utan någon matematik, samtidigt som vi undviker sammandragande, icke-semantiska klassnamn. Det är en ganska seriös prestation.
Fusklapp
Vi täckte mycket saker ovanför så låt mig bryta ner det för dig på ett trevligt lurat lakan:
- Set Container: @include zen-grid-container
- Ange inhägnad behållare: @include zen-nested-container ()
- Ange kolumnräkning: $ zen-kolumnräkning: 2
- Set Gutter Width: $ zen-gutter-bredd: 10px
- Ställ in objektspan och position: @ inkludera zen-rutnätet (1, 1)
- Ny rad @include zen-clear ()
Vad tror du?
Så det är Zen Grids-systemet. Personligen tycker jag att det är ett väldigt användbart litet nätverkssystem som fungerar ganska bra. Vad tror du? Skulle detta spara mycket tid och ansträngning i ditt lyhörda arbetsflöde eller skulle det lägga till mycket onödig komplikation för det? Lämna en kommentar och låt mig veta.