Bouw een CARD-gebaseerde UI met Foundation

Jan 18, 2026

Procedures

Op de kaart gebaseerd Website-lay-outs hebben het web overgenomen. Populair gemaakt door Pinterest, Twitter, Facebook en Google, kaarten zijn een go-to-to-Design-patroon geworden voor veel verschillende gebruiksgevallen.

Het is niet moeilijk om te zien waarom. Kaarten werken perfect binnen Responsive Web Design Als zelfstandige eenheden kunnen ze worden verplaatst, geschud en gemengd met verschillende inhoudstypen. Ze reageren ook eenvoudig op verschillende schermformaten, van afzonderlijke kolommen op mobiele apparaten naar meerkolom op grotere apparaten.

Stappen naar de perfecte website-indeling

Het Zurb-team heeft jarenlang op basis van de kaart-gebaseerde lay-outs gebruikt. Het Frontend Framework, Foundation, heeft altijd geprobeerd webontwerpers uit te rusten met de tools die ze nodig hebben om snel reagerende websites te ontwerpen en te bouwen door een breed scala aan modulaire en flexibele componenten op te nemen. Versie 6.3 Toegevoegd aan deze verzameling bouwstenen brengt een gloednieuwe off-canvas implementatie, responsieve accordeons / tabbladen en een krachtige nieuwe kaartcomponent.

In deze tutorial leren we hoe we een responsieve-kaart-gebaseerde UI kunnen creëren die profiteert van het Flexbox-gebaseerde raster van Fundation om een hele hoop mogelijkheden te openen.

01. Stel een ontwikkelingsomgeving in

De eerste stap is om een ontwikkelingsomgeving op te zetten. Voor deze tutorial gebruiken we een opknapgerichte ontwikkelingsomgeving, dus u moet Node.js. installeren De details om dit te doen, zijn afhankelijk van uw omgeving, dus controleer hier om erachter te komen wat te doen.

Zodra u een knooppunt hebt geïnstalleerd, installeert u de Foundation CLI met behulp van npm install-g fundering-cli , wat het gemakkelijk zal maken om een nieuw funderingsproject op te zetten.

02. Start een nieuw project

Laten we een nieuw project maken op basis van de Sjabloon Zurb. Voer het commando uit Foundation New Net-Magazine-Tutorial , selecteer 'een website (stichting voor sites)', 'Net-magazine-tutorial' en vervolgens zurb sjabloon. Dit zal een projectsjabloon opzetten op basis van Foundation, compleet met Build System and Development Server.

De sjabloon wordt geleverd met een voorbeeldpagina in SRC / pagina's / index.html Voor eenvoud verwijderen we dat monster en vervangen ze het met een leeg & lt; header & gt; & LT; / Header & GT; Om te beginnen met krassen opgebouwde UI op basis van onze kaart. Rennen NPM Start Vanaf de opdrachtregel om de Development Server uit te voeren en moet u een blote HTML-pagina voor kaarten zien.

03. Maak een kaart

