En nybörjarguide till Zurb Foundation 3 The Grid

Tidigare har vi diskuterat Twitter Bootstrap ganska. Mycket mer än den mest värdiga konkurrenten: Zurb's Foundation. Nu på sin tredje iteration är Foundation ett robust och lyhört frontendramverk som används av hundratals utvecklare varje dag.

Under flera artiklar kommer vi att hoppa in och ta en titt på dess olika aspekter från en helt nybörjarperspektiv. Dagens ämne är min favorit del: gallret. Följ med för att se hur det fungerar!

Grid Crazy

Om du är en vanlig läsare av Design Shack, vet du förmodligen redan att jag är lite av en nätmutter. Layout är den aspekt av CSS som fascinerar mig mest och jag älskar bara att gräva runt och leka med olika rutnät system som människor skapar. Nej, de är inte alltid helt semantiska (även om vissa är), men de kan vara ett otroligt användbart sätt att byta ut väldigt komplexa layouter med mycket liten ansträngning.

Nätet som kommer in i Foundation är inget undantag från denna regel. Det är anmärkningsvärt enkelt att använda, har alla funktioner som du kan önska och anpassar sig ganska bra till olika visningar. Låt oss ta en titt.

Stiftelsen Grid

I likhet med otaliga andra nät är grunden Grid byggd på ett tolv kolonnsystem. Som standard är nätets bredd 940px bred när den är vid full bredd. Nätet är emellertid flytande, så när ditt utseende blir smalare än 940px kommer nätet att anpassa sig.

Vad detta betyder på en kodnivå är naturligtvis att varje kolumn i rutnätet inte har en statisk bredd men istället tilldelas med hjälp av procentandelar. Om vi ​​spricker öppna CSS kan vi se att detta verkligen är fallet:

Mottaglig

Foundation gridets flytande natur hjälper till att anpassa sig när utsikten sänks, men när du slår runt 767px, sparkar en mediasökning in och förenklar din komplexa layout i en enda kolumn. Självklart kan en sådan enkel lösning inte alltid vara önskvärt, så det finns sätt att avsiktligt återföra din layout till ett mobilnät med fyra kolumner. Vi får se hur vi gör det senare.

Komma igång

Om du brukar använda nätverkssystem, bör Foundation vara väldigt lätt att hämta. Om du är helt ny på nätet, oroa dig inte, jag går igenom dig och du kommer att fånga på nolltid.

I grund och botten har Foundation gjort det mesta av det tunga CSS-layoutarbetet för dig. Centrum 940px av sidan delas upp i tolv kolumner och olika möjliga kolumnkombinationer tilldelas klasser. Det innebär att du inte behöver skriva en enda karaktär av CSS för att utföra en grundläggande layout. Allt du behöver göra är att använda rätt klasser i din HTML.

Skapa en rad

Det allra första du behöver göra när du lägger till innehåll på sidan är att skapa en rad. Det här är exakt vad det låter som en bit av innehåll som kommer att visas på samma horisontella plan. Alla flytande, vadderande, marginaler och olika layoutkomplexiteter har tagits hand om så att du kan fokusera på ditt innehåll.

För att börja en rad, skapa helt enkelt en div med en klass av "rad".

Hur lätt var det? Låt oss nu se hur du lägger till i vissa kolumner.

Lägga till kolumner

För att lägga till kolumner innehåll skapar du en ny div och tilldelar två klasser. Den första klassen är ett tal som motsvarar antalet kolumner som du vill att innehållet spänner över. Så om du vill att ditt innehåll ska ta upp tre av de tillgängliga tolv kolumnerna, tilldelar du? Tre? som en klass.

Den andra klassen du tillämpar är? Kolumner? (eller? kolumn?). Detta tillämpas enhetligt på alla dina divs som du vill ha standard Foundation kolumn behandling. Kombinera dessa två klasser och du borde ha något så här:

<h2>Åtta kolumner</h2> <p>Lorem ipsum? </p>

Här har jag en fin liten behållare ställer automatiskt gränser på innehållet så att det inte tar upp mer än åtta kolumner. Nu, typiskt (men inte alltid), vill du äta upp hela tolv kolumnerna i en viss rad. Vi har redan använt åtta kolumner i vår första div, så om vi vill ha en mer ska vi skriva? Fyra kolumner? i klassområdet (8 + 4 = 12).

<h2>Åtta kolumner</h2> <p>Lorem ipsum? </p> <h2>Fyra kolumner</h2> <p>Lorem ipsum? </p>

Efter att ha skrivit endast den här koden i ett HTML-dokument, om vi tittar på vår sida i en webbläsare ser vi detta:

Som du kan se har vi effektivt skapat två bitar av text med ett breddförhållande på 2: 1. Detta gör perfekt mening eftersom vi använde klasserna åtta och fyra, som också har ett förhållande 2: 1. När detta verkligen klickar i din hjärna blir det ett kraftfullt koncept eftersom du plötsligt kan dra av nästan vilken layout du vill använda med bara några enkla klassnamn.

Observera att du inte behöver fylla alla tolv kolumner. Använd slutet? klass om du vill att en div ska vara den sista i en rad som inte spänner över tolv kolumner.

Går längre

Med de principer som vi just lärt oss kan vi uppnå alla slags olika layouter. Låt oss säga att vi ville ha en rad uppdelad i fyra lika delar. Allt vi behöver göra är att använda? Tre? klass.

