Byg en kortbaseret UI med fundament

Sep 14, 2025

hvordan

Kortbaseret Website Layouts. har overtaget nettet. Kortet, Twitter, Facebook og Google, er blevet et go-to-designmønster for mange forskellige brugssager.

Det er ikke svært at se hvorfor. Kort fungerer perfekt indenfor Responsive Web Design . Som selvstændige enheder kan de flyttes, blandes og blandes med forskellige indholdstyper. De svarer også let på forskellige skærmstørrelser, fra enkeltkolonner på mobile enheder til Multi-kolonne på større enheder.

Skridt til det perfekte website layout

Zurb teamet har brugt kortbaserede layouts i sit designarbejde i årevis. Dens frontendramme, fundament, har altid søgt at udstyre webdesignere med de værktøjer, de har brug for til hurtigt at designe og opbygge lydhørt websteder ved at inkludere en bred vifte af modulære og fleksible komponenter. Version 6.3 Tilføjet til denne samling af byggesten medfører en helt ny off-lærred implementering, responsive accordions / faner og en stærk ny kortkomponent.

I denne vejledning lærer vi, hvordan vi opretter en lydhør kortbaseret UI, der udnytter FOELTATIONS FLEXBOX-BASED GRID for at åbne en hel masse muligheder.

01. Opsæt et udviklingsmiljø

Det første skridt er at oprette et udviklingsmiljø. For denne vejledning bruger vi et node-baseret udviklingsmiljø, så du skal installere node.js. Detaljerne for at gøre dette afhænger af dit miljø, så check her at finde ud af, hvad du skal gøre.

Når du har installeret noden, skal du installere fundamentet CLI ved hjælp af NPM Installer -G Foundation-CLI , som gør det nemt at oprette et nyt fundamentprojekt.

02. Start et nyt projekt

Lad os oprette et nyt projekt baseret på GROURS-skabelonen. Kør kommandoen Foundation New Net-Magazine-Tutorial , vælg 'en hjemmeside (fundament for websteder)', 'Net-magasin-tutorial' og derefter Zurb-skabelon. Dette vil oprette en projektskabelon baseret på fundament, komplet med Build System og Development Server.

Skabelonen leveres med en prøveide i src / sider / index.html . For enkelhed fjerner vi den prøve og erstatter den med en tom & lt; header & gt; & lt; / header & gt; At starte fra bunden af vores kortbaserede brugergrænseflade. Løb NPM Start. Fra kommandolinjen for at køre udviklingsserveren, og du skal se en Bare HTML-side klar til kort.

03. Opret et kort