Nu is het tijd om onze eerste kaart te maken. Laten we het nu gewoon recht in een sectie met de klas plaatsen . kaarten-container Bij het maken van een kaart met Foundation zijn er drie kernklassen om op de hoogte te zijn van: .kaart .card-sectie en .card-delider Voor meer geavanceerde gebruikers, komt elk van deze overeen met een SCSS-mixin ( kaartcontainer card-sectie en kaartverdeler

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Een eenvoudige kaart met de Foundation Yeti erop, kop- en voettekst gemaakt met behulp van de kaart-verdelerklasse

Maar voor deze tutorial zullen we de standaardklassen gebruiken voor eenvoud. De .kaart klasse is de container; Elke kaart woont binnen een .kaart Dit definieert dingen zoals grenzen, schaduwen en standaardkleuring.

De .card-sectie Klasse definieert een uitbreidbaar contentblok, waar u inhoud kunt plaatsen, terwijl de .card-delider Klasse definieert een niet-expanderend blok, zoals een voettekst, kop of verdeler. Laten we al deze klassen gebruiken om onze eerste, basiskaart te maken.

 & LT; Header & GT;
  & lt; div class = "rij kolommen" & GT;
    & LT; H3 & GT; Kaarten zijn de beste en lt; / H3 & GT;
  & LT; / DIV & GT;
& LT; / Header & GT;
& lt; sectie klasse = "kaarten-container" & GT;
  & lt; div class = "kaart" & GT;
    & lt; div class = "kaartverdeler" & GT;
      & LT; H4 & GT; YETI-header & LT; / H4 & GT;
    & LT; / DIV & GT;
    & LT; DIV-klasse = "Kaartgedeelte" & GT;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & GT; & LT; / IMG & GT;
    & LT; / DIV & GT;
    & lt; div class = "kaartverdeler" & GT;
      & LT; P & GT; YETI FOOTER & LT; / P & GT;
    & LT; / DIV & GT;
  & LT; / DIV & GT;
& lt; / sectie & gt;

04. Voeg componentstijlen toe

Als we dit doen, zal onze kaart enorm zijn, uitbreiden om het volledige scherm te vullen. We gaan binnenkort omgaan met algemene sizing, maar laten we dit nu gebruiken als een excuus om te leren hoe je componentstijlen in de Zurb-sjabloon kunt toevoegen.

Voeg een bestand toe _Card.SCSS naar SRC / Activa / SCSS / COMPONENTEN / Specificeren van een Max-breedte: 300px voor .kaart en neem het bestand op in onze hoofd CSS door toe te voegen @Import componenten / kaart; naar SRC / Assets / SCSS / App.SCSS

05. Maak uw kaarten herbruikbaar

Om een herhaalbare lay-out met meerdere kaarten te maken, zullen we willen dat onze kaarten herbruikbare componenten zijn die we steeds opnieuw kunnen insluiten. De ZUB-sjabloon die we gebruiken voor deze tutorial maakt gebruik van een sjablonerende taal die stuur wordt genoemd, die de mogelijkheid omvat om gedeeltelijke of herbruikbare code van code te maken.

Om onze kaartimplementatie in een gedeeltelijke te verplaatsen, knip dan eenvoudig en plakt en plak de .kaart Component die we in een bestand hebben ingebouwd SRC / Partials , zeggen SRC / Partials / Basic-Card.html U kunt dan die inhoud opnemen door eenvoudig de lijn toe te voegen {{& GT; Basic-Card}} in uw indexbestand.

06. Begin met het bouwen van je lay-out

We behandelen verschillende kaarttypen in een klein beetje, maar laten we eerst onze herbruikbare basiskaart gebruiken om een grotere, responsieve lay-out voor onze kaarten te maken. Om dit te doen, zullen we een concept van Foundation gebruiken dat het blokraster wordt genoemd.

Foundation bevat een paar verschillende soorten rasters, maar ze beginnen allemaal vanuit het concept van rijen en kolommen. Een rij creëert een horizontaal blok dat meerdere verticale kolommen kan bevatten. Deze elementaire bouwstenen vormen de kern van bijna alle lay-outs.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Met een eenvoudig blokrooster, hebben we al een mooie, schaalbare lay-out voor zoveel kaarten zoals we willen opnemen

Block-roosters zijn een stende manier om kolommen op basis van even formaat te maken en om de flexibiliteit en vrijheid in staat te stellen een onbepaalde hoeveelheid inhoud toe te voegen en laat het in gelijke kolommen mooi instellen. U voegt eenvoudig een klasse toe aan de rij en voegt vervolgens zoveel kolomcomponenten toe zoals u wilt. Foundation legt ze ze netjes en netjes uit.

Omdat we verwachten een zeer groot en veranderend aantal kaarten te hebben, is dit ideaal voor onze doeleinden. Laten we dit snel in een raster van vier kolommen instellen en een paar dozijn kaarten toevoegen. Voor nu zorgen we alleen maar zorgen over grote schermen, dus zullen we gewoon de .large-up-4 klasse tot de rij.

 & lt; sectie klasse = "kaarten-container" & GT;
& lt; div class = "rij groot-up-4" & GT;
{{#repeat 24}}
& lt; div class = "kolom" & GT;
{{& GT; Basic-Card}}
& LT; / DIV & GT;
{{/herhaling}}
& LT; / DIV & GT;
& lt; / sectie & gt;

07. Maak het reagerend

Laten we verder overwegen wat we willen gebeuren op verschillende schermmaten. Stichting wordt geleverd met kleine, gemiddelde en grote breakpoints ingebouwd, dus we kunnen eenvoudig een andere blok-rastercategorie toepassen voor elk breekpunt om dingen in de buurt te verschuiven.

Laten we een kaart per rij op mobiele schermen plaatsen, en drie per rij op tablet, door de klassen toe te voegen .small-up-1 en .medium-up-3 op de rij. Als we dit doen, en de Stoppiap verwijderen Maximale wijdte eigendom die we hebben geplaatst _Card.SCSS We hebben al een prachtig responsieve lay-out die er goed uitziet op alle schermmaten.

08. Probeer een aantal nieuwe kaarttypen

Combine different styles of card to build your layout — Combineer verschillende kaartstijlen om je lay-out te bouwen

Laten we nu onze set kaarten diversifiëren, een ander type is een pure rand-naar-randfoto. Kaartsecties en kaartverdelers bevatten standaard vulling, maar om edge-to-edge-inhoud te hebben, kunnen we eenvoudig de afbeelding direct in de kaart plaatsen. Laten we dit toevoegen als een fotokaart.html gedeeltelijk in SRC / Partials

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

09. Introduceer FLEXBOX

Er zijn honderden mogelijke manieren waarop we kaarten kunnen samenstellen - voor wat inspiratie, kunt u de fundering bekijken Cardpack-repository Maar laten we verder gaan met hoe we lay-out beheren wanneer we verschillende kaarten hebben. Als u de Photo-Card gedeeltelijk in de lay-out invoert, afwisselend met de Basic-Card zoals eerder deden, eindigen we met een beetje een gekartelde ervaring omdat onze hoogten anders zijn. Dit kan goed zijn, of we willen misschien onze lay-out aanpassen om te compenseren.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — The Foundation Card Pack geeft je een geweldige set vooraf gebouwde Flexbox-kaarten om je kaartspel op te leveren

Voor deze tutorial compenseren we ons met behulp van onze favoriete nieuwe CSS-lay-outtechniek - FlexBox. Stichting wordt geleverd met een FLEXBOX-modus voor zijn raster. Om het in te schakelen, moet je gewoon openen SRC / Assets / SCSS / App.SCSS , commentaar uit @include Foundation-Grid; en @include Foundation-float-klassen; en onzeker @include Foundation-Flex-Grid; en @include Foundation-Flex-klassen;

10. Maak je kaarten dezelfde hoogte

Met de FlexBox-klassen ingeschakeld, is het eenvoudig om onze kaarten op dezelfde hoogte te krijgen. Ten eerste kunnen we onze kolommen buigen de ouders door de .flex-container klasse. Dit is een snelkoppeling van prototyping voor het toevoegen van de Display: Flex; eigendom aan hen. Zodra we dit doen, worden alle kaarten dezelfde hoogte, maar aangezien Flex-kinderelementen standaard krimpen, krijgen sommige van onze kaarten een beetje smal.

We kunnen dit probleem oplossen door die elementen eenvoudigweg te vertellen. Dit wordt gedaan door ze te gerichteren met CSS en het geven van ze Flex-groei: 1; of voor eenvoud terwijl prototyping, gewoon door de klas toe te voegen .Flex-kind-groei Zodra al dit al onze kaarten is gedaan, vult u de kolommen en zal het mooi dezelfde hoogte zijn.

Dit artikel was oorspronkelijk in netto tijdschrift uitgave 293. Koop het hier of abonneren op net hier

Vond dit leuk? Probeer deze...

10 redenen waarom je atomisch ontwerp zou moeten gebruiken
Maak en animeer SVG-polygonen
CSS-trucs om uw lay-outs te revolutioneren

Bouw een CARD-gebaseerde UI met Foundation

01. Stel een ontwikkelingsomgeving in

02. Start een nieuw project

03. Maak een kaart

04. Voeg componentstijlen toe

05. Maak uw kaarten herbruikbaar

06. Begin met het bouwen van je lay-out

07. Maak het reagerend

08. Probeer een aantal nieuwe kaarttypen

09. Introduceer FLEXBOX

10. Maak je kaarten dezelfde hoogte

Procedures - Meest populaire artikelen

Hoe een paard te tekenen

Hoe uw ontwerpportfolio te verfijnen

Converteer Flash Games naar HTML5

Hoe dieren ogen illustreren

Hoe maak je je eigen canvasborden

Leer om ontwerp- en inhoudsprints uit te voeren

Hoe een realistische sportwagen te maken

Combineer traditionele en digitale vaardigheden om een stripdeksel te maken

Categorieën