Costruisci un UI basato su carta con Fondazione

Sep 17, 2025

Come si fa

Basato sulla carta Layout del sito web hanno preso il posto web. Realizzato popolare da Pinterest, Twitter, Facebook e Google, le carte sono diventate un modello di progettazione go-to per molti casi di utilizzo diversi.

Non è difficile capire perché. Le carte funzionano perfettamente all'interno web design reattivo . Come unità autonome, possono essere spostate, mescolate e mescolate con diversi tipi di contenuto. Rispondono inoltre facilmente su diverse dimensioni dello schermo, da singole colonne su dispositivi mobili a multi-colonna su dispositivi più grandi.

Passi per il layout perfetto del sito web

Il team di Zurb ha utilizzato i layout basati su carta nel suo lavoro di progettazione per anni. Il suo framework frontend, fondazione, ha sempre cercato di dotare i web designer con gli strumenti di cui hanno bisogno per progettare rapidamente e costruire siti web reattivi includendo un'ampia gamma di componenti modulari e flessibili. La versione 6.3 è stata aggiunta a questa raccolta di blocchi di costruzione porta una nuovissima implementazione off-canvas, fisarmoniche / schede reattive e una potente nuova componente di carte.

In questo tutorial apprenderemo come creare un'interfaccia utente basata su carta rispondente che sfrutta la griglia basata sulla Fondazione per aprire un'intera slitta di possibilità.

01. Impostare un ambiente di sviluppo

Il primo passo è creare un ambiente di sviluppo. Per questo tutorial, utilizzeremo un ambiente di sviluppo basato su nodo, quindi è necessario installare Node.js. I dettagli per farlo dipendono dal tuo ambiente, quindi controllare Qui per scoprire cosa fare.

Una volta installato il nodo, installare la Fondazione CLI usando NPM Install -g Foundation-cli , che renderà facile configurare un nuovo progetto di fondazione.

02. Avvia un nuovo progetto

Creiamo un nuovo progetto in base al modello Zurb. Esegui il comando Foundation New Net-Magazine-Tutorial , Seleziona 'Un sito Web (Fondazione per i siti)', 'Net-Magazine-Tutorial' e quindi modello Zurb. Ciò istituirà un modello di progetto basato sulla Fondazione, completa con il sistema di costruzione e il server di sviluppo.

Il modello viene fornito con una pagina di esempio in SRC / pagine / index.html . Per semplicità, rimuoveremo quel campione e sostituirlo con un vuoto & lt; header & gt; & lt; / header & gt; Per iniziare da zero costruendo il nostro interfaccia utente basata sulla carta. Correre Inizio NPM Dalla riga di comando per eseguire il server di sviluppo e dovresti vedere una pagina HTML nudo pronta per le carte.

03. Creare una carta

Ora è il momento di creare la nostra prima carta. Per ora, mettiamola dritto all'interno di una sezione con la classe .Card-contenitore . Durante la creazione di una carta utilizzando Fondazione, ci sono tre classi principali per essere a conoscenza di: .carta , .card-section. e .card-Divisore. . Per utenti più avanzati, ognuno di questi corrisponde a un mixin di SCSS ( container card , sezione della carta e Divisore della carta ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Una semplice carta con la fondazione Yeti su di esso, intestazione e piè di pagina creati usando la classe di divisorio della carta

Ma per questo tutorial utilizzeremo le classi predefinite per la semplicità. Il .carta La classe è il contenitore; Ogni carta vivrà entro un .carta . Questo definisce cose come bordi, ombre e colorazione predefinita.

Il .card-section. La classe definisce un blocco di contenuti espandibile, dove potresti mettere il contenuto, mentre il .card-Divisore. La classe definisce un blocco non espanso, come un piè di pagina, intestazione o divisore. Usiamo tutte queste classi per creare la nostra prima carta di base.

 & lt; header & gt;
  & lt; div class = "righe colonne" e gt;
    & lt; h3 & gt; le carte sono le migliori & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; sezione class = "card-contenitore" e GT;
  & lt; div class = "card" & gt;
    & lt; div class = "card-diffider" & gt;
      & lt; h4 & gt; yeyti header & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div class = "card-section" & 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-diffider" & gt;
      & lt; p & gt; yeti footer & lt; / P & GT;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / Sezione & GT;

