Xây dựng giao diện người dùng dựa trên thẻ với Foundation

Sep 11, 2025

Cách

Dựa trên thẻ. Bố cục trang web đã lấy trên web. Được phổ biến bởi Pinterest, Twitter, Facebook và Google, các thẻ đã trở thành một mẫu thiết kế dành cho nhiều trường hợp sử dụng khác nhau.

Thật khó để thấy tại sao. Thẻ hoạt động hoàn hảo trong thiết kế web đáp ứng . Là đơn vị khép kín, chúng có thể được di chuyển, xáo trộn và trộn lẫn với các loại nội dung khác nhau. Chúng cũng đáp ứng dễ dàng trên các kích thước màn hình khác nhau, từ các cột duy nhất trên thiết bị di động đến nhiều cột trên các thiết bị lớn hơn.

Các bước để bố trí trang web hoàn hảo

Nhóm Zurb đã sử dụng các bố cục dựa trên thẻ trong công việc thiết kế của nó trong nhiều năm. Khung Frontend của nó, Foundation, luôn tìm cách trang bị các nhà thiết kế web với các công cụ họ cần nhanh chóng thiết kế và xây dựng các trang web phản hồi bằng cách bao gồm một loạt các thành phần mô-đun và linh hoạt. Phiên bản 6.3 được thêm vào bộ sưu tập các khối xây dựng này mang đến một triển khai ngoại vi hoàn toàn mới, accordion / tab đáp ứng và một thành phần thẻ mới mạnh mẽ.

Trong hướng dẫn này, chúng tôi sẽ học cách tạo UI dựa trên thẻ đáp ứng, tận dụng lưới điện dựa trên Flexbox của Foundation để mở ra toàn bộ khả năng.

01. Thiết lập môi trường phát triển

Bước đầu tiên là thiết lập một môi trường phát triển. Đối với hướng dẫn này, chúng tôi sẽ sử dụng môi trường phát triển dựa trên nút, vì vậy bạn cần cài đặt Node.js. Các chi tiết để làm điều này phụ thuộc vào môi trường của bạn, vì vậy hãy kiểm tra đây để tìm hiểu những việc cần làm.

Khi bạn đã cài đặt nút, hãy cài đặt Nền tảng CLI bằng cách sử dụng Cài đặt NPM -G Foundation-CLI , Điều này sẽ giúp bạn dễ dàng thiết lập một dự án nền tảng mới.

02. Bắt đầu một dự án mới

Hãy tạo một dự án mới dựa trên mẫu ZURB. Chạy lệnh Tổ chức Net-Magazine-HƯỚNG DẪN , chọn 'Một trang web (nền tảng cho các trang web)', 'Tạp chí Net-Magazine' và Mẫu Zurb. Điều này sẽ thiết lập một mẫu dự án dựa trên nền tảng, hoàn thành với máy chủ xây dựng và máy chủ phát triển.

Mẫu đi kèm với một trang mẫu trong src / trang / index.html . Để đơn giản, chúng tôi sẽ loại bỏ mẫu đó và thay thế nó bằng một trống & lt; tiêu đề & gt; & lt; / tiêu đề & gt; Để bắt đầu từ đầu xây dựng UI dựa trên thẻ của chúng tôi. Chạy NPM bắt đầu Từ dòng lệnh để chạy máy chủ phát triển và bạn sẽ thấy một trang HTML trần đã sẵn sàng cho các thẻ.

03. Tạo một thẻ

