Rakenna korttipohjainen UI säätiön kanssa

Sep 12, 2025
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

Miten tehdään - Suosituimmat artikkelit

MITEN SMART Text Effects CSS: n kanssa

Miten tehdään Sep 12, 2025

[Kuva: Lähi-lapsi] Rollover Linkit ovat erinomainen tapa tarttua käyttäjän huomion, varsinkin jos he tekevät jot..

Ymmärrä luonnollinen kielen käsittely

Miten tehdään Sep 12, 2025

Verkkosivustoilla ja sovelluksilla voi olla erilaisia ​​liikkuvia osia, mukaan lukien etupään luova, palvelinpuolen käsitt..

Kuinka maalata värikäs animaatio taide Photoshopissa

Miten tehdään Sep 12, 2025

Tämän Photoshop-opetusohjelman aikana menen useita keskeisiä käsitteitä, joita käytän kuvittajana. Puhun karkeista käsitt..

Piirrä kuva alle viisi minuuttia

Miten tehdään Sep 12, 2025

Luonnos viiden minuutin pose on hauskaa, koska se tarjoaa vain tarpeeksi aikaa kaapata voimakas tunne aiheuttaa, mutta ei tarpeeksi aikaa ylityötä (tai kaataa) piirustusta. Yksinkertainen j..

Kaikki mitä sinun tarvitsee tietää uudesta solmu.js 8

Miten tehdään Sep 12, 2025

Node.jsin viimeisin suuri vapautuminen julkaisee monia merkittäviä parannuksia JavaScript-yhteisöön, mukaan lukien päivitett..

Paint wet-on-märkä öljyissä

Miten tehdään Sep 12, 2025

Maalaus "Alla prima" (eli maalaus märkä märkä, yhdessä istunnossa) on ihanteellinen tekniikka öljymaalien luonteen omaksua...

7 Killer tapoja vaikuttaa käyttäjän käyttäytymiseen

Miten tehdään Sep 12, 2025

Verkkosivustot käyttävät psykologisia tekniikoita vaikuttamaan käyttäjien käyttäytymiseen. Piirustus vuosikymmeninä akateemisen tutkimuksen, joka selittää, miten mielemme toimii ja ..

Miten hallita 3D-tuuletin taidetta

Miten tehdään Sep 12, 2025

Kun katselet ensimmäisen kauden TV-sarjassa Daredevil, tiesin, että minun piti tehdä oman 3D-taide Daredevil-lu..

Luokat