Vakfı ile kart tabanlı bir UI oluşturun

Jan 18, 2026
Nasıl Yapılır

Kart tabanlı Web sitesi düzeni Web üzerinden çekildi. Pinterest, Twitter, Facebook ve Google tarafından popüler yapılır, kartlar birçok farklı kullanım vakası için bir tasarım deseni haline geldi.

Nedenini görmek zor değil. Kartlar için mükemmel çalışıyor Duyarlı Web Tasarımı . Bağımsız birimler olarak, farklı içerik türleri ile taşınabilir, karıştırılabilir ve karıştırılabilirler. Ayrıca, tek sütunlardan mobil cihazlardaki tek sütunlardan daha büyük cihazlarda çok sütuna kolayca yanıt veriyorlar.

  • Mükemmel web sitesi düzeni için adımlar

Zurb ekibi, tasarım çalışmalarında yıllardır kart bazlı düzenler kullanmıştır. Frontend Framework, Vakıf, her zaman web tasarımcılarını, geniş bir modüler ve esnek bileşenler de dahil olmak üzere, hızlı bir şekilde tasarlamak ve duyarlı web siteleri oluşturmak için ihtiyaç duydukları araçlarla donatmaya çalıştı. Bu yapı taşlarının bu koleksiyonuna eklenen sürüm 6.3, yepyeni bir tuval uygulaması, duyarlı akorse / sekmeler ve güçlü bir yeni kart bileşeni getirir.

Bu eğitimde, vakfın fleksine dayalı bir UI'nin nasıl oluşturacağını öğreneceğiz.

01. Geliştirme ortamı kurun

İlk adım, bir geliştirme ortamı kurmaktır. Bu eğitim için, düğüm tabanlı bir geliştirme ortamı kullanacağız, bu yüzden NODE.JS.'yi yüklemeniz gerekir. Bunu yapmak için detaylar ortamınıza bağlıdır, bu yüzden kontrol edin İşte ne yapacağını öğrenmek için.

Düğüm yüklüyorsanız, Vakıf CLI'sini kullanarak yükleyin. NPM Install -g Foundation-Cli , bu yeni bir vakıf projesi kurmayı kolaylaştıracak.

02. Yeni bir proje başlat

Zurbe şablonuna göre yeni bir proje oluşturalım. Komutu çalıştır Temel Yeni Net Dergisi-Eğitimi , 'Bir web sitesi (siteler için temel)', 'net-dergi öğretici' ve ardından Zurb şablonu seçin. Bu, kuruluş sistemi ve geliştirme sunucusuyla tamamlanan temeli temel alan bir proje şablonu kuracaktır.

Şablon bir örnek sayfası ile birlikte geliyor SRC / Pages / index.html . Sadelik için, bu örneği kaldıracağız ve boş bir şekilde değiştireceğiz. & lt; başlık ve gt; & lt; / başlık ve gt; Klasik binadan başlamak için kart tabanlı ui. Koşmak npm başlangıç Geliştirme sunucusunu çalıştırmak için komut satırından ve kartlara hazır bir çıplak HTML sayfası görmelisiniz.

03. Bir kart oluşturun

