Module 6: Layout & Composition

Thời lượng: 1 tuần
Level: Intermediate
Yêu cầu: Hoàn thành các module Foundation (1-3)

Tổng quan Module

Trong Design System, Layout không chỉ là việc sắp xếp các hộp. Đó là việc tạo ra các Hệ thống Primitives linh hoạt giúp developers xây dựng giao diện mà không cần viết thêm Custom CSS cho mỗi màn hình.

Kết quả học tập

Sau module này, bạn sẽ:

• Xây dựng được các Layout Primitives: Stack, Inline, Grid, Center.
• Hiểu về Composition vs Explicit Spacing.
• Áp dụng các chiến lược Responsive hiện đại.
• Làm quen với Container Queries - tương lai của Component-based layout.

Bài 6.1: Layout Primitives

Lý thuyết

Thay vì đặt margin-bottom cho từng component (một anti-pattern lớn trong DS), chúng ta sử dụng các Layout Containers để quản lý khoảng cách.

1. Stack (Vertical Layout): Quản lý các items theo chiều dọc với khoảng cách (gap) nhất quán.

<Stack gap={4}>
  <Heading>Title</Heading>
  <Text>Description</Text>
  <Button>Action</Button>
</Stack>

2. Inline / Cluster (Horizontal Layout): Dùng cho buttons, tags, hoặc bất kỳ items nào nằm cạnh nhau và có khả năng xuống dòng (wrap).

<Inline gap={2} align="center">
  <Tag>Design</Tag>
  <Tag>Dev</Tag>
</Inline>

3. Grid: Dành cho bố cục cột phức tạp.

Bài 6.2: Responsive Layout Strategies

Lý thuyết

Mobile First: Luôn định nghĩa layout cho màn hình nhỏ nhất trước, sau đó mở rộng cho desktop.

Breakpoints Strategy: Đừng dùng các thiết bị cụ thể làm breakpoint (vd: iPhone 13). Hãy dùng các kích thước chuẩn hóa từ Design Tokens:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

Thực hành: Layout Primitives Explorer

Dưới đây là một bộ công cụ để bạn thử nghiệm sức mạnh của các Layout Primitives:

Bài 6.3: Container Queries

Lý thuyết

Nếu Media Queries dựa trên kích thước Viewport (toàn bộ màn hình), thì Container Queries cho phép component thay đổi layout dựa trên không gian của nội dung bao quanh nó.

Điều này cực kỳ quan trọng cho Design System vì một component (vd: Card) có thể được đặt ở Sidebar (hẹp) hoặc Main Content (rộng).

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex; /* Chuyển sang layout ngang khi đủ rộng */
  }
}

Câu hỏi thảo luận

1. Margin vs Gap: Tại sao Design System hiện đại ưu tiên sử dụng gap của Flex/Grid thay vì margin?
2. The 1-Dimensional Rule: Khi nào dùng Stack (1 chiều) và khi nào dùng Grid (2 chiều)?
3. Intrinsic Web Design: Làm sao để layout tự co giãn mà không cần quá nhiều Media Queries?

Tổng kết Module

Bạn đã học:

• Cách xây dựng các Layout Primitives cơ bản.
• Chiến lược Responsive dựa trên Tokens.
• Tiềm năng của Container Queries trong việc xây dựng các "Smart Components".

Bước tiếp theo

Module 7 sẽ đưa bạn đến một chủ đề cực kỳ quan trọng và nhân văn: Accessibility (A11y) - Đảm bảo Design System của bạn dành cho tất cả mọi người.

Tiếp tục Module 7 →