Bygg en kortbaserad UI med Foundation

Sep 15, 2025

Hur

Kortbaserad Webbplatslayouter har tagit över webben. Gjord populär av Pinterest, Twitter, Facebook och Google, kort har blivit ett go-to design mönster för många olika användningsfall.

Det är inte svårt att se varför. Kort fungerar perfekt inom Responsiv webbdesign . Som fristående enheter kan de flyttas, blandas och blandas med olika innehållstyper. De svarar också lätt på olika skärmstorlekar, från enkla kolumner på mobila enheter till multi-kolumn på större enheter.

Steg till den perfekta webbplatsens layout

Zurb-laget har använt kortbaserade layouter i sitt designarbete i flera år. Frontend Framework, Foundation, har alltid försökt utrusta webbdesigners med de verktyg som de behöver för att snabbt utforma och bygga responsiva webbplatser genom att inkludera ett brett utbud av modulära och flexibla komponenter. Version 6.3 Tillagd till den här samlingen av byggstenar ger ett helt nytt implementering av new-canvas, responsiva dragspel / flikar och en kraftfull ny kortkomponent.

I den här handledningen kommer vi att lära oss hur man skapar en responsiv kortbaserad UI som utnyttjar Foundations Flexbox-baserade rutnät för att öppna en hel tråd av möjligheter.

01. Ställ in en utvecklingsmiljö

Det första steget är att skapa en utvecklingsmiljö. För den här handledningen använder vi en nodbaserad utvecklingsmiljö, så du måste installera node.js. Detaljerna för att göra detta beror på din miljö, så kolla här För att ta reda på vad du ska göra.

När du har installerat nod, installera stiftelsen cli med npm installera -g foundation-cli , vilket gör det enkelt att skapa ett nytt grundprojekt.

02. Starta ett nytt projekt

Låt oss skapa ett nytt projekt baserat på Zurb-mallen. Kör kommandot Foundation New Net-Magazine-Tutorial , välj 'A Website (Foundation for Sites)', 'Net-Magazine-Tutorial' och sedan Zurb Mall. Detta kommer att ställa in en projektmall baserad på grunden, komplett med Build System and Development Server.

Mallen levereras med en provsida i src / sidor / index.html . För enkelhet, tar vi bort det provet och byt ut det med en tom & lt; header & gt; & lt; / header & gt; att börja från början bygga ut vår kortbaserade UI. Springa npm start Från kommandoraden för att köra utvecklingsservern, och du bör se en Bare HTML-sida klar för kort.

03. Skapa ett kort