04. Aggiungi stili componenti

Se lo facciamo, la nostra carta sarà enorme, espandendo per riempire l'intero schermo. Affronteremo a breve con il dimensionamento complessivo, ma per ora usiamo questo come una scusa per imparare come aggiungere stili di componenti nel modello Zurb.

Aggiungi un file _Card.SCSS. per SRC / Attività / SCSS / Componenti / Specifica di A. larghezza massima: 300 px per .carta e includi il file nel nostro CSS principale aggiungendo Componenti / carta @import; per SRC / Assets / SCSS / App.SCSSS .

05. Rendi le tue carte riutilizzabili

Per creare un layout ripetibile con più carte, voleremo che le nostre carte siano riutilizzabili componenti che possiamo collegarci più e più volte. Il modello Zurb che stiamo usando per questo tutorial utilizza un linguaggio tetoriale chiamato manubrio, che include la capacità di creare parziali o blocchi di codice riutilizzabili.

Per spostare la nostra implementazione della carta in un parziale, semplicemente tagliato e incollare il .carta Componente che abbiamo costruito in un file in SRC / Partials. , ad esempio SRC / Partials / Basic-card.html . Puoi quindi includere quel contenuto semplicemente aggiungendo la linea {{& gt; BASIC-CARD}} nel tuo file indice.

06. Inizia a costruire il tuo layout

Copriremo diversi tipi di carte in un po ', ma per prima cosa usiamo la nostra carta di base riutilizzabile per iniziare a creare un layout più grande e reattivo per le nostre carte. Per fare ciò, useremo un concetto dalla fondazione chiamata griglia del blocco.

Fondazione contiene alcuni tipi diversi di griglie, ma iniziano tutti dal concetto di righe e colonne. Una riga crea un blocco orizzontale che può contenere più colonne verticali. Questi blocchi di base costituiscono il nucleo di quasi tutti i layout.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Con una semplice griglia a blocchi, abbiamo già un layout bello e scalabile per tante carte che vogliamo includere

Le griglie a blocchi sono un modo stenografico per creare colonne ugualmente di dimensioni e per consentire a te stesso la flessibilità e la libertà di aggiungere una quantità indefinita di contenuti e farlo stendere bene in uguali colonne. Basta aggiungere una classe alla riga e aggiungi come molti componenti di colonna come preferisci. Fondazione li distenderà per te ordinatamente e pulito.

Dal momento che ci aspettiamo di avere un numero molto grande e mutevole di carte, questo è l'ideale per i nostri scopi. Impostiamo questo rapidamente in una griglia a quattro colonne e aggiungi alcune dozzine di carte. Per ora ci preoccuperemo solo di schermi di grandi dimensioni, quindi applicheremo semplicemente il .large-up-4 classe alla riga.

 & lt; sezione class = "card-contenitore" e GT;
