Rakenna korttipohjainen UI säätiön kanssa

Jan 21, 2026

Miten tehdään

Korttipohjainen Verkkosivuston asettelu ovat ottaneet verkon. Pinterest, Twitter, Facebook ja Google, kortit ovat tulleet go-design malliksi monille erilaisille tapauksille.

Ei ole vaikea nähdä miksi. Kortit toimivat täydellisesti Vastaava web-suunnittelu . Itse suljettuja yksiköitä voidaan siirtää, sekoittaa ja sekoittaa eri sisältötyyppeihin. He myös reagoivat helposti eri näytönkokoihin, yksittäisistä sarakkeista mobiililaitteissa monipoluissa suuremmilla laitteilla.

Vaiheet täydelliseen verkkosivustoon

Zurb-tiimi on käyttänyt korttipohjaisia asetteluja suunnittelussa vuosien ajan. Sen etujoukko, säätiö, on aina pyrkinyt varustamaan web-suunnittelijoita työkaluilla, joita he tarvitsevat nopeasti suunnittelemaan ja rakentamaan reagoivia verkkosivustoja sisällyttämällä laaja valikoima modulaarisia ja joustavia komponentteja. Versio 6.3 Lisätty tähän kokoelmaan rakennuspalikoita tuo upouusi Off-Canvas-toteutus, reagoivat harmoniot / välilehdet ja tehokas uusi korttikomponentti.

Tässä opetusohjelmassa otetaan oppia, miten luodaan reagoiva korttipohjainen käyttöliittymä, joka hyödyntää säätiön Flexbox-pohjaista ruudukkoa avata koko mahdollisuuksia.

01. perustaa kehitysympäristö

Ensimmäinen askel on luoda kehitysympäristö. Tätä opetusohjelmaa käytämme solmun kehittämisympäristöä, joten sinun on asennettava Node.js. Yksityiskohdat tämän mukaan riippuvat ympäristöstäsi, joten tarkista tässä selvittää, mitä tehdä.

Kun olet asentanut solmun, asenna säätiö CLI käyttämällä NPM Install -G Foundation-CLI , mikä helpottaa uuden säätiöhankkeen perustamista.

02. Aloita uusi projekti

Luo uusi projekti, joka perustuu Zurbin malliin. Suorita komento Säätiö Uusi verkko-aikakauslehti-opetusohjelma , valitse "Verkkosivusto (sivusto sivustoille)", "Net-Magazine-Tutorial" ja sitten Zurb-malli. Tämä perustaa säätiön pohjalta perustuva projektimalli, joka on täydellinen rakentaa järjestelmä- ja kehityspalvelin.

Mallin mukana tulee näytteen sivu SRC / Pages / Index.html . Yksinkertaisuuden vuoksi poistamme näyte ja korvaa sen tyhjäksi & lt; otsikko & gt; & lt; / otsikko & gt; Aloita tyhjästä rakentamisesta korttipohjamme UI. Juosta npm alkaa Komentoriviltä kehittää kehityspalvelinta, ja sinun pitäisi nähdä paljain HTML-sivu, joka on valmis kortteihin.

03. Luo kortti

Nyt on aika luoda ensimmäinen kortti. Let's vain laittaa se suoraan osaan luokan kanssa .cards-kontti . Kun luot kortin säätiön avulla, on olemassa kolme ydinluokkaa, jotka ovat tietoisia: .kortti , .Card-osa ja .Card-jakaja . Kehittyneempiä käyttäjiä varten jokainen tämä vastaa SCSS-sekoitusta ( kortin kontti , kortti-osa ja kortinjakaja ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Yksinkertainen kortti, jossa säätiö Yeti on, otsikko ja alatunniste, joka on luotu kortin jakajan luokan avulla

Mutta tämä opetusohjelma käytämme yksinkertaisuuden oletusluokkia. The .kortti Luokka on säiliö; jokainen kortti elää a .kortti . Tämä määrittelee sellaiset asiat, kuten rajat, varjot ja oletusvärit.

The .Card-osa Luokka määrittää laajennettavan sisältölohkon, jossa saatat laittaa sisältöä, kun taas .Card-jakaja Luokka määrittää ei-laajeneva lohko, kuten alatunniste, otsikko tai jakaja. Käytämme kaikkia näitä luokkia luomaan ensimmäinen, peruskortti.

 & lt; otsikko & gt;
  & lt; div luokka = "rivi sarakkeet" & gt;
    & lt; h3 & gt; kortit ovat parhaita & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / otsikko & gt;
