For et par uger siden den berømte Stiftelsens ramme udgivet sin fjerde version. Hvis du aldrig har hørt om Foundation, vil vi lede dig igennem ved hjælp af denne lydhørige ramme.

Siden version 3 af Foundation blev bygget fra bunden ved hjælp af SASS - en CSS preprocessor, der hjælper med at skrive mere effektiv CSS - denne nye version er også mobilvenlig og giver mange funktioner i sit net, som du ikke ' t komme fra andre rammer.

Lad os dykke ind i Foundation og se hvorfor det er så populært ...

Nettet

Foundation bruger et 12 kolonne nestable grid, der vil tilpasse sig enhver størrelse skærm, hvis du allerede har brugt grids dette bør alle være meget bekendt med dig. Alle divs i Foundation bruger box-dimensionering: border-box, så grænserne og polstring ikke påvirker elementets bredde og højde, hvilket gør matematikken lidt lettere for os. Men den fantastiske ting om fundamentet er, at du faktisk får 2 grids, et stort grid til, når skærmen er større end 768 px i bredden og et mindre grid, som du kan styre lige så enkelt. Til dette formål bruger stiftelsen små- og stor- klasser som:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

I denne kode skabte vi en række, hvor der er 3 div, der er den samme bredde, når browseren er bredere end 768px, men når den er mindre, som du kan se af den lille klasse i divsene, vil den sidste besætte halvdelen af skærmen, mens de to andre vil optage 25% hver, giver dette dig enorm kontrol over, hvordan vores hjemmeside vil se på alle skærme.

Foundation giver dig også mulighed for at kompensere en kolonne, hvor jeg mener, at du kan have en række med 2 kolonner, der kun er 3 kolonner brede, men du kan kompensere den anden, at den flyder til højre og for at gøre det, bruger vi den store offset klasse eller small-offset klassen:

3, offset 6

Blokgitter

Blokgitteret er bare en dejlig lille ekstra. Det er en måde at splitte indholdet af en liste i nettet. Det er nyttigt, når du ønsker, at denne særlige del af dit websted skal forblive jævnt fordelt, uanset størrelsen af browser. Denne type gitter bruger små blok-gitter og stor-blok-klassen klasser, hvis du kun sætter den første, gitteret vil holde den ønskede afstand, uanset hvad visningsporten er, men hvis du kun bruger den store blok- grid klasse når viewport når breakpoint på 768px grid elementer vil stable oven på hinanden, kan du altid tage mere kontrol ved at bruge begge disse klasser, som sådan:

Ved hjælp af dette bliver billederne jævnt fordelt uanset størrelsen. Når viewporten er større end 768px, vil de kun optage en række, og når den er mindre end den, vil de optage to rækker med 2 billeder hver.

Hovednavigationen

Nu hvor vi har dækket nettet i Foundation og hvordan det giver dig masser af kontrol i alle miljøer, vil vi snakke om noget, vi næsten altid vil bruge på vores websteder: en øverste navigationslinje. Og selvfølgelig kan denne navigation også være fleksibel med lidt eller intet arbejde ved hjælp af denne ramme. For at oprette en simpel responsiv navigation ved hjælp af Foundation bruger du:

Denne bit af HTML skaber en simpel navigationslinje, der har titlen på hjemmesiden til venstre og så til højre har den fire menupunkter. Bemærk også, at når visningsporten er mindre end 768 px, erstattes denne menu med et listikon, der gør denne menu lydhør. Hvis du vil have dette net, skal du have sin position fast, mens du ruller ned på siden, skal du bare pakke den ind i en div med en klasse af faste. For at tilføje dropdowns til din navigation skal du blot tilføje noget som dette til det sted, hvor du vil have din dropdown:

Der er også mulighed for at tilføje en divider til din liste element tilføje en lille grå vertikal linje, for at gøre det skal du bare placere en liste element med klassen divider mellem de to listeposter, du ønsker at dele.

Knapper

Ingen ramme ville være fuldstændig uden nogle foruddefinerede knapper, og Foundation har faktisk mere end en stil på knappen foruddefineret. Den har den standard, der bruger en blå farve, og så tilføjer den succes, alarm og sekundære stilarter. Ved at tilføje klassen af radius giver du denne knap en lille smule grænseradius og ved at give den klassen af runde , gør du knappen næsten helt rund. Du kan også tilføje klassen deaktiveret til knappen, og der er 4 størrelsesklasser for at gøre knappen så stor, som du har brug for den.

For at oprette en simpel dropdown-knap behøver du kun at tilføje dropdown-klassen efter den sidste klasse som sådan:

Som du kan se, når det kommer til typografi, giver Foundation os nogle grundlæggende hjælp og derefter nogle ekstra klasser til at opfylde alle vores behov.

Andre komponenter

Hvis denne demonstration af Foundation Framework har gjort din appetit til at lære mere og begynde at bygge med Foundation, bør du virkelig se på dokumentationen, fordi Foundation også tilbyder yderligere CSS komponenter som:

  • Alert Boxes
  • Paneler
  • Prissætningstabeller
  • Progress Bars
  • Borde
  • Miniaturer
  • Flex Video

Og også nogle hjælper JavaScript som:

  • Clearing
  • dropdown
  • joyride
  • Magellan
  • Kredsløb
  • Løfte sløret
  • Afsnit
  • værktøjsvink

Som du kan se, er der en masse institutter at udforske, og jeg anbefaler dig stærkt at se på alle sine CSS- og JavaScript-egenskaber.

Konklusion

Vi dækkede lige nok i denne artikel for at se, hvordan Foundation kan hjælpe med at opbygge hurtigere og mere lydhøre websites. Ved hjælp af netværket får du meget mere kontrol over strukturen på dit website end ved brug af et normalt fleksibelt net, og Foundation giver dig også masser af hjælpere at oprette din hjemmeside. Jeg håber, at denne artikel har givet dig et skub til at lære og bruge Foundation til dit næste projekt.

Har du brugt Foundation til et projekt? Hvilke funktioner har du fundet mest nyttige? Lad os vide i kommentarerne.