Nu är det dags att skapa vårt första kort. För nu, låt oss bara sätta det rakt inuti en sektion med klassen .Cards-container . När du skapar ett kort med hjälp av fundament finns det tre kärnklasser som är medvetna om: .kort , .Card-sektionen och .Card-divider . För mer avancerade användare motsvarar var och en av dessa en SCSS-mixin ( kortbehållare , kortsektion och kortdivider ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Ett enkelt kort med grunden Yeti på den, header och footer skapad med hjälp av Card-Divider-klassen

Men för den här handledningen kommer vi att använda standardklasserna för enkelhet. De .kort klassen är behållaren; Varje kort kommer att leva inom en .kort . Detta definierar saker som gränser, skuggor och standardfärgning.

De .Card-sektionen klassen definierar ett expanderbart innehållsblock, där du kan lägga in innehåll, medan .Card-divider klassen definierar ett icke-expanderande block, till exempel en sidfot, rubrik eller delare. Låt oss använda alla dessa klasser för att skapa vårt första, grundläggande kort.

 & lt; header & gt;
  & lt; div klass = "rad kolumner" & gt;
    & lt; H3 & GT; kort är de bästa & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; avsnitt klass = "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 = "kortavsnitt" & 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; / avsnitt och GT;

04. Lägg till komponentstilar

Om vi bara gör det kommer vårt kort att vara stort, expandera för att fylla hela skärmen. Vi kommer att hantera övergripande storlekar strax, men för nu kan vi använda detta som en ursäkt för att lära dig att lägga till komponentstilar i Zurb-mallen.

Lägg till en fil _card.scss till SRC / tillgångar / SCSS / komponenter / Ange a MAX-Bredd: 300px för .kort och inkludera filen i vår huvudsakliga CSS genom att lägga till @import komponenter / kort; till src / tillgångar / scss / app.scss .

05. Gör dina kort återanvändbara

För att skapa en repeterbar layout med flera kort, kommer vi att vilja att våra kort är återanvändbara komponenter som vi kan ansluta om och om igen. Den zurbmall som vi använder för den här handledningen använder ett mallande språk som heter styr, vilket inkluderar förmågan att skapa partiella eller återanvändbara kodblock.

För att flytta vårt kortimplementering till en partiell, helt enkelt klippa och klistra in .kort Komponent Vi byggde in i en fil i src / partials , säg src / partials / basic-card.html . Du kan då inkludera det innehållet genom att helt enkelt lägga till linjen {{& gt; grundläggande-kort}} i din indexfil.

06. Börja bygga din layout

Vi täcker olika korttyper i lite, men först låt oss använda vårt återanvändbara grundläggande-kort för att börja skapa en större, responsiv layout för våra kort. För att göra det kommer vi att använda ett koncept från Foundation som heter Block Grid.

Stiftelsen innehåller några olika typer av galler, men de börjar alla från begreppet rader och kolumner. En rad skapar ett horisontellt block som kan innehålla flera vertikala kolumner. Dessa grundläggande byggstenar utgör kärnan i nästan alla layouter.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Med ett enkelt blocknät har vi redan en vacker, skalbar layout för så många kort som vi vill inkludera

Blockgrids är ett shorthand för att skapa lika stora kolumner och tillåta dig själv flexibilitet och frihet att lägga till en obestämd mängd innehåll och ta det snyggt i lika kolumner. Du lägger bara till en klass i raden och lägger sedan till så många kolumnkomponenter som du vill. Foundation lägger dem ut för dig snyggt och rent.

Eftersom vi förväntar oss att ha ett mycket stort och ändrat antal kort, är detta idealiskt för våra ändamål. Låt oss ställa upp det snabbt i ett fyrkolumnät och lägga till några dussin kort. För nu kommer vi bara att oroa sig för stora skärmar, så vi kommer helt enkelt att tillämpa .Large-up-4 klass till raden.

 & lt; sektionsklass = "kortbehållare" & gt;
& lt; div klass = "rad stor-up-4" & gt;
{{#repaat 24}}
& lt; div class = "kolumn" & gt;
{{& gt; grundläggande-kort}}
& lt; / div & gt;
{{/upprepa}}
& lt; / div & gt;
& lt; / avsnitt och GT;

07. Gör det mottagligt

Därefter, låt oss överväga vad vi vill hända på olika skärmstorlekar. Stiftelsen kommer med små, medelstora och stora brytpunkter inbyggda, så vi kan helt enkelt tillämpa en annan block-grid-klass för varje brytpunkt för att flytta saker runt.

Låt oss lägga ett kort per rad på mobila skärmar och tre per rad på tabletten, genom att lägga till klasserna .Small-up-1 och .medium-up-3 på raden. Om vi gör det och ta bort stopgapet maximal bredd egendom vi sätter _card.scss . Vi har redan en vackert lyhörd layout som ser bra ut på alla skärmstorlekar.

08. Prova några nya korttyper

Combine different styles of card to build your layout — Kombinera olika stilar av kort för att bygga din layout

Låt oss nu diversifiera vår uppsättning kort, en annan typ är ett rent kant-till-kantfoto. Kortsektioner och kortdelare innehåller vadderingar som standard, men att ha kant-till-kant-innehåll kan vi helt enkelt sätta bilden direkt inuti kortet. Låt oss lägga till detta som en foto-card.html delvis i src / partials .

 & 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. Introducera Flexbox

Det finns hundratals möjliga sätt att sätta ihop kort - för lite inspiration kan du kolla stiftelsen Kortpackningsförråd . Men låt oss gå vidare till hur vi hanterar layout när vi har olika storlekar. Om du sätter in fotokortet delvis i layouten som växlar med grundkortet som vi gjorde tidigare, hamnar vi med lite av en jagged upplevelse eftersom våra höjder är olika. Det kan vara bra, eller vi kanske vill justera vår layout för att kompensera.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Foundation Card Pack ger dig en bra uppsättning förbyggda Flexbox-kort för att jämföra ditt kortspel

För den här handledningen kompenserar vi med hjälp av vår favorit nya CSS-layoutteknik - Flexbox. Stiftelsen levereras med ett Flexbox-läge för sitt nät. För att aktivera det, behöver du helt enkelt öppna src / tillgångar / scss / app.scss , kommentera @include foundation-galler; och @include found-float-classes; och obekväm @include foundation-flex-galler; och @include foundation-flex-klasser; .

10. Gör dina kort samma höjd

Med FlexBox-klasserna aktiverade är det enkelt att få våra kort att vara samma höjd. Först kan vi göra våra kolumner flex föräldrar genom att lägga till .flex-container klass. Detta är en prototypande genväg för att lägga till Visa: Flex; egendom till dem. När vi gör det kommer alla kort att bli samma höjd, men eftersom flex barnelement krymper som standard, får några av våra kort typ av smala.

Vi kan fixa det här problemet genom att helt enkelt berätta för dessa element att växa. Detta görs genom att antingen riktas mot dem med CSS och ge dem Flex-Grow: 1; eller för enkelhet medan prototypning, bara genom att lägga till klassen .flex-barn-växa . När allt detta har gjorts fyller alla våra kort kolumnerna och kommer att vara snyggt samma höjd.

Den här artikeln var ursprungligen inneburad i nätmagasin Utgåva 293. Köp det här eller Prenumerera på nätet här .

Gillade detta? Pröva dessa...

10 skäl du bör använda atomdesign
Skapa och animera SVG-polygoner
CSS-tricks att revolutionera dina layouter

Bygg en kortbaserad UI med Foundation

01. Ställ in en utvecklingsmiljö

02. Starta ett nytt projekt

03. Skapa ett kort

04. Lägg till komponentstilar

05. Gör dina kort återanvändbara

06. Börja bygga din layout

07. Gör det mottagligt

08. Prova några nya korttyper

09. Introducera Flexbox

10. Gör dina kort samma höjd

Hur - Mest populära artiklar

17 tips för att dra manga ansikten

Hur man löser en knepig design kort

En guide till Googles molnsyn

Hur man gör en mandelbulb

Gör interaktiva 3D-typografi effekter

Förstå CSS-skärmens egendom

Måla ett furigt husdjursporträtt

Bygg ett anpassat Maya-gränssnitt

Kategorier