& lt; osioluokka = "CARDS-CONTER" & GT;
  & lt; div luokka = "kortti" & gt;
    & lt; div luokka = "Card-Divider" & GT;
      & lt; h4 & gt; Yeti otsikko & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div luokka = "kortti-osa" & gt;
      & lt; img src = "https://foundation.zurb.com/siitit/docs/assets/img/eteti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div luokka = "Card-Divider" & GT;
      & lt; p & gt; Yeti alatunniste & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / osa & gt;

04. Lisää komponenttityylit

Jos teen vain tämän, korttemme on valtava, laajentamalla koko näyttö. Aiomme käsitellä yleistä mitoitusta pian, mutta nyt käytämme tätä tekosyynä oppimaan komponenttityyppien lisäämisen Zurbin malliin.

Lisää tiedosto _card.Scss jllek SRC / Varat / SCSS / Komponentit / määrittelee a Max-leveys: 300px varten .kortti ja sisällyttää tiedoston tärkeimmistä CSS: stä lisäämällä @IMPort-komponentit / kortti; jllek SRC / VAARAT / SCSS / APP.SSS .

05. Tee korttisi uudelleenkäytettävä

Jotta voit luoda toistettavan asettelun useilla kortteilla, haluamme korttemme uudelleenkäytettäviä komponentteja, joita voimme kytkeä uudestaan ja uudestaan. Zurbin malli, jota käytämme tähän opetusohjelmaan, käyttää ohjaustangonia, joka sisältää kyvyn luoda osittaisia tai uudelleenkäytettäviä koodia.

Voit siirtää kortin toteutusta osittaiseksi, leikata ja liittää .kortti Komponentti, johon olemme rakennettu tiedostoon SRC / Partials , sanoa SRC / Partials / Basic-Card.html . Sitten voit sisällyttää kyseisen sisällön yksinkertaisesti lisäämällä linja {{& gt; peruskortti}} hakemistotiedostossasi.

06. Aloita asettelun rakentaminen

Pidämme eri korttityyppejä hieman, mutta ensin käytämme uudelleenkäytettäviä peruskorttia, jotta voit luoda suuremman, reagoivan asettelun korttimme. Voit tehdä niin, aiomme käyttää konseptia säätiöstä, jota kutsutaan lohkoverkoksi.

Säätiö sisältää muutamia erilaisia verkkoja, mutta ne kaikki alkavat rivien ja sarakkeiden käsitteestä. Rivi luo vaakasuoran lohkon, joka voi sisältää useita pystysuora sarakkeita. Nämä perusrakennuslohkot muodostavat lähes kaikki ulkoasut.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Yksinkertaisella lohkoverkolla, meillä on jo kaunis, skaalautuva asettelu niin monta korttia kuin haluamme lisätä

Block-verkot ovat lyhyenä tapa luoda yhtä suurikokoisia sarakkeita ja sallia itsellesi joustavuus ja vapaus lisätä määräämättömän sisällön määrää ja antaa se mukavasti samoilla sarakkeilla. Yksinkertaisesti lisää luokka riville ja lisää sitten monta sarakeosaa kuin haluat. Säätiö asettaa ne sinulle siististi ja puhtaasti.

Koska odotamme olevan erittäin suuri ja muuttuva määrä kortteja, tämä on ihanteellinen tarkoituksemme. Aseta tämä nopeasti neljän sarakkeen verkkoon ja lisää muutama tusinaa kortti. Tähän mennessä olemme vain huolissamme suurista näytöistä, joten käytämme yksinkertaisesti .large-up-4 luokka riviin.

 & lt; osioluokka = "Cards-Container" & GT;
