Bangun UI berbasis kartu dengan Yayasan

Jan 18, 2026

Bagaimana caranya

Berbasis kartu. Tata letak situs web telah mengambil alih web. Dilakukan populer oleh Pinterest, Twitter, Facebook, dan Google, kartu telah menjadi pola desain yang masuk untuk berbagai kasus penggunaan.

Tidak sulit untuk melihat alasannya. Kartu bekerja dengan sempurna di dalam Desain Web Responsif . Sebagai unit mandiri, mereka dapat dipindahkan, dikocok dan dicampur dengan berbagai jenis konten. Mereka juga merespons dengan mudah pada ukuran layar yang berbeda, dari satu kolom pada perangkat seluler hingga multi-kolom pada perangkat yang lebih besar.

Langkah-langkah ke tata letak situs web yang sempurna

Tim ZURUR telah menggunakan tata letak berbasis kartu dalam pekerjaan desainnya selama bertahun-tahun. Kerangka kerja frontend, yayasan, selalu berusaha untuk melengkapi desainer web dengan alat yang mereka butuhkan untuk dengan cepat merancang dan membangun situs web responsif dengan memasukkan berbagai komponen modular dan fleksibel. Versi 6.3 Ditambahkan ke koleksi blok bangunan ini membawa implementasi off-kanvas baru, akordeon / tab responsif, dan komponen kartu baru yang kuat.

Dalam tutorial ini kita akan belajar bagaimana menciptakan UI berbasis kartu yang responsif yang mengambil keuntungan dari grid berbasis flexbox pondasi untuk membuka banyak kemungkinan.

01. Siapkan lingkungan pengembangan

Langkah pertama adalah mengatur lingkungan pengembangan. Untuk tutorial ini, kami akan menggunakan lingkungan pengembangan berbasis node, jadi Anda perlu menginstal Node.js. Detail untuk melakukan ini tergantung pada lingkungan Anda, jadi periksa sini untuk mencari tahu apa yang harus dilakukan.

Setelah Anda menginstal node, instal Foundation CLI menggunakan NPM Instal -G Foundation-CLI , yang akan membuatnya mudah untuk mengatur proyek fondasi baru.

02. Mulai proyek baru

Mari kita buat proyek baru berdasarkan template ZURUR. Jalankan perintah Yayasan Baru Net-Magazine-Tutorial , Pilih 'situs web (fondasi untuk situs)', 'net-magazine-tutorial' dan kemudian template ZURUR. Ini akan menyiapkan template proyek berdasarkan fondasi, lengkap dengan sistem pembangunan dan server pengembangan.

Template dilengkapi dengan halaman sampel di src / halaman / index.html . Untuk kesederhanaan, kami akan menghapus sampel itu dan menggantinya dengan kosong & lt; header & gt; & lt; / header & gt; Untuk memulai dari awal membangun UI berbasis kartu kami. Lari NPM Mulai Dari baris perintah untuk menjalankan server pengembangan, dan Anda akan melihat halaman HTML yang siap untuk kartu.

03. Buat kartu

