För några veckor sedan den berömda Stiftelsens ramverk släppte sin fjärde version. Om du aldrig hört talas om Foundation, kommer vi att vägleda dig genom att använda denna responsiva ram.

Eftersom Stiftelsens version 3 byggdes från grunden med hjälp av SASS - en CSS-förprocessor som hjälper till vid skrivandet av effektivare CSS - den här nya versionen är också mobilvänlig och ger många funktioner i sitt nät som du inte " kommer inte från andra ramar.

Låt oss dyka in i Foundation och se varför det är så populärt ...

Rutnätet

Stiftelsen använder ett 12-kolonnets nestabla rutnät som anpassar sig till vilken storlek som helst, om du redan har använt rutnät så borde det vara mycket känt för dig. Alla divs i Foundation använder box-dimensionering: border-box så att gränserna och vadderingen inte påverkar elementets bredd och höjd, vilket gör matte lite enklare för oss. Men det fantastiska med Foundation Grid är att du faktiskt får 2 galler, ett stort galler för när skärmen är större än 768px i bredd och ett mindre galler som du kan styra precis som enkelt. För detta ändamål använder Stiftelsen små- och # -klasserna, så här:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

I denna kod skapade vi en rad där det finns 3 divs som är exakt samma bredd när webbläsaren är större än 768px men när den är mindre, som du kan se av den lilla klassen i divsna, kommer den sista att uppta hälften av skärm medan de andra två kommer att uppta 25% vardera, ger du stor kontroll över hur vår hemsida kommer att se på alla skärmar.

Stiftelsen tillåter dig också att kompensera en kolumn där jag menar att du kan ha en rad med 2 kolumner som bara är 3 kolumner breda men du kan kompensera den andra som den flyter till höger och för att vi ska använda den stora offset-klass eller avvägningsklassen:

3, offset 6

Blockruten

Blocknätet är bara en trevlig liten extra, det är ett sätt för dig att dela upp innehållet i en lista i nätet. Det är användbart för när du önskar att den här delen av din webbplats ska vara jämnt fördelad oavsett storleken på webbläsare. Denna typ av rutnät använder lilla block-rutnätet och de stora block-klasserna, om du bara ställer in den första kommer rutnätet att hålla önskat avstånd oavsett vad visningsporten är men om du bara använder storblok- rutnät klassen när visningsporten når punkten 768px, kommer rutnätet att stapla ovanpå varandra, du kan alltid ta mer kontroll genom att använda båda dessa klasser, så här:

Med detta kommer bilderna att vara jämnt fördelade oavsett storlek. När visningsporten är större än 768 px kommer de bara att uppta en rad, och när den är mindre än så kommer de att uppta två rader med 2 bilder vardera.

Huvudnavigering

Nu när vi har täckt gallret i Foundation och hur det ger dig mycket kontroll i alla miljöer, kommer vi att prata om någonting som vi nästan alltid kommer att använda på våra webbplatser: en toppnavigationsfält. Och naturligtvis kan denna navigering också vara flexibel med lite eller inget arbete med hjälp av denna ram. För att skapa en enkel responsiv navigering med Foundation använder du:

Denna bit av HTML skapar en enkel navigeringsfält som har titeln på webbplatsen till vänster och sedan till höger har den fyra menyalternativ. Observera också att när visningsporten är mindre än 768 px kommer denna meny att ersättas med en listikon som gör denna meny mottaglig. Om du vill att det här nätet ska ha sin position som du rullar ner på sidan behöver du bara lägga den i en div med en klass av fasta. För att lägga till dropdowns till din navigering behöver du bara lägga till något så här till den plats där du vill ha din nedrullning:

#">  Undermeny Artikel 1
Undermeny Artikel 1
Undermeny Artikel 3

Det finns också möjlighet att lägga till en delare till ditt listobjekt, och lägga till en liten grå vertikal linje. För att göra det behöver du bara placera ett listobjekt med klassen av divider mellan de två listobjekten du vill dela upp.

Knappar

Inget ramverk skulle vara komplett utan några fördefinierade knappar och Foundation har faktiskt mer än en typ av knapp fördefinierad, den har den standard som använder en blå färg och sedan lägger den till framgång, varning och sekundär stil. Genom att lägga till klassen av radien ger du den här knappen en liten bit av radie och genom att ge den klassen av runda gör du knappen nästan helt rund. Du kan också lägga till klassen inaktiverad till knappen och det finns 4 storleksklasser för att göra knappen så stor som du behöver.

StandardknappLiten knappLiten knappStor knappSekundär knappFramgångsknappAlert ButtonRadius-knappRound ButtonInaktiverad knapp

För att skapa en enkel dropdown-knapp behöver du bara lägga till dropdown-klassen efter den sista klassen, så här:

  h1.subheader 
  h1.  Mindre 
  Listobjekt 
  Listobjekt 
  Länk 1
Länk 2

Som du kan se, när det gäller typografi, ger Foundation oss lite grundläggande hjälp och sedan några ytterligare klasser för att möta alla våra behov.

Övriga komponenter

Om denna demonstration av stiftelsens ramverk har gjort din aptit att lära sig mer och börja bygga med Foundation bör du verkligen titta på dokumentationen eftersom Foundation också erbjuder ytterligare CSS-komponenter som:

• Varningslådor
• paneler
• Prissättningstabeller
• Progress Bars
• tabeller
• miniatyrer
• Flex Video

Och även några hjälpar JavaScript som:

• Clearing
• Falla ner
• Nöjestur
• Magellan
• Bana
• Avslöja
• Sektion
• verktygstips

Som du kan se finns det en hel del stift att utforska och jag rekommenderar starkt dig att titta på alla dess CSS- och JavaScript-egenskaper.

Slutsats

Vi täckte precis nog i den här artikeln för att se hur Foundation kan hjälpa till att bygga snabbare och mer mottagliga webbplatser. Med hjälp av nätet får du mycket mer kontroll över strukturen på din webbplats än när du använder ett normalt flexibelt nät och Foundation ger dig också massor av hjälpare att skapa din webbplats. Jag hoppas att den här artikeln har gett dig ett tryck för att lära dig och använda Foundation för ditt nästa projekt.

Har du använt Foundation för ett projekt? Vilka funktioner hittade du mest användbar? Låt oss veta i kommentarerna.