Trong mẹo nhỏ này, chúng ta sẽ sử dụng Bulma, một CSS framework phổ biến dựa trên Flexbox được tạo ra bởi Jeremy Thomas, để xây dựng một layout có tính đáp ứng cho blog.
Như thường lệ, để có được một ý tưởng ban đầu về những gì chúng ta sẽ thực hiện, hãy xem demo trên Codepen (kiểm tra phiên bản lớn hơn để có một trải nghiệm tốt hơn):
Làm quen với Bulma
Bulma chỉ yêu cầu một tập tin CSS. Bạn có thể lấy một bản sao của tập tin này bằng cách truy cập trang GitHub của nó, thông qua một trình quản lý gói (ví dụ npm), hoặc một CDN (ví dụ cdnjs).
Đối với hướng dẫn này, chúng ta sẽ chọn tuỳ chọn cuối cùng. Vì vậy, chúng ta đặt một liên kết đến tập tin cần thiết bên trong <head> của tài liệu HTML:
Bây giờ, chúng ta đã sẵn sàng để bắt đầu xây dựng layout cho blog!
Xây dựng Layout
Grid của chúng ta sẽ có một chiều rộng tối đa và sẽ được canh giữa theo chiều ngang. Để thực hiện điều này, chúng ta sử dụng các lớp trợ giúp section và container của Bulma:
1
<sectionclass="section">
2
<divclass="container">
3
<!-- grid here -->
4
</div>
5
</section>
Trên các màn hình nhỏ, tất cả các bài viết sẽ được xếp chồng lên nhau từ trên xuống dưới, như thế này:
Mặc định, Bulma được thiết kế theo kiểu mobile-first (ưu tiên thiết bị di động), đặt các bài viết ở bên trên mỗi bài khác ở trong độ rộng của viewport là 769px. Tất cả những gì chúng ta phải làm là xây dựng layout blog khi viewport vượt quá 768px.
Để làm điều đó, chúng ta chỉ cần một phần tử: tile. Như bạn sẽ thấy trong chốc lát nữa, thủ thuật ở đây là lồng nhiều phần tử tile.
Với suy nghĩ đó, hãy nhìn kỹ vào layout dành cho desktop. Như bạn có thể thấy từ các hình minh hoạ sau đây, nó bao gồm ba hàng:
Đối với mỗi hàng, Bulma cần ít nhất là hệ thống phân cấp lồng nhau sau đây:
1
tile is-ancestor
2
|
3
└───tile is-parent
4
|
5
└───tile is-child
Cho phép tôi giải thích:
Chúng ta bắt đầu với một tile cấp cao nhất, trong đó có chứa tất cả các tile khác.
Bên trong nó, chúng ta thêm các tile được phân phối trên trục ngang. Thêm vào đó, dựa trên một Grid với mười hai cột, chúng ta có thể thiết lập chiều rộng cụ thể cho các phần tử này. Điều này có thể thực hiện bằng cách sử dụng các lớp is-* nơi * là một số từ 1 đến 12. Ví dụ, một tile với lớp is-6 sẽ chiếm 50% diện tích chiều ngang.
Để xếp tile theo chiều dọc, chúng ta sử dụng lớp is-vertical.
Một khi chúng ta muốn thêm nội dung vào một tile, chúng ta chỉ định lớp is-child vào nó và lớp is-parent vào tile cha.
Tại thời điểm này, chúng ta đã sẵn sàng áp dụng lý thuyết này vào thực tiễn.
Hàng #1
Hàng đầu tiên chứa ba cột. Các cột đầu tiên và thứ ba chiếm một phần tư chiều rộng của hàng, trong khi cột thứ hai chiếm một nửa chiều rộng của hàng. Ngoài ra, cột thứ ba có chứa hai cột con.
Dựa trên những gì mà chúng ta đã thảo luận ở trên, đây là mã đánh dấu cần thiết:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-parent">
3
<articleclass="tile is-child green post">
4
<!-- content here -->
5
</article>
6
</div>
7
8
<divclass="tile is-6 is-parent">
9
<articleclass="tile is-child pink post">
10
<!-- content here -->
11
</article>
12
</div>
13
14
<divclass="tile is-vertical is-parent">
15
<articleclass="tile is-child blue post">
16
<!-- content here -->
17
</article>
18
<articleclass="tile is-child gold post">
19
<!-- content here -->
20
</article>
21
</div>
22
</div>
Lưu ý rằng chúng ta xác định chiều rộng cụ thể chỉ cho cột thứ hai thông qua lớp is-6. Tất nhiên, nếu chúng ta muốn, chúng ta cũng có thể thêm lớp is-3 vào cột đầu tiên và thứ ba. Nhưng điều này là không cần thiết bởi vì cả hai cột đều giãn ra (chúng có flex-grow: 1) để chia sẻ không gian còn lại theo chiều ngang.
Hơn nữa, để giúp định phong cách, nên chúng ta chỉ định một vài lớp tùy biến cho mỗi bài viết. Và để đơn giản, chúng ta bỏ qua nội dung của bài viết.
Hàng #2
Tương tự như hàng đầu tiên, hàng thứ hai chứa ba cột. Cột đầu tiên chiếm một nửa chiều rộng của hàng, trong khi cột thứ hai và thứ ba chiếm một phần tư chiều rộng của hàng. Hơn nữa, cột thứ hai bao gồm hai cột con.
Dưới đây là mã đánh dấu cho nó:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-6 is-parent">
3
<articleclass="tile is-child gray post">
4
<!-- content here -->
5
</article>
6
</div>
7
8
<divclass="tile is-vertical is-parent">
9
<articleclass="tile is-child blue post">
10
<!-- content here -->
11
</article>
12
<articleclass="tile is-child gold post">
13
<!-- content here -->
14
</article>
15
</div>
16
17
<divclass="tile is-parent">
18
<articleclass="tile is-child red post">
19
<!-- content here -->
20
</article>
21
</div>
22
</div>
Hàng #3
Hàng thứ ba thì phức tạp hơn một chút; ở đây chúng ta có hai cột. Cột đầu tiên lớn gấp hai lần cột thứ hai. Trong cột đầu tiên, chúng ta có hai hàng con. Hàng con đầu tiên chứa ba cột có kích thước bằng nhau, trong khi hàng con thứ hai bao gồm hai cột có kích thước bằng nhau.
Mã đánh dấu cho trường hợp này là như sau:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-8 is-vertical">
3
4
<divclass="tile">
5
<divclass="tile is-parent">
6
<articleclass="tile is-child blue post">
7
<!-- content here -->
8
</article>
9
</div>
10
<divclass="tile is-parent">
11
<articleclass="tile is-child gray post">
12
<!-- content here -->
13
</article>
14
</div>
15
<divclass="tile is-parent">
16
<articleclass="tile is-child red post">
17
<!-- content here -->
18
</article>
19
</div>
20
</div>
21
22
<divclass="tile">
23
<divclass="tile is-parent">
24
<articleclass="tile is-child pink post">
25
<!-- content here -->
26
</article>
27
</div>
28
<divclass="tile is-parent">
29
<articleclass="tile is-child gold post">
30
<!-- content here -->
31
</article>
32
</div>
33
</div>
34
35
</div><!-- /is-8 -->
36
37
<divclass="tile is-parent">
38
<articleclass="tile is-child green post">
39
<!-- content here -->
40
</article>
41
</div>
42
43
</div>
Như bạn sẽ thấy từ đoạn code ở trên, hệ thống phân cấp lồng nhau trông giống như thế này:
1
tile is-ancestor
2
|
3
├───tile is-8 is-vertical
4
| |
5
| ├───tile /*Extra class for IE*/
6
| | |
7
| | ├───tile is-parent
8
| | | └───tile is-child
9
| | |
10
| | ├───tile is-parent
11
| | | └───tile is-child
12
| | |
13
| | └───tile is-parent
14
| | └───tile is-child
15
| |
16
| └───tile /*Extra class for IE*/
17
| |
18
| ├───tile is-parent
19
| | └───tile is-child
20
| |
21
| └───tile is-parent
22
| └───tile is-child
23
|
24
└───tile is-parent
25
└───tile is-child
Nếu bạn muốn có một ý tưởng tốt hơn về cách các phần tử tile làm việc, hãy kiểm tra tài liệu cũng như sử dụng các công cụ phát triển của trình duyệt yêu thích của bạn để kiểm tra các lớp có liên quan.
Trình duyệt hỗ trợ
Ngày nay Flexbox đã thật sự được hỗ trợ rất tốt và do đó layout cho blog của chúng ta sẽ làm việc trong tất cả các trình duyệt hiện đại.
Tuy nhiên, khi tôi đang thử nghiệm trang web trong các trình duyệt khác nhau, tôi thấy rằng IE 11 không đạt được kết quả mong muốn. Dưới đây là những gì tôi đã nhìn thấy:
Mặt khác, thử nghiệm với Microsoft Edge tôi đã không gặp phải những vấn đề này. Có lẽ đó là một số kiểu lỗi với các phiên bản mới nhất của trình duyệt IE. Nhưng dù sao, tôi cũng đã cố gắng để xem nếu có bất kỳ cách khắc phục nhanh chóng để tránh được những vấn đề này hay không.
Tôi giải quyết nó bằng cách thêm flex-basic: auto vào các bài viết và các tile cấp cao nhất của tile is-vertical của hàng thứ ba (xem phân cấp trước đó).
Một lần nữa, đây là một giải pháp nhanh chóng mà dường như có tác dụng cho ví dụ cụ thể này. Đối với các cài đặt của riêng bạn, bạn có thể phải thực hiện một số thay đổi khác trong code của bạn.
Tổng kết
Trong hướng dẫn nhanh này, chúng ta đã học được cách làm thế nào để xây dựng một Grid có tính đáp ứng cho blog với Bulma, một framework được xây dựng dựa trên Flexbox.
Bạn đã bao giờ thử sử dụng Bulma trong dự án của bạn chưa? Bạn nghĩ gì về nó? Hãy chia sẻ kinh nghiệm của bạn trong phần bình luận dưới đây nhé.
George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (Tuts+, SitePoint, LottieFiles, Scotch, Awwwards). He loves anything related to the Web and he is addicted to learning new technologies every day.