& lt; div luokka = "rivi Large-up-4" & gt;
{{#repeat 24}}
& lt; div luokka = "sarake" & gt;
{{& gt; peruskortti}}
& lt; / div & gt;
{{/toistaa}}
& lt; / div & gt;
& lt; / osa & gt;

07. Tee se reagoiva

Seuraavaksi katsotaanpa, mitä haluamme tapahtua eri näytön kokoisina. Säätiö sisältää pieniä, keskisuuria ja suuria ja suuria katkenneita, joten voimme yksinkertaisesti soveltaa eri lohkoverkkoa jokaiselle katkaisupisteelle siirtämään asioita.

Let's laittaa yksi kortti riviä kohti mobiililaitteita ja kolme riviä tabletissa lisäämällä luokat .Small-up-1 ja .Medium-up-3 rivillä. Jos teemme tämän ja poista stopgap max-leveys omaisuus laittaa _card.Scss . Meillä on jo kauniisti reagoiva ulkoasu, joka näyttää hyvältä kaikissa näytön koossa.

08. Kokeile uusia korttityyppejä

Combine different styles of card to build your layout — Yhdistä eri tyylejä kortin rakentamiseen

Katsotaan nyt monipuolista korttijamme, toinen tyyppi on puhdas reuna-reunakuva. Korttiosastot ja kortin jakajat sisältävät padding oletusarvoisesti, mutta reunan reunan sisältö voi yksinkertaisesti laittaa kuvan suoraan kortin sisäpuolelle. Lisää tämä a kuva-card.html osittainen SRC / Partials .

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

09. Esittele Flexbox

On olemassa satoja mahdollisia tapoja, joilla voimme koota kortit - jonkin verran inspiraatiota varten voit tarkistaa säätiön CardPack-arkisto . Mutta siirrymme siihen, miten hallitsemme ulkoasua, kun meillä on eri kokoisia kortteja. Jos asetat valokuvakortin osittaisen asettelun vuorotteluun peruskortin kanssa, kun teimme ennen, päädymme hieman rosoidun kokemuksen, koska korkeudet ovat erilaiset. Tämä voi olla hieno, tai voimme haluta säätää ulkoasua korvaamaan.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Säätiön korttipaketti antaa sinulle suuren joukon ennalta rakennettuja Flexbox-kortteja korttipelin tasoittamiseksi

Tätä opetusohjelmaa kompensoimme käyttämällä suosikki uusia CSS Layout Technique - Flexbox. Säätiössä on Flexbox-tila sen verkkoon. Voit ottaa sen käyttöön, sinun tarvitsee vain avata SRC / VAARAT / SCSS / APP.SSS , kommentoi @include Foundation-Grid; ja @include säätiö-float-luokat; ja lopullinen @include Foundation-Flex-Grid; ja @include säätiö-flex-luokat; .

10. Tee korttisi sama korkeus

Kun Flexbox-luokat ovat käytössä, on helppo saada korttimme olevan sama korkeus. Ensinnäkin voimme tehdä sarakkeistamme joustavat vanhemmat lisäämällä .Flex-kontti Luokka. Tämä on prototyyppinen pikakuvake lisäämällä Näyttö: Flex; omaisuutta heille. Kun teemme tämän, kaikki kortit tulevat saman korkeuteen, mutta koska Flex-lapsen elementit kutistuvat oletusarvoisesti, jotkut korttimme ovat kapeita.

Voimme korjata tämän ongelman yksinkertaisesti kertomalla näistä elementeistä kasvaa. Tämä tehdään joko kohdistamalla ne CSS: llä ja antamalla heille Flex-Grow: 1; tai yksinkertaisuus prototyyping, vain lisäämällä luokka .flex-lapsi kasvaa . Kun kaikki tämä on tehty kaikki kortit täyttävät sarakkeet ja ovat hienosti samaa korkeutta.

Tämä artikkeli oli alun perin esillä Net-aikakauslehti Julkaisu 293. Osta se täällä tai Tilaa verkko tähän .

Piti tästä? Kokeile näitä ...

10 syytä sinun pitäisi käyttää atomien suunnittelua
Luo ja animoida SVG-polygonit
CSS temppuja mullistamaan ulkoasut

Rakenna korttipohjainen UI säätiön kanssa

01. perustaa kehitysympäristö

02. Aloita uusi projekti

03. Luo kortti

04. Lisää komponenttityylit

05. Tee korttisi uudelleenkäytettävä

06. Aloita asettelun rakentaminen

07. Tee se reagoiva

08. Kokeile uusia korttityyppejä

09. Esittele Flexbox

10. Tee korttisi sama korkeus

Miten tehdään - Suosituimmat artikkelit

Aloita GRAV-CMS: llä

Kuinka tehdä käsivarsi

Colourise Greyscale Work Photoshopissa

Päivitä tekstuurit aineellisessa suunnittelijalla

Kuinka piirtää affiniteetti Kuva iPadille

Luo meteorisuihku 3DS max

Luo tyyli kehyksiä Photoshopissa

Tee Hi-Fidelity Prototyyppi Atomicissa

Luokat