Nu er det tid til at oprette vores første kort. For nu, lad os bare sætte det lige ind i et afsnit med klassen .cards-beholder. . Når du opretter et kort ved hjælp af fundamentet, er der tre kerneklasser at være opmærksomme på: .kort Vi .card-sektion og .Card-divider. . For mere avancerede brugere svarer hver af disse til en SCSS Mixin ( Kort-container. Vi Kort-sektion og Card-Divider. ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Et simpelt kort med fundamentet Yeti på det, Header og Footer skabt ved hjælp af kort-dividerklassen

Men for denne vejledning vil vi bruge standardklasserne for enkelhed. Det .kort Klassen er beholderen; Hvert kort vil leve inden for en .kort . Dette definerer ting som grænser, skygger og standardfarve.

Det .card-sektion Klassen definerer en udvidelig indholdsblok, hvor du måske sætter indhold, mens .Card-divider. Klasset definerer en ikke-ekspanderende blok, såsom en footer, header eller divider. Lad os bruge alle disse klasser til at oprette vores første, grundlæggende kort.

 & lt; header & gt;
  & lt; div class = "row søjler" & gt;
    & lt; h3 & gt; kort er de bedste & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; sektion klasse = "kort-container" & gt;
  & lt; div class = "kort" & gt;
    & lt; div class = "Card-divider" & gt;
      & lt; H4 & GT; Yeti Header & LT; / H4 & GT;
    & lt; / div & gt;
    & lt; div class = "kort-sektion" & gt;
      & lt; img src = "https://foundation.zurt.com/sites/docs/assets/img/yeti.svg" & GT; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div class = "Card-divider" & gt;
      & lt; p & gt; yeti footer & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / sektion & gt;

04. Tilføj komponent stilarter

Hvis vi bare gør dette, vil vores kort være stort og udvide for at udfylde hele skærmen. Vi skal håndtere samlet dimensionering inden for kort tid, men lad os nu bruge dette som en undskyldning for at lære at tilføje komponentstile i GROURS-skabelonen.

Tilføj en fil _card.scss. til SRC / Aktiver / SCSS / Components / Angivelse af A. Max-bredde: 300px til .kort og inkludere filen i vores vigtigste CSS ved at tilføje @import komponenter / kort; til SRC / AKTEMER / SCSS / APP.SCSS .

05. Gør dine kort genanvendelige

For at skabe et gentagende layout med flere kort, vil vi gerne have, at vores kort bliver genanvendelige komponenter, som vi kan tilslutte os igen og igen. Den Zurb-skabelon, som vi bruger til denne vejledning, bruger et templateringssprog kaldet Håndtag, som omfatter evnen til at oprette partials eller genanvendelige kodeblokke.

At flytte vores kortimplementering til en delvis, simpelthen skære og indsætte .kort komponent vi indbygget i en fil i src / partials. , siger SRC / partials / basic-card.html . Du kan derefter medtage det indhold ved blot at tilføje linjen {{& gt; Basic-Card}} i din indeksfil.

06. Begynd at opbygge dit layout

Vi dækker forskellige korttyper i en lille smule, men lad os først bruge vores genanvendelige basiskort til at begynde at skabe et større, responsivt layout til vores kort. For at gøre det skal vi bruge et koncept fra Foundation kaldet Block Grid.

Foundation indeholder et par forskellige typer gitter, men de starter alle fra begrebet rækker og kolonner. En række skaber en vandret blok, som kan indeholde flere vertikale kolonner. Disse grundlæggende byggesten udgør kernen i næsten alle layouts.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Med et simpelt blokgitter har vi allerede et smukt, skalerbart layout for så mange kort som vi vil medtage

Blokgitter er en stenografi måde at skabe lige store kolonner på og tillade dig selv fleksibiliteten og friheden til at tilføje en ubestemt mængde indhold og få det ud pænt i lige kolonner. Du tilføjer blot en klasse til rækken og derefter tilføjer så mange kolonne komponenter som du vil. Foundation vil lægge dem ud for dig pænt og rent.

Da vi forventer at have et meget stort og skiftende antal kort, er dette ideelt til vores formål. Lad os sætte det hurtigt op i et fire-kolonne gitter og tilføje et par dusin kort. For nu vil vi kun bekymre os om store skærme, så vi vil simpelthen anvende .lage-up-4 klasse til rækken.

 & lt; sektion klasse = "kort-container" & gt;
& lt; div klasse = "række stor-up-4" & gt;
{{#Repeat 24}}
& lt; div class = "kolonne" & gt;
{{& gt; Basic-Card}}
& lt; / div & gt;
{{/gentage}}
& lt; / div & gt;
& lt; / sektion & gt;

07. Gør det lydhør

Derefter skal vi overveje, hvad vi vil ske på forskellige skærmstørrelser. Stiftelsen leveres med små, mellemstore og store breakpoints indbygget, så vi kan simpelthen anvende en anden blokgitterklasse for hvert breakpoint at skifte ting rundt.

Lad os sætte et kort pr. Række på mobile skærme og tre per række på tablet, ved at tilføje klasserne .small-up-1 og .medium-up-3 på rækken. Hvis vi gør dette, og fjern stopgapet max-bredde. Ejendom, vi sætter _card.scss. . Vi har allerede et smukt lydhørt layout, der ser godt ud på alle skærmstørrelser.

08. Prøv nogle nye korttyper

Combine different styles of card to build your layout — Kombinere forskellige stilarter af kort for at opbygge dit layout

Lad os nu diversificere vores sæt kort, en anden type er et rent kant-til-kantfoto. Kortafsnit og kortdelere indeholder som standard polstring, men for at have kant-til-kantindhold kan vi simpelthen lægge billedet direkte inde i kortet. Lad os tilføje dette som en foto-card.html. Delvis i src / partials. .

 & lt; div class = "kort" & gt;
& lt; img src = "http://foundation.zurt.com/assets/img/foundation-mails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. Introducer Flexbox

Der er hundredvis af mulige måder, vi kan sammensætte kort - for nogle inspiration, kan du tjekke stiftelsen Cardpack depository . Men lad os gå videre til, hvordan vi styrer layout, når vi har forskellige kort. Hvis du indsætter fotokortet, der er partial i layoutet, skifter med basiskortet som vi gjorde før, ender vi med lidt af en hakket oplevelse, fordi vores højder er forskellige. Dette kan være fint, eller vi vil måske justere vores layout for at kompensere.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Stiftelseskortpakken giver dig et godt sæt af forudbyggede flexbox-kort til at udjævne dit kortspil

For denne vejledning kompenserer vi ved at bruge vores foretrukne nye CSS-layoutteknik - Flexbox. Foundation leveres med en FlexBox-tilstand for sit gitter. For at aktivere det, skal du bare åbne SRC / AKTEMER / SCSS / APP.SCSS , kommentere ud @include fundament-gitter; og @include fundament-float-klasser; og uoverensstemmelse @include fundament-flex-gitter; og @include fundament-flex-klasser; .

10. Lav dine kort i samme højde

Med FlexBox-klasserne aktiveret, er det nemt at få vores kort til at være den samme højde. For det første kan vi gøre vores kolonner flexforældre ved at tilføje .flex-beholder. klasse. Dette er en prototyperingsgenvej for at tilføje Display: Flex; ejendom til dem. Når vi gør det her, bliver alle kortene samme højde, men da Flex Child Elements krymper som standard, får nogle af vores kort slags smalle.

Vi kan løse dette problem ved blot at fortælle disse elementer at vokse. Dette gøres ved enten at målrette dem med CSS og give dem Flex-vokse: 1; eller for enkelhed under prototyping, bare ved at tilføje klassen .flex-child-vokse . Når alt dette er blevet gjort, skal alle vores kort fylde kolonnerne og vil være pænt samme højde.

Denne artikel blev oprindeligt fremhævet i Net Magazine. Udgave 293. Køb det her eller Abonner på nettet her .

Kunne lide dette? Prøv disse ...

10 grunde, du skal bruge atomdesign
Skabe og animere SVG polygoner
CSS-tricks til at revolutionere dine layouts

Byg en kortbaseret UI med fundament

01. Opsæt et udviklingsmiljø

02. Start et nyt projekt

03. Opret et kort

04. Tilføj komponent stilarter

05. Gør dine kort genanvendelige

06. Begynd at opbygge dit layout

07. Gør det lydhør

08. Prøv nogle nye korttyper

09. Introducer Flexbox

10. Lav dine kort i samme højde

hvordan - Mest populære artikler

Opret en kromatisk aberrationseffekt

Forbedre dine koncept kunstfærdigheder i Photoshop

Sådan opretter du en fotorealistisk rumscene

Sådan designes isometrisk typografi

Hold perfekt versionskontrol med abstrakt

Byg dit eget WebGL Physics-spil

Sådan prototype En mobilapp med Adobe XD

Sådan tager du dit vektor logo fra 2D til 3D

Kategorier