Bây giờ là lúc để tạo thẻ đầu tiên của chúng tôi. Bây giờ, hãy đặt thẳng vào một phần với lớp .cards-container. . Khi tạo thẻ bằng Foundation, có ba lớp cốt lõi để biết: .Thẻ Cái gì .card-part. và .card-chia . Đối với người dùng nâng cao hơn, mỗi người trong số này tương ứng với SCSS Mixin ( container thẻ. Cái gì Thẻ-Mục. và chia thẻ ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Một thẻ đơn giản với Foundation Yeti trên đó, tiêu đề và chân trang được tạo bằng lớp chia thẻ

Nhưng, đối với hướng dẫn này, chúng tôi sẽ sử dụng các lớp mặc định để đơn giản. Các .Thẻ Lớp là container; Mỗi thẻ sẽ sống trong một .Thẻ . Điều này định nghĩa những thứ như viền, bóng và màu mặc định.

Các .card-part. Lớp xác định một khối nội dung có thể mở rộng, nơi bạn có thể đặt nội dung, trong khi .card-chia Lớp xác định một khối không mở rộng, chẳng hạn như chân trang, tiêu đề hoặc dải phân cách. Hãy sử dụng tất cả các lớp này để tạo thẻ cơ bản đầu tiên của chúng tôi.

 & lt; tiêu đề & gt;
  & lt; div class = "cột hàng" & gt;
    & lt; H3 & GT; thẻ là tốt nhất & lt; / H3 & GT;
  & lt; / div & gt;
& lt; / tiêu đề & gt;
& lt; phần class = "thẻ-container" & gt;
  & lt; div class = "thẻ" & gt;
    & lt; div class = "chia thẻ" & gt;
      & lt; H4 & GT; Tiêu đề YETI & LT; / H4 & GT;
    & lt; / div & gt;
    & lt; div class = "phần thẻ" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div class = "chia thẻ" & gt;
      & lt; P & GT; Yeti footer & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / phần & gt;

04. Thêm phong cách thành phần

Nếu chúng ta chỉ làm điều này, thẻ của chúng tôi sẽ rất lớn, mở rộng để lấp đầy toàn bộ màn hình. Chúng tôi sẽ giải quyết kích thước tổng thể trong thời gian ngắn, nhưng bây giờ, hãy sử dụng nó như một cái cớ để tìm hiểu cách thêm các kiểu thành phần trong mẫu Zurb.

Thêm một tập tin _card.scss. đến SRC / Tài sản / SCS / Linh kiện / Chỉ định A. Độ rộng tối đa: 300px cho .Thẻ và bao gồm các tập tin trong CSS chính của chúng tôi bằng cách thêm @Import Linh kiện / Thẻ; đến SRC / TÀI SẢN / SCSS / APP.SCSS .

05. Làm cho thẻ của bạn tái sử dụng

Để tạo bố cục lặp lại với nhiều thẻ, chúng ta sẽ muốn thẻ của chúng tôi là các thành phần có thể tái sử dụng mà chúng ta có thể cắm lại nhiều lần. Mẫu Zurb mà chúng ta đang sử dụng cho hướng dẫn này sử dụng ngôn ngữ Templating có tên Tay lái, bao gồm khả năng tạo một phần hoặc các khối mã tái sử dụng.

Để di chuyển việc thực hiện thẻ của chúng tôi thành một phần, chỉ cần cắt và dán .Thẻ Thành phần chúng tôi tích hợp vào một tệp trong SRC / một phần , Nói src / partials / basic-card.html . Sau đó, bạn có thể bao gồm nội dung đó bằng cách thêm dòng {{& gt; Thẻ cơ bản}} trong tập tin chỉ mục của bạn.

06. Bắt đầu xây dựng bố cục của bạn

Chúng tôi sẽ bao gồm các loại thẻ khác nhau trong một chút, nhưng trước tiên hãy sử dụng thẻ cơ bản có thể tái sử dụng của chúng tôi để bắt đầu tạo bố cục lớn hơn, đáp ứng cho thẻ của chúng tôi. Để làm như vậy, chúng ta sẽ sử dụng một khái niệm từ Foundation gọi là Lưới khối.

Foundation chứa một vài loại lưới khác nhau, nhưng tất cả đều bắt đầu từ khái niệm các hàng và cột. Một hàng tạo ra một khối ngang có thể chứa nhiều cột dọc. Những khối xây dựng cơ bản này tạo nên cốt lõi của hầu hết các bố cục.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Với một lưới khối đơn giản, chúng tôi đã có một bố cục đẹp, có thể mở rộng cho nhiều thẻ như chúng tôi muốn bao gồm

Lưới khối là một cách tốc ký để tạo các cột có kích thước bằng nhau và cho phép bản thân sự linh hoạt và tự do để thêm một lượng nội dung không xác định và sẽ đặt nó độc đáo trong các cột bằng nhau. Bạn chỉ cần thêm một lớp vào hàng và sau đó thêm bao nhiêu thành phần cột tùy thích. Nền tảng sẽ đặt chúng ra cho bạn gọn gàng và sạch sẽ.

Vì chúng tôi hy vọng sẽ có một số lượng thẻ rất lớn và thay đổi, đây là lý tưởng cho mục đích của chúng tôi. Chúng ta hãy thiết lập nhanh chóng trong lưới bốn cột và thêm một vài chục thẻ. Bây giờ chúng ta sẽ chỉ lo lắng về màn hình lớn, vì vậy chúng ta chỉ đơn giản là áp dụng .Large-up-4 lớp đến hàng.

 & lt; phần Class = "thẻ-container" & gt;
& lt; div class = "hàng lớn-up-4" & gt;
{{#repeat 24}}
& lt; div class = "cột" & gt;
{{& gt; Thẻ cơ bản}}
& lt; / div & gt;
{{/nói lại}}
& lt; / div & gt;
& lt; / phần & gt;

07. Làm cho nó đáp ứng

Tiếp theo, hãy xem xét những gì chúng ta muốn xảy ra trên các kích cỡ màn hình khác nhau. Nền tảng đi kèm với các điểm dừng nhỏ, vừa và lớn được tích hợp, để chúng ta chỉ cần áp dụng một lớp lưới khối khác cho mỗi điểm dừng để thay đổi mọi thứ xung quanh.

Chúng ta hãy đặt một thẻ mỗi hàng trên màn hình di động và ba hàng mỗi hàng trên máy tính bảng, bằng cách thêm các lớp .small-up-1 và .medium-up-3 trên hàng. Nếu chúng ta làm điều này, và gỡ bỏ điểm dừng chiều rộng tối đa tài sản chúng tôi đặt. _card.scss. . Chúng tôi đã có một bố cục đáp ứng đẹp mắt có vẻ tốt trên tất cả các kích cỡ màn hình.

08. Thử một số loại thẻ mới

Combine different styles of card to build your layout — Kết hợp các kiểu thẻ khác nhau để xây dựng bố cục của bạn

Bây giờ hãy đa dạng hóa bộ thẻ của chúng tôi, một loại khác là một bức ảnh cạnh và cạnh thuần túy. Các phần thẻ và bộ chia thẻ chứa phần đệm theo mặc định, nhưng để có nội dung EDGE-to-Edge, chúng ta chỉ cần đặt hình ảnh trực tiếp vào bên trong thẻ. Hãy thêm điều này như một Photo-Card.html. một phần trong. SRC / một phần .

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

09. Giới thiệu Flexbox.

Có hàng trăm cách có thể chúng ta có thể tập hợp các thẻ - cho một số cảm hứng, bạn có thể kiểm tra nền tảng Kho lưu trữ Cardpack. . Nhưng hãy chuyển sang cách chúng ta quản lý bố cục khi chúng ta có thẻ có kích thước khác nhau. Nếu bạn chèn thẻ ảnh một phần vào bố cục xen kẽ với thẻ cơ bản như trước đây, chúng ta sẽ kết thúc với một chút trải nghiệm lởm chởm vì độ cao của chúng ta là khác nhau. Điều này có thể ổn, hoặc chúng ta có thể muốn điều chỉnh bố cục của chúng tôi để bù đắp.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Gói thẻ Foundation cung cấp cho bạn một bộ thẻ Flexibox tuyệt vời để tăng cấp trò chơi bài của bạn

Đối với hướng dẫn này, chúng tôi sẽ bồi thường bằng cách sử dụng kỹ thuật bố cục CSS mới yêu thích của chúng tôi - Flexbox. Foundation đi kèm với chế độ Flexibox cho lưới của nó. Để kích hoạt nó, bạn chỉ cần mở SRC / TÀI SẢN / SCSS / APP.SCSS , bình luận ra @include Foundation-Grid; và @include Foundation-Float-Classes; và bỏ nợ. @include Foundation-Flex-Grid; và @include Foundation-Flex-Classes; .

10. Làm cho thẻ của bạn cùng một chiều cao

Với các lớp Flexbox được bật, thật đơn giản để lấy thẻ của chúng tôi có cùng chiều cao. Đầu tiên, chúng ta có thể làm cho Cha mẹ Flex của chúng tôi bằng cách thêm .xlex-container. lớp học. Đây là một phím tắt tạo mẫu để thêm Hiển thị: Flex; tài sản cho họ. Khi chúng tôi thực hiện việc này, tất cả các thẻ sẽ trở thành cùng chiều cao, nhưng vì các yếu tố trẻ em Flex sẽ thu nhỏ theo mặc định, một số thẻ của chúng tôi có được loại hẹp.

Chúng ta có thể khắc phục vấn đề này bằng cách chỉ cần nói với các yếu tố đó để phát triển. Điều này được thực hiện bằng cách nhắm mục tiêu vào chúng với CSS và cung cấp cho họ Grow-Grow: 1; hoặc để đơn giản trong khi tạo mẫu, chỉ bằng cách thêm lớp .XYLEX-TRÁI CÂY . Khi tất cả những điều này đã được thực hiện tất cả các thẻ của chúng tôi điền vào các cột và sẽ có cùng chiều cao.

Bài viết này ban đầu được đặc trưng trong Tạp chí Net. vấn đề 293. Mua nó ở đây hoặc là Theo dõi mạng tại đây .

Thích cái này? Thử những thứ này xem...

10 lý do bạn nên sử dụng thiết kế nguyên tử
Tạo và Animate Polygons SVG
Thủ thuật CSS để cách mạng hóa bố cục của bạn

Xây dựng giao diện người dùng dựa trên thẻ với Foundation

01. Thiết lập môi trường phát triển

02. Bắt đầu một dự án mới

03. Tạo một thẻ

04. Thêm phong cách thành phần

05. Làm cho thẻ của bạn tái sử dụng

06. Bắt đầu xây dựng bố cục của bạn

07. Làm cho nó đáp ứng

08. Thử một số loại thẻ mới

09. Giới thiệu Flexbox.

10. Làm cho thẻ của bạn cùng một chiều cao

Cách - Các bài báo phổ biến nhất

Xây dựng một blog phản ứng nhanh với Svelte và Sapper

Tất cả những gì bạn cần biết về việc chia mã JavaScript

Sử dụng công cụ bút và kết cấu để thêm độ sâu trong Photoshop

Biến hình minh họa 2D thành nghệ thuật 3D

Cách minh họa mắt động vật

Vẽ vào lưới 3D với công cụ POLYPETT của ZBRUSHCORE

Vẽ các nét được kiểm soát và mượt mà với

Khám phá phong cách và chất typography

Thể loại