<h3>Tre kolumner</h3> <p>Lorem ipsum? </p> <h3>Tre kolumner</h3> <p>Lorem ipsum? </p> <h3>Tre kolumner</h3> <p>Lorem ipsum? </p> <h3>Tre kolumner</h3> <p>Lorem ipsum? </p>

Vid det här laget bör du hänga på hur det här fungerar. Om du har den matematiska förmågan att dela upp saker i tolv, kan du använda denna ram. Så vi kan se hur det fungerar i större skala, låt oss hoppa in i en komplett sidlayout.

Låt inte denna stora bit av kod skrämmande dig, den använder exakt samma principer som vi har använt i de mindre exemplen.

<h2>Tolv kolumner</h2> <p>Lorem ipsum? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/a-beginners-guide-to-zurb-foundation-3-the-grid_3.jpg"> <h2>Avancerade rutnättekniker</h2> <p>Nu när vi förstår gridens grundläggande funktioner, låt oss ta en titt på några av de mer avancerade funktionerna. </p> <h3>Nesting</h3> <p>Nesting är ett viktigt inslag i alla nätverkssystem. Det gör att du kan starta ett helt nytt tolv kolonnnät i huvudnätet. Så låt oss säga att du har en åtta kolumnsträcka och en fyra kolumnsträcka, du kan dela den åtta kolonnsträckan i tolv kolumner. Crazy rätt? Om du går för långt, kommer din hjärna att falla i limbo men på en grundläggande nivå är nesting super lätt att åstadkomma.</p> <p>Allt du behöver göra för att näsa ett rutnät är att skapa en ny rad inuti en annan. Behandla sedan den raden som om du skulle någon annan, ingen speciell syntax krävs. Så här ser det ut:</p> <textarea wrap="soft" readonly=""> <h2>Åtta kolumner</h2> <p>Lorem ipsum? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/a-beginners-guide-to-zurb-foundation-3-the-grid_4.jpg"> <h3>Tre sätt att ändra gridbeteende</h3> <p>Stiftelsen kommer med tre intressanta sätt att röra med hur layouten på ditt nät fungerar. Till att börja med är det ofta så att du vill centrera en kolumn eller spalt av kolumner. Allt du behöver göra för detta är att lägga till? Centrerad? klass.</p> <textarea wrap="soft" readonly="">

Detta skapar en div som spänner över sex kolumner och centrerar den på sidan. Om vi ​​slängde en horisontell regel här hade vi en fin liten sex kolumncentrerad delningslinje.

Förutom att centrera div, kan du också kompensera och omorganisera dem. För att kompensera en div, använd? Offset-by ?. Så? Offset-by-one? kommer att kompensera det med en slot och? offset-by-two?, ja, du får poängen.

<h2>7 kolumner</h2> <p>Lorem ipsum? </p> <h2>3, Offset 1</h2> <p>Lorem ipsum? </p>

Här kan du se att klassnumren bara lägger till upp till tio, vilket lämnar två punkter kvar. Jag redogör för detta med en kompensation mot två kolumner. Här är resultatet.

För att omorganisera divs olika i utdata än de visas i källordern, använder du push och pull klasser, som liknar det gamla 960-nätet.

<h2>Denna sista</h2> <p>Lorem ipsum? </p> <h2>Detta Första</h2> <p>Lorem ipsum? </p>

Kolla nu resultatet. Trots att de tre? kolumn kommer före? nio? kolumnen i källan visar live-förhandsgranskningen det omvända av detta.

Logiken bakom detta är vanligtvis SEO-relaterad. Säg att du ville ha ditt företagsnamn som en rubrik i mitten av sidan mellan två andra kolumner. Det kan vara bättre för SEO om företagsnamnet är högre i källhierarkin.

Använda mobilnätet med fyra kolumner

Stiftelsen är som standard mottaglig, men beteendet hos denna aspekt av ramen är super enkel. Återgår till vår stora levande demo i "Går vidare"? avsnittet ovan, när visningsporten blir för smal, slås allt helt enkelt in i ett enkelspaltret:

Det här fungerar, men det är inte så snyggt eller robust. Lyckligtvis finns det ett andra nät som du har tillgång till som aktiveras med mobilmediasökningen. Detta rutnät är fyra kolumner och använder följande klasser:

• mobil-on
• mobil-två
• mobil-tre
• mobil-four

Dessa klasser implementeras exakt som de för fullstoringsnätet. Applicera? Mobil-tre? kommer att få ett objekt att spänna över tre av de fyra tillgängliga kolumnerna i mobilnätet. Med detta i åtanke, låt oss omarbeta tidigare layout:

<h2>Tolv kolumner</h2> <p>Lorem ipsum? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/a-beginners-guide-to-zurb-foundation-3-the-grid_9.jpg"> <h2>Gå och försök!</h2> <p>Med den här informationen borde du kunna gå till en fantastisk start med stiftelsen. Responsiv layout är ingen promenad i parken och denna ram går långt för att lindra denna stress och låter dig fokusera på ditt innehåll.</p> <p>Håll utkik efter mer Foundation-artiklar snart. Stiftelsen är mycket mer än ett rutnät, det finns fortfarande massor av saker som vi inte täckte!</p>