Sekarang saatnya membuat kartu pertama kami. Untuk saat ini, mari kita letakkan langsung ke dalam bagian dengan kelas .cards-wadah. . Saat membuat kartu menggunakan yayasan, ada tiga kelas inti untuk diperhatikan: .kartu , .card-section. dan .card-Divider. . Untuk pengguna yang lebih maju, masing-masing sesuai dengan Campuran SCS ( Card-Container. , Bagian kartu dan Card-Divider. ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Kartu sederhana dengan yayasan yeti di atasnya, header dan footer dibuat menggunakan kelas pembatas kartu

Tapi, untuk tutorial ini kita akan menggunakan kelas default untuk kesederhanaan. Itu .kartu kelas adalah wadah; setiap kartu akan hidup dalam a .kartu . Ini mendefinisikan hal-hal seperti batas, bayangan, dan pewarnaan default.

Itu .card-section. kelas mendefinisikan blok konten yang dapat diperluas, di mana Anda mungkin menempatkan konten, sementara .card-Divider. Kelas mendefinisikan blok yang tidak perluasan, seperti footer, header atau divider. Mari kita gunakan semua kelas ini untuk membuat kartu dasar pertama kami.

 & lt; header & gt;
  & lt; div class = "kolom baris" & gt;
    & lt; H3 & GT; kartu adalah yang terbaik & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; bagian bagian = "wadah kartu" & gt;
  & lt; Div Class = "Card" & gt;
    & lt; div class = "card-divider" & gt;
      & lt; h4 & gt; yeti header & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div class = "bagian kartu" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / gt;
    & lt; / div & gt;
    & lt; div class = "card-divider" & gt;
      & lt; p & gt; yeti footer & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / section & gt;

04. Tambahkan gaya komponen

Jika kita melakukan ini, kartu kita akan sangat besar, berkembang untuk mengisi seluruh layar. Kami akan berurusan dengan ukuran keseluruhan segera, tetapi untuk sekarang mari kita gunakan ini sebagai alasan untuk mempelajari cara menambahkan gaya komponen di template ZURUR.

Tambahkan file _card.css. untuk SRC / Aset / SCS / Komponen / Menentukan A. Lebar Max: 300px untuk .kartu dan sertakan file di CSS utama kami dengan menambahkan @Import komponen / kartu; untuk SRC / Aset / SCS / App.scss .

05. Jadikan kartu Anda dapat digunakan kembali

Untuk membuat tata letak yang berulang dengan beberapa kartu, kami akan menginginkan kartu kami untuk dapat digunakan kembali komponen yang dapat kami pasang berulang-ulang. Template ZURUR yang kami gunakan untuk tutorial ini menggunakan bahasa template yang disebut setang, yang mencakup kemampuan untuk membuat sebagian, atau blok kode yang dapat digunakan kembali.

Untuk memindahkan implementasi kartu kami menjadi parsial, cukup potong dan tempel .kartu komponen yang kami buat ke dalam file di SRC / Partials. , say SRC / Partials / Basic-card.html . Anda kemudian dapat memasukkan konten itu hanya dengan menambahkan garis {{& gt; Kartu dasar}} dalam file indeks Anda.

06. Mulai membangun tata letak Anda

Kami akan mencakup jenis kartu yang berbeda dalam sedikit, tetapi pertama-tama mari kita gunakan kartu dasar yang dapat digunakan kembali untuk mulai menciptakan tata letak yang lebih besar dan responsif untuk kartu kami. Untuk melakukannya, kita akan menggunakan konsep dari yayasan yang disebut block grid.

Yayasan mengandung beberapa jenis kisi, tetapi mereka semua mulai dari konsep baris dan kolom. Sebuah baris membuat blok horizontal yang dapat berisi beberapa kolom vertikal. Blok bangunan dasar ini membuat inti dari hampir semua tata letak.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Dengan grid blok sederhana, kami sudah memiliki tata letak yang indah dan dapat diskalakan untuk kartu sebanyak yang kami ingin sertakan

Block Grids adalah cara singkat untuk membuat kolom berukuran sama dan untuk memungkinkan diri Anda fleksibilitas dan kebebasan untuk menambah jumlah konten yang tidak terbatas dan memilikinya ditata dengan baik dalam kolom yang sama. Anda cukup menambahkan kelas ke baris dan kemudian tambahkan komponen kolom sebanyak yang Anda suka. Foundation akan membuat mereka keluar untuk Anda dengan rapi dan bersih.

Karena kami berharap memiliki jumlah kartu yang sangat besar dan berubah, ini sangat ideal untuk keperluan kami. Mari kita atur ini dengan cepat di grid empat kolom dan tambahkan beberapa lusin kartu. Untuk saat ini kami hanya akan khawatir tentang layar besar, jadi kami akan menerapkannya .large-up-4 kelas ke baris.

 & lt; bagian kelas = "wadah kartu" & gt;
& lt; div class = "baris besar-up-4" & gt;
{{#Repeat 24}}
& lt; div class = "kolom" & gt;
{{& gt; Kartu dasar}}
& lt; / div & gt;
{{/ulang}}
& lt; / div & gt;
& lt; / section & gt;

07. Buat responsif

Selanjutnya, mari kita pertimbangkan apa yang kita inginkan terjadi pada ukuran layar yang berbeda. Foundation hadir dengan breakpoint kecil, sedang, dan besar yang dibangun, sehingga kami dapat menerapkan kelas blok-grid yang berbeda untuk setiap breakpoint untuk menggeser semuanya.

Mari kita letakkan satu kartu per baris di layar seluler, dan tiga per baris pada tablet, dengan menambahkan kelas .small-up-1 dan .medium-up-3 di baris. Jika kita melakukan ini, dan hapus stopbap Lebar Maks. Properti yang kami taruh _card.css. . Kami sudah memiliki tata letak yang responsif yang terlihat bagus untuk semua ukuran layar.

08. Coba beberapa jenis kartu baru

Combine different styles of card to build your layout — Gabungkan gaya kartu yang berbeda untuk membangun tata letak Anda

Sekarang mari kita mendiversifikasi set kartu kita, tipe lain adalah foto tepi-ke-tepi murni. Bagian kartu dan pembagi kartu mengandung padding secara default, tetapi untuk memiliki konten tepi ke ujung, kami hanya dapat menempatkan gambar langsung di dalam kartu. Mari kita tambahkan ini sebagai Foto-card.html sebagian dalam SRC / Partials. .

 & lt; Div Class = "kartu" & gt;
& lt; img src = "http://foundation.zurk.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. Memperkenalkan FlexBox.

Ada ratusan cara yang mungkin kita kumpulkan kartu - untuk beberapa inspirasi, Anda dapat memeriksa fondasi Repositori Cardpack . Tapi mari kita beralih ke bagaimana kita mengelola tata letak ketika kita memiliki kartu berukuran berbeda. Jika Anda memasukkan parsial kartu foto ke dalam tata letak berganti-ganti dengan kartu dasar seperti yang kami lakukan sebelumnya, kami berakhir dengan sedikit pengalaman bergerigi karena ketinggian kami berbeda. Ini mungkin baik-baik saja, atau kami mungkin ingin menyesuaikan tata letak kami untuk mengkompensasi.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Paket Kartu Yayasan memberi Anda satu set besar kartu Flexbox pra-buatan untuk menaikkan permainan kartu Anda

Untuk tutorial ini, kami akan mengkompensasi dengan menggunakan teknik Layout CSS baru favorit kami - FlexBox. Yayasan dilengkapi dengan mode Flexbox untuk gridnya. Untuk mengaktifkannya, Anda hanya perlu membuka SRC / Aset / SCS / App.scss , komentari @include foundation-grid; dan @include Yayasan-Float-Classes; dan uncomment. @include foundation-flex-grid; dan @Include Foundation-Flex-Classes; .

10. Jadikan kartu Anda tinggi sama

Dengan kelas FlexBox diaktifkan, mudah untuk mendapatkan kartu kami menjadi tinggi yang sama. Pertama, kita dapat membuat kolom kami melenturkan orang tua dengan menambahkan .flex-wadah. kelas. Ini adalah pintasan prototyping untuk menambahkan Tampilan: Flex; properti untuk mereka. Setelah kami melakukan ini, semua kartu akan menjadi tinggi yang sama, tetapi karena elemen anak fleksibel menyusut secara default, beberapa kartu kami menjadi agak sempit.

Kita dapat memperbaiki masalah ini dengan hanya memberi tahu elemen-elemen itu untuk tumbuh. Ini dilakukan dengan menargetkan mereka dengan CSS dan memberi mereka Flex-Grow: 1; atau untuk kesederhanaan saat prototipe, hanya dengan menambahkan kelas .flex-child-tumbuh . Setelah semua ini telah dilakukan semua kartu kami, isi kolom dan akan menjadi tinggi yang sama.

Artikel ini awalnya ditampilkan dalam Net Magazine. Masalah 293. Beli di sini atau berlangganan bersih di sini .

Menyukai ini? Coba ini ...

10 Alasan Anda Harus Menggunakan Desain Atom
Buat dan Animasi Poligon SVG
Trik CSS untuk merevolusi tata letak Anda

Bangun UI berbasis kartu dengan Yayasan

01. Siapkan lingkungan pengembangan

02. Mulai proyek baru

03. Buat kartu

04. Tambahkan gaya komponen

05. Jadikan kartu Anda dapat digunakan kembali

06. Mulai membangun tata letak Anda

07. Buat responsif

08. Coba beberapa jenis kartu baru

09. Memperkenalkan FlexBox.

10. Jadikan kartu Anda tinggi sama

Bagaimana caranya - Artikel Terpopuler

Cara Bersihkan PaintBrush: Panduan Definitif

Cara menggambar Asuka dari Neon Genesis Evangelion

Persiapan dengan Babel 7

Ciptakan Sinar Tuhan di V-Ray

Langkah-demi-langkah: Cara Mimik Cat Minyak di Corel Painter

Bangun aplikasi seluler lintas platform dengan flutter Google

Cara memasang karya seni Anda

Memahat anatomi realistis dalam zbrush

Kategori