Bygg et kortbasert brukergrensesnitt med fundament

Sep 16, 2025

hvordan

[1. 3]

Kort-basert Nettstedslayouts har tatt over nettet. Made populært av Pinterest, Twitter, Facebook og Google, kort har blitt et go-to-design mønster for mange forskjellige bruk saker.

Det er ikke vanskelig å se hvorfor. Kortene fungerer perfekt i Responsivt webdesign . Som selvforsynte enheter kan de flyttes, blandes og blandes med forskjellige innholdstyper. De svarer også enkelt på forskjellige skjermstørrelser, fra enkeltkolonner på mobile enheter til multi-kolonne på større enheter.

Trinn til den perfekte nettsiden layout

Zurbsteamet har brukt kortbaserte layouter i sitt designarbeid i mange år. Dens frontendramme, grunnlag, har alltid forsøkt å utstyre webdesignere med verktøyene de trenger for å raskt designe og bygge responsive nettsteder ved å inkludere et bredt spekter av modulære og fleksible komponenter. Versjon 6.3 Lagt til denne samlingen av Building Blocks bringer en helt ny off-lerret implementering, responsive trekkspill / faner og en kraftig ny kortkomponent.

I denne opplæringen skal vi lære å skape et responsivt kortbasert brukergrensesnitt som utnytter Foundations FlexBox-baserte rutenett for å åpne en hel rekke muligheter.

01. Sett opp et utviklingsmiljø

Det første trinnet er å sette opp et utviklingsmiljø. For denne opplæringen bruker vi et nodebasert utviklingsmiljø, så du må installere node.js. Detaljer for å gjøre dette avhenger av miljøet ditt, så sjekk her å finne ut hva du skal gjøre.

Når du har installert node installert, installer Foundation CLI ved hjelp av NPM Install -G Foundation-CLI , som vil gjøre det enkelt å sette opp et nytt fundamentprosjekt.

02. Start et nytt prosjekt

La oss lage et nytt prosjekt basert på zurb-malen. Kjør kommandoen Foundation Ny Net-Magazine-Tutorial , velg 'et nettsted (Foundation for Sites)', 'Net-Magazine-Tutorial' og deretter zurb-mal. Dette vil sette opp en prosjektmal basert på fundament, komplett med byggesystem og utviklingsserver.

Malen kommer med en prøve side i SRC / Sider / Index.html . For enkelhet, vil vi fjerne den prøven og erstatte den med en tom & lt; header & gt; & lt; / header & gt; å starte fra grunnen av å bygge ut våre kortbaserte brukergrensesnitt. Løpe NPM start Fra kommandolinjen til å kjøre utviklingsserveren, og du bør se en bare HTML-side klar for kort.

03. Lag et kort