& lt; div class = "riga grande-up-4" e GT;
{{#repeat 24}}
& lt; div class = "colonna" e gt;
{{& gt; BASIC-CARD}}
& lt; / div & gt;
{{/ripetere}}
& lt; / div & gt;
& lt; / Sezione & GT;

07. Realizza il reattivo

Quindi, consideriamo ciò che vogliamo accadere su diverse dimensioni dello schermo. Fondazione è dotata di punti di rottura di piccole, medie e grandi grandi integrati, quindi possiamo semplicemente applicare una diversa classe di griglia di blocchi per ogni breakpoint per spostare le cose in giro.

Mettiamo una carta per fila su schermi mobili e tre per fila sul tablet, aggiungendo le classi .small-up-1 e .medium-up-3 sulla riga. Se lo facciamo e rimuovi il STOPGAP larghezza massima proprietà che abbiamo messo _Card.SCSS. . Abbiamo già un layout meravigliosamente reattivo che sembra buono su tutte le dimensioni dello schermo.

08. Prova alcuni nuovi tipi di carte

Combine different styles of card to build your layout — Combina diversi stili di carta per costruire il tuo layout

Ora diversificiamo il nostro set di carte, un altro tipo è una pura foto di bordo a bordo. Le sezioni della carta e i divisori delle carte contengono imbottitura per impostazione predefinita, ma per avere contenuti edge-to-edge possiamo semplicemente mettere l'immagine direttamente all'interno della carta. Aggiungiamo questo come a foto-card.html. parziale in. SRC / Partials. .

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

09. Introdurre flexbox.

Ci sono centinaia di possibili modi in cui possiamo mettere insieme le carte - per qualche ispirazione, puoi controllare la fondazione Repository del cardpack . Ma passiamo a come gestiremo il layout quando abbiamo carte di dimensioni diverse. Se inserisci la foto-scheda parziale nel layout alternato con la scheda base come abbiamo fatto prima, finiamo con un po 'di un'esperienza frastagliata perché le nostre altezze sono diverse. Questo potrebbe andare bene, o potremmo voler aggiustare il nostro layout per compensare.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — The Foundation Card Pack ti offre un'ottima serie di carte Flexbox pre-costruite per livellare il gioco della tua carta

Per questo tutorial, risarzeremo utilizzando la nostra nuova tecnica di layout di CSS preferita - FlexBox. Fondazione viene fornita con una modalità Flexbox per la sua griglia. Per abilitarlo, devi semplicemente aprire SRC / Assets / SCSS / App.SCSSS , commentare @include la griglia della fondazione; e @include le classi galleggianti; e decommento @include Foundation-Flex-Grid; e @include Foundation-Flex-Classi; .

10. Rendi le tue carte nella stessa altezza

Con le classi Flexbox abilitate, è semplice ottenere le nostre carte essere la stessa altezza. Innanzitutto, possiamo rendere le nostre colonne Flex Genitori aggiungendo il .FLEX-CONTAINER. classe. Questa è una scorciatoia di prototipazione per aggiungere il Display: flex; proprietà a loro. Una volta che lo facciamo, tutte le carte diventano la stessa altezza, ma poiché Flex Child Elements si restringono per impostazione predefinita, alcune delle nostre carte diventano tipo strette.

Possiamo risolvere questo problema semplicemente dicendo a quegli elementi di crescere. Questo è fatto trascrivili con CSS e dando loro FLEX-GROW: 1; o per semplicità durante la prototipazione, solo aggiungendo la classe .flex-child-crescere . Una volta che tutto questo è stato fatto, tutte le nostre carte riempiono le colonne e saranno piacevolmente la stessa altezza.

Questo articolo è stato originariamente presente in Magazine netta Edizione 293. Compralo qui o Iscriviti alla rete qui .

Questo mi piaceva? Prova questi...

10 motivi per cui dovresti usare il design atomico
Crea e animare i poligoni SVG
Trucchi CSS per rivoluzionare i tuoi layout

Costruisci un UI basato su carta con Fondazione

01. Impostare un ambiente di sviluppo

02. Avvia un nuovo progetto

03. Creare una carta

04. Aggiungi stili componenti

05. Rendi le tue carte riutilizzabili

06. Inizia a costruire il tuo layout

07. Realizza il reattivo

08. Prova alcuni nuovi tipi di carte

09. Introdurre flexbox.

10. Rendi le tue carte nella stessa altezza

Come si fa - Articoli più popolari

Come allungare una tela e impostare per vernici ad olio

Come disegnare un leone

21 modi per migliorare la produttività con NPM

10 cose che non sapevi che potresti fare con Photoshop

Come cambiare il font nel tuo Twitter Bio

Inizia con HTML Canvas

Fai un poster tipografico usando Adobe InDesign

Affila le tue abilità di pittura di still life

Categorie