Et par uker siden den berømte Stiftelsesramme utgitt sin fjerde versjon. Hvis du aldri har hørt om Foundation, skal vi veilede deg gjennom å bruke dette responsive rammeverket.

Siden versjon 3 av Foundation ble bygget fra grunnen opp med SASS - en CSS preprosessor som hjelper til med å skrive mer effektiv CSS - denne nye versjonen er også mobilvennlig og gir mange funksjoner i rutenettet som du ikke ikke komme fra andre rammer.

La oss dykke inn i Foundation og se hvorfor det er så populært ...

Gitteret

Stiftelsen bruker et 12-kolonne nestbart rutenett som vil tilpasse seg alle størrelsesskjermbilder, hvis du allerede har brukt rutenett, dette burde alle være veldig kjent for deg. Alle divs i Foundation bruker boks størrelse: border-box, slik at grenser og polstring ikke påvirker elementets bredde og høyde, noe som gjør matte litt enklere for oss. Men den fantastiske tingen om grunnrutenettet er at du faktisk får 2 rister, et stort rutenett for når skjermen er større enn 768px i bredde og et mindre rutenett som du kan styre like enkelt. For det formål bruker Stiftelsen de små og # og store- # klassene, slik som:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

I denne koden opprettet vi en rad der det er 3 divs som er nøyaktig samme bredde når nettleseren er bredere enn 768px, men når den er mindre, som du kan se av den lille klassen i divsene, vil den siste okkupere halvparten av skjermen mens de andre to vil oppta 25% hver, gir dette deg enorm kontroll over hvordan nettstedet vårt vil se på alle skjermbilder.

Stiftelsen lar deg også kompensere for en kolonne som jeg mener at du kan ha en rad med 2 kolonner som kun er 3 kolonner brede, men du kan kompensere den andre som den flyter til høyre og for å gjøre det vi bruker den store offset klasse eller liten offset klasse:

3, offset 6

Block grid

Blokkgitteret er bare en fin liten ekstra, det er en måte for deg å dele innholdet i en liste i rutenettet, det er nyttig for når du ønsker at denne delen av nettstedet ditt skal være jevnt fordelt uansett størrelsen på nettleser. Denne typen rutenett bruker småblokkgitteret og de store blokkglassklassene, hvis du bare angir den første rutenettet vil beholde ønsket avstand uansett hva visningsporten er, men hvis du bare bruker storblokk- grid klasse når visningsporten når pausepunktet på 768px gridelementene vil stable oppå hverandre, kan du alltid ta mer kontroll ved å bruke begge disse klassene, slik som:

Ved hjelp av dette blir bildene jevnt fordelt uansett størrelse. Når visningsporten er større enn 768px, vil de bare okkupere en rad, og når den er mindre enn den, vil de okkupere to rader med 2 bilder hver.

Hovednavigasjonen

Nå som vi har dekket nettet i Foundation og hvordan det gir deg stor kontroll i alle miljøer, vil vi snakke om noe vi nesten alltid vil bruke på våre nettsteder: en toppnavigasjonslinje. Og selvfølgelig kan denne navigasjonen også være fleksibel med lite eller ikke noe arbeid ved hjelp av dette rammeverket. For å lage en enkel responsiv navigering ved hjelp av Foundation bruker du:

Denne biten av HTML oppretter en enkel navigasjonslinje som har tittelen på nettstedet til venstre og så til høyre har det fire menyelementer. Vær også oppmerksom på at når visningsporten er mindre enn 768 px, vil denne menyen bli erstattet av et listikon som gjør denne menyen lydhør. Hvis du vil at dette rutenettet skal ha sin posisjon fast mens du ruller nedover siden, trenger du bare å pakke den inn i en div med en klasse av faste. For å legge til dropdowns til navigasjonen din trenger du bare å legge til noe som dette til stedet der du vil ha dropdownen din:

#">  Undermeny Element 1
Undermeny Element 1
Undermeny Element 3

Det er også muligheten til å legge til en skillelinje til listeposten, og legge til en liten grå vertikal linje, for å gjøre det, trenger du bare å plassere et listepost med klassen divider mellom de to listepostene du ønsker å dele.

knapper

Ingen rammeverk vil være komplett uten noen forhåndsdefinerte knapper, og Foundation har faktisk mer enn én stil av forhåndsdefinert knapp, den har standard en som bruker en blå farge, og den legger til suksess, varsel og sekundær stil. Ved å legge til radioklassen gir du denne knappen en liten grense-radius og ved å gi den klassen rundt , gjør du knappen nesten helt rund. Du kan også legge til klassen deaktivert til knappen, og det er 4 størrelsesklasser for å gjøre knappen så stor som du trenger den.

Standard knappLiten knappLiten knappStor knappSekundær knappSuksessknappAlert ButtonRadius-knappRunde knappDeaktivert knapp

For å opprette en enkel rullegardinsknapp trenger du bare å legge til rullegardin klassen etter den siste klassen, slik som:

  h1.subheader 
  h1.  mindre 
  Listepost 
  Listepost 
  Link 1
Link 2

Som du kan se, når det gjelder typografi, gir Foundation oss litt grunnleggende hjelp og deretter noen ekstra klasser for å møte alle våre behov.

Andre komponenter

Hvis denne demonstrasjonen av stiftelsesrammen har gjort appetitten din til å lære mer og begynne å bygge med Foundation, bør du virkelig se på dokumentasjonen fordi Foundation også tilbyr flere CSS-komponenter som:

• Alert Boxes
• paneler
• Prisbord
• Progress Bars
• tabeller
• miniatyrbilder
• Flex Video

Og også noen hjelpepersoner som:

• Lysning
• Fall ned
• Joyride
• Magellan
• Orbit
• Avsløre
• Seksjon
• Verktøytips

Som du kan se, er det mye grunnlag for å utforske, og jeg anbefaler på det sterkeste at du ser på alle sine CSS- og JavaScript-egenskaper.

Konklusjon

Vi dekket akkurat nok i denne artikkelen for å se hvordan Stiftelsen kan bidra til å bygge raskere og mer responsive nettsteder. Ved hjelp av rutenettet får du mye mer kontroll over strukturen på nettstedet ditt enn når du bruker et normalt fleksibelt rutenett og Stiftelsen gir deg også mange hjelpere å lage ditt nettsted. Jeg håper denne artikkelen har gitt deg pressen til å lære og bruke Foundation for ditt neste prosjekt.

Har du brukt Foundation for et prosjekt? Hvilke funksjoner fant du mest nyttig? Gi oss beskjed i kommentarene.