Nå er det på tide å lage vårt første kort. For nå, la oss bare sette det rett i en seksjon med klassen .Cards-container . Når du lager et kort ved hjelp av fundament, er det tre kjerneklasser å være klar over: .kort , .Card-seksjon og .Card-divider. . For mer avanserte brukere tilsvarer hver av disse en SCS-mixin ( kortbeholder , kort-seksjon og Card-divider. ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Et enkelt kort med fundamentet Yeti på den, topptekst og bunntekst opprettet ved hjelp av Card-Divider-klassen

Men for denne opplæringen vil vi bruke standardklassene for enkelhet. De .kort Klassen er beholderen; Hvert kort vil leve i en .kort . Dette definerer ting som grenser, skygger og standardfarging.

De .Card-seksjon klasse definerer en utvidbar innholdsblokk, hvor du kan sette innhold, mens .Card-divider. Klassen definerer en ikke-ekspanderende blokk, for eksempel en bunntekst, topptekst eller divider. La oss bruke alle disse klassene til å lage vårt første, grunnleggende kort.

 & lt; header & gt;
  & lt; div klasse = "rad kolonner" & gt;
    & lt; h3 & gt; kort er de beste & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; seksjonsklasse = "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-seksjon" & gt;
      & lt; img src = "https://foundation.zurb.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; / seksjon & gt;

04. Legg til komponentstiler

Hvis vi bare gjør dette, vil vårt kort være stort, utvide for å fylle hele skjermen. Vi skal håndtere generelle liming, men for nå, la oss bruke dette som en unnskyldning for å lære å legge til komponentstiler i Zurb-malen.

Legg til en fil _Card.scss til SRC / Eiendeler / SCS / komponenter / Angi A. Maks bredde: 300px til .kort og inkludere filen i våre viktigste CSS ved å legge til @Import komponenter / kort; til SRC / Eiendeler / SCSS / APP.SCSS .

05. Gjør kortene dine gjenbrukbare

For å skape et repeterbart layout med flere kort, skal vi ha kortene våre å være gjenbrukbare komponenter som vi kan plugge inn igjen og igjen. Zurb-malen som vi bruker for denne opplæringen, bruker et templerende språk som heter Håndtak, som inkluderer evnen til å skape delvis, eller gjenbrukbare blokker av kode.

For å flytte kortets implementering til en delvis, bare kutt og lim inn .kort komponent Vi bygde inn i en fil i SRC / Delvis , si SRC / Delvis / Basic-Card.html . Du kan da inkludere det innholdet ved å bare legge til linjen {{& gt; Basic-Card}} i indeksfilen din.

06. Begynn å bygge oppsettet ditt

Vi vil dekke forskjellige korttyper i en liten bit, men først la oss bruke vårt gjenbrukbare grunnleggende kort for å begynne å skape et større, responsivt layout for kortene våre. For å gjøre det, skal vi bruke et konsept fra grunnlaget kalt blokknettet.

Stiftelsen inneholder noen få forskjellige typer grids, men de starter alle fra begrepet rader og kolonner. En rad skaper en horisontal blokk som kan inneholde flere vertikale kolonner. Disse grunnleggende byggesteinene utgjør kjernen i nesten alle layouter.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Med et enkelt blokkrute har vi allerede en vakker, skalerbar layout for så mange kort som vi vil inkludere

Blokkeringsgitter er en kortvarig måte å lage like store kolonner og for å tillate deg selv fleksibiliteten og friheten til å legge til en ubestemt mengde innhold og få det til å ligge pent i like store kolonner. Du legger bare til en klasse på rad og deretter legger til så mange kolonnekomponenter som du vil. Stiftelsen vil legge dem ut for deg pent og rent.

Siden vi forventer å ha et veldig stort og skiftende antall kort, er dette ideelt for våre formål. La oss sette opp dette raskt i et fire-kolonne rutenett og legge til noen få dusin kort. For nå vil vi bare bekymre oss om store skjermer, så vi vil bare bruke .Large-up-4 klasse til raden.

 & lt; seksjonsklasse = "kort-container" & gt;
& lt; div class = "rad stor-up-4" & gt;
{{#repeat 24}}
& lt; div class = "kolonne" & gt;
{{& gt; Basic-Card}}
& lt; / div & gt;
{{/gjenta}}
& lt; / div & gt;
& lt; / seksjon & gt;

07. Gjør det lydhør

Deretter, la oss vurdere hva vi vil skje på forskjellige skjermstørrelser. Stiftelsen kommer med små, mellomstore og store breakpoints innebygd, så vi kan bare bruke en annen blokk-grid klasse for hvert brytepunkt for å skifte ting rundt.

La oss sette ett kort per rad på mobilskjermbilder, og tre per rad på tablett, ved å legge til klassene .small-up-1 og .medium-up-3 på rad. Hvis vi gjør dette, og fjern stoppet Maks bredde Eiendom vi satte _Card.scss . Vi har allerede et vakkert responsivt layout som ser bra ut på alle skjermstørrelser.

08. Prøv noen nye korttyper

Combine different styles of card to build your layout — Kombiner forskjellige stiler av kort for å bygge opp layoutet ditt

La oss nå diversifisere vårt sett med kort, en annen type er et rent kant-til-edge bilde. Kortseksjoner og kortfordeler inneholder polstring som standard, men for å ha kant-til-kantinnhold kan vi enkelt sette bildet direkte innvendig på kortet. La oss legge til dette som en Photo-Card.html. delvis i SRC / Delvis .

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

09. Introduser FlexBox.

Det er hundrevis av mulige måter vi kan sette sammen kort - for litt inspirasjon, kan du sjekke ut grunnlaget CardPack-repository . Men la oss gå videre til hvordan vi håndterer layout når vi har forskjellige kort. Hvis du setter bildet-kortet delvis inn i layoutet som veksler med grunnkortet som vi gjorde før, ender vi med litt av en hakket opplevelse fordi våre høyder er forskjellige. Dette kan være bra, eller vi vil kanskje justere vårt layout for å kompensere.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Stiftelseskortpakken gir deg et flott sett med forhåndsbygget FlexBox-kort for å nivåisere kortspillet ditt

For denne opplæringen kompenserer vi ved å bruke vår favoritt nye CSS Layout-teknikk - Flexbox. Stiftelsen leveres med en flexbox-modus for dets rutenett. For å aktivere det, trenger du bare å åpne SRC / Eiendeler / SCSS / APP.SCSS , kommentere ut @include Foundation-Grid; og @include Foundation-float-classes; og uncomment. @include foundation-flex-grid; og @include Foundation-Flex-Classes; .

10. Lag kortene dine i samme høyde

Med Flexbox-klassene aktiveres, er det enkelt å få kortene våre til å være i samme høyde. Først kan vi gjøre våre kolonner flex foreldre ved å legge til .Flex-beholder klasse. Dette er en prototyping snarvei for å legge til Skjerm: Flex; eiendom til dem. Når vi gjør dette, vil alle kortene bli samme høyde, men siden Flex Child Elements krymper som standard, får noen av kortene våre slags smale.

Vi kan fikse dette problemet ved å bare fortelle disse elementene å vokse. Dette gjøres ved å enten målrette dem med CSS og gi dem flex-grow: 1; eller for enkelhet mens prototyping, bare ved å legge til klassen .Flex-barn-vokse . Når alt dette har blitt gjort, fyller alle kortene våre kolonnene og vil være pent i samme høyde.

Denne artikkelen ble opprinnelig omtalt i Net Magazine. utgave 293. Kjøp det her eller Abonner på nettet her .

Likte dette? Prøv disse ...

10 grunner til at du skal bruke Atomic Design
Skape og animere SVG polygoner
CSS triks for å revolusjonere layoutene dine

Bygg et kortbasert brukergrensesnitt med fundament

01. Sett opp et utviklingsmiljø

02. Start et nytt prosjekt

03. Lag et kort

04. Legg til komponentstiler

05. Gjør kortene dine gjenbrukbare

06. Begynn å bygge oppsettet ditt

07. Gjør det lydhør

08. Prøv noen nye korttyper

09. Introduser FlexBox.

10. Lag kortene dine i samme høyde

hvordan - Mest populære artikler

Hvordan øke hastigheten på og optimalisere WordPress-nettstedene

Speed Sculpt En skapning i Zbrush

Tegn en dårlig-ass Geisha

Kom i gang med Rust

Slik bygger du et chatbotgrensesnitt

Opprett en perfekt geometrisk logo design i Illustrator

Fire teneter av UX-strategi

Hvordan lage en realistisk sportsbil gjengivelse

Kategorier