Şimdi ilk kartımızı oluşturmanın zamanı geldi. Şimdilik, sadece sınıfla bir bölümün içine koyalım. .cards-konteyner . Vakfı kullanarak bir kart oluştururken, farkında olmak için üç temel sınıf vardır: .card , .Card bölümü ve .Card-Bölücü . Daha ileri kullanıcılar için, bunların her biri bir SCSS karışımına karşılık gelir ( kart kabı , kart bölümü ve kart bölücü ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class

Üzerinde Vakıf YETI ile basit bir kart, kart bölücü sınıfı kullanılarak oluşturulan başlık ve altbilgi

Ancak, bu eğitim için, varsayılan sınıfları basitlik için kullanacağız. .card sınıf konteynerdir; Her kart içinde yaşayacak .card . Bu, sınırlar, gölgeler ve varsayılan renklendirme gibi şeyleri tanımlar.

.Card bölümü Sınıf, içerik koyabileceğiniz, genişletilebilir bir içerik bloğunu tanımlar. .Card-Bölücü Sınıf, bir altbilgi, başlık veya bölücü gibi genişleyen bir bloğu tanımlar. İlk, temel kartımızı oluşturmak için tüm bu sınıfları kullanalım. 

 & lt; başlık ve gt;
  & lt; div sınıf = "satır sütunları" & gt;
    & lt; H3 ve GT; kartlar en iyisidir; / ​​H3 ve GT;
  & lt; / div & gt;
& lt; / başlık ve gt;
& lt; bölüm sınıfı = "kartlar-konteyner" & gt;
  & lt; div sınıf = "kart" & gt;
    & lt; div sınıf = "kart bölücü" & gt;
      & lt; h4 & gt; YETI başlığı & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div sınıf = "kart bölümü" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div sınıf = "kart bölücü" & gt;
      & lt; p & gt; yeti altbilgisi & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / section & gt;

04. Bileşen stilleri ekleyin

Bunu yaparsak, kartımız büyük olacak, tüm ekranı doldurmak için genişleyecektir. Kısa bir süre boyunca genel boyutlandırma ile başa çıkacağız, ancak şimdilik, Zurb şablonunda bileşen stillerini nasıl ekleyeceğinizi öğrenmek için bunu bir bahane olarak kullanalım.

Bir dosya ekle _card.scss için SRC / Varlıklar / SCSS / Bileşenleri / Belirtme Maksimum genişlik: 300px için .card ve ekleyerek ana CSS'imize dosyayı ekleyin @import bileşenleri / kart; için SRC / Varlıklar / Scss / App.SCSS .

05. Kartlarınızı yeniden kullanılabilir hale getirin

Birden fazla kartla tekrarlanabilir bir düzen oluşturmak için, kartlarımızın tekrar tekrar takabileceğimiz tekil bileşenler olmasını istemeyiz. Bu eğitim için kullandığımız Zurb şablonu, kısmi oluşturma ve yeniden kullanılabilir kod blokları oluşturma yeteneğini içeren gidon adı verilen bir şablon dili kullanır.

Kart uygulamamızı kısmi bir şekilde hareket ettirmek için, basitçe kes ve yapıştırın. .card Bir dosyaya yerleştirdiğimiz bileşen SRC / Parsiyel , söyle SRC / Parsiyel / Temel-Card.html . Daha sonra bu içeriği basitçe çizgiyi ekleyerek ekleyebilirsiniz. {{& gt; temel kart}} Dizin dosyanızda.

06. Düzeninizi oluşturmaya başlayın

Farklı kart tiplerini biraz kapsayacağız, ancak önce kartlarımız için daha büyük, duyarlı bir düzen oluşturmaya başlamak için yeniden kullanılabilir temel kartımızı kullanalım. Bunu yapmak için, Vakfı'ndan blok ızgarası olarak adlandırılan bir kavram kullanacağız.

Vakıf, birkaç farklı ızgara türünü içerir, ancak hepsi satır ve sütunlar kavramından başlar. Bir satır, birden fazla dikey sütun içerebilen yatay bir blok oluşturur. Bu temel yapı taşları, hemen hemen tüm düzenlerin çekirdeğini oluşturur.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include

Basit bir blok ızgara ile, zaten dahil olmak istediğimiz kadar çok kart için güzel, ölçeklenebilir bir düzenimiz var.

Blok ızgaraları, eşit derecede büyüklükteki sütunlar oluşturmanın ve kendinize belirsiz miktarda içerik eklemek için esneklik ve özgürlüğe izin vermenin bir steno yoludur. Sadece satıra bir sınıf ekleyin ve ardından istediğiniz kadar sütun bileşeni ekleyin. Temel, onları temiz bir şekilde ve temiz bir şekilde bırakacaktır.

Çok büyük ve değişen bir kart sayısına sahip olmayı beklediğimiz için, bu amaçlarımız için idealdir. Bunu dört sütunlu bir kılavuzda hızlı bir şekilde ayarlayalım ve birkaç düzine kartı ekleyelim. Şimdilik sadece büyük ekranlar için endişeleneceğiz, bu yüzden basitçe uygulayacağız. .large-up-4 sıraya sınıf. 

 & lt; bölüm sınıfı = "kart-konteyner" & gt;
& lt; div sınıf = "satır büyük-yukarı-4" & gt;
{{#Repeat 24}}
& lt; div sınıf = "sütun" & gt;
{{& gt; temel kart}}
& lt; / div & gt;
{{/tekrar et}}
& lt; / div & gt;
& lt; / section & gt;

07. Duyarlı hale getirin

Daha sonra, farklı ekran boyutlarında ne olmak istediğimizi düşünelim. Vakıf, yerleşik küçük, orta ve büyük kesme noktaları ile birlikte gelir, böylece her bir kırılma noktası için bir şeyler kaydırmak için farklı bir blok ızgara sınıfı uygulayabiliriz.

Sınıfları ekleyerek, mobil ekranlarda satır başına bir kart koyalım. .Small-up-1 ve .Medium-up-3 satırda. Bunu yaparsak, StopGap'ı kaldırırsak maksimum genişlik Koyduğumuz mülk _card.scss . Zaten tüm ekran boyutlarında iyi görünen güzel bir şekilde duyarlı bir düzenimiz var.

08. Yeni kart türlerini deneyin

Combine different styles of card to build your layout

Düzeninizi oluşturmak için farklı kart stillerini birleştirin

Şimdi kartlarımızı çeşitlendirelim, başka bir tür saf kenardan bir fotoğraftır. Kart bölümleri ve kart bölücüleri varsayılan olarak dolgu içerir, ancak kenardan kenardan içeriğe sahip olmak için görüntüyü doğrudan kartın içine koyabiliriz. Bunu bir şekilde ekleyelim photo-card.html kısmi olarak SRC / Parsiyel . 

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

09. FlexBox'ı tanıtın

Kartları bir araya getirebileceğimiz yüzlerce olası yol var - bazı ilham kaynağı için, vakfı kontrol edebilirsiniz. kartpack deposu . Ancak, farklı boyutlu kartlarımız olduğunda nasırlığı nasıl yönettiğimize devam edelim. Fotoğraf kartını kısalarak temel kartla yaptığımız gibi düzenlemeye eklerseniz, yüksekliklerimiz farklıyız çünkü biraz pürüzlü bir deneyimle bitiririz. Bu iyi olabilir veya telafi etmek için düzenimizi ayarlamak isteyebiliriz.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game

Vakıf Kart Paketi, kartınızı yükseltmek için size önceden belirlenmiş bir FlexBox kartları kümesi sunar.

Bu eğitim için, favori yeni CSS düzen tekniği - FlexBox'u kullanarak telafi edeceğiz. Vakıf, şebekesi için bir FlexBox modu ile birlikte gelir. Bunu etkinleştirmek için, basitçe açmanız gerekir. SRC / Varlıklar / Scss / App.SCSS , yorum Yap @include Foundation-Grid; ve @include Foundation-Float-Sınıfları; ve özgü @include Foundation-Flex-Grid; ve @include Foundation-Flex sınıfları; .

10. Kartlarınızı aynı yükseklikte yapın

FlexBox sınıfları etkinken, kartlarımızı aynı yükseklikte olmak için basittir. İlk önce, sütunlarımızı ekleyerek ebeveynleri esnekleştirebiliriz. .flex-konteyner sınıf. Bu, eklemek için bir prototipleme kısayolu Ekran: Flex; onlara mülk. Bunu yaptığımızda, tüm kartların tümü aynı yükseklik haline gelecektir, ancak esnek çocuk elemanları varsayılan olarak küçüldüğü için, bazı kartlarımızın bir kısmı darlaşıyor.

Bu konuyu sadece bu unsurları büyümesini söyleyerek düzeltebiliriz. Bu, onları CSS ile hedefleyerek ve onlara vererek yapılır. Flex-Büyümek: 1; veya prototipleme sırasında basitlik için, sadece sınıf ekleyerek .flex-çocuk yetiştiriciliği . Bunların hepsi yapıldıktan sonra tüm kartlarımızı sütunları doldurun ve aynı yükseklikte güzel olur.

Bu makale başlangıçta bulundu net dergisi Sayı 293. Buradan satın al veya Net'e abone olun .

Bunu beğendin mi? Bunları dene...

  • Atomik tasarım kullanmanız gereken 10 neden
  • SVG çokgenler oluşturun ve canlandırın
  • CSS püf noktaları düzenlerinizi devrim yapmak için

Nasıl Yapılır - En Popüler Makaleler

Cloud storage for photos and images: How to choose the best cloud for your work

Nasıl Yapılır Jan 18, 2026

(Resim Kredi: Getty Images) Bulut depolama, her türlü reklamlar, özellikle de fotoğrafçılar için bir ton avant..

İllüstratörde kendi kaligrafi fırçanızı oluşturun

Nasıl Yapılır Jan 18, 2026

Illustrator ile ilgili en iyi şeylerden biri, kendi fırçalarınızı oluşturma yeteneğidir. Bazı şaşırtıcı ücretsiz i..

Afinite Tasarımcısı'ndaki varlıklarla başlayın

Nasıl Yapılır Jan 18, 2026

Uygulama tasarımı veya markalaşma teminatı gibi projeler üzerinde çalışırken, tasarım boyunca bir süreklilik duygusu v..

Zbrush ve Maya'da 3B kişiyi modellemeyi öğrenin

Nasıl Yapılır Jan 18, 2026

Sayfa 1/2: Sayfa 1 Sayfa 1 Sayfa 2 ..

3DS Max'teki büyük ölçekli ortamlar

Nasıl Yapılır Jan 18, 2026

Bu parçanın amacı bir parça üretmekti 3d sanat Bu, doğrudan üretim sonrası veya hiç olmadığı, çerçev..

Sert yüzey modellemenizi 3DS maksimum olarak keskinleştirin

Nasıl Yapılır Jan 18, 2026

Bu eğitimde, içinde sert yüzeyli modeller oluşturmak için kullandığım teknikleri ve yöntemleri paylaşacağım. ..

Kendi tuval panolarınızı nasıl yapılır

Nasıl Yapılır Jan 18, 2026

Kendi tuval panolarınızı yapmak eğlencelidir, hızlı ve size para kazandırabilir. Ayrıca size herhangi bir proje için iht..

Photoshop CC'sinde ressam efektler oluşturun

Nasıl Yapılır Jan 18, 2026

Adobe, Photoshop'unuzu almanıza yardımcı olmak için iki yeni video eğitimi yayınladı. Yaratıcı bulut Bir ..

Kategoriler