CSS là một công nghệ tạo kiểu mạnh mẽ, phổ biến nhưng có thể khó sử dụng. Đây là lý do tại sao có các khung CSS như TailwindCSS và các bộ tiền xử lý như Less CSS và Sass.
VIDEO MUO TRONG NGÀY
CUỘN ĐỂ TIẾP TỤC
Nhưng đôi khi những khung hoặc “hương vị” CSS này có thể trở nên quá mức cần thiết đối với dự án bạn đang thực hiện. Đôi khi bạn cần một framework cung cấp các tính năng cơ bản để tạo kiểu cho trang web của mình. Đây là lúc Pico CSS xuất hiện. Pico là một khung CSS tối giản giúp dễ dàng tạo kiểu cho các phần tử HTML gốc.
Cài đặt Pico CSS trong dự án của bạn
Cách phổ biến nhất để chạy Pico CSS trong dự án là sử dụng Mạng phân phối nội dung (CDN). Pico CSS có sẵn trên CDN jsDelivr, vì vậy bạn chỉ cần trỏ đến tệp pico.min.css được lưu trữ ở đó:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Ngoài ra, bạn có thể cài đặt Pico CSS bằng Node. Để phương pháp này hoạt động, hãy đảm bảo bạn đã cài đặt Node.js trên máy tính của mình. Bạn có thể xác nhận tính khả dụng của Node.js trên máy của mình bằng cách chạy:
node -v
Nếu Node.js có sẵn, terminal sẽ hiển thị phiên bản của nó. Nếu chưa cài đặt, bạn có thể tìm hiểu cách chạy Node.js trên máy tính của mình. Cài đặt Pico CSS bằng cách chạy:
npm install @picocss/pico
Tạo một trang web với Pico CSS
Pico CSS cung cấp hai lớp, vùng chứa và lưới khi định cấu hình bố cục của trang web. Tạo một thư mục mới và trong thư mục này tạo một tệp index.htm và một tệp style.css. Trong tệp index.htm, thêm mã soạn sẵn sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
<link rel="stylesheet" href="https://wilku.top/a-beginners-guide-to-using-pico-css/style.css" />
<title>Pico Website</title>
</head>
<body>
<div class="container">
<h1>Articles Worth Reading...</h1>
</div>
</body>
</html>
Hệ thống lưới Pico CSS
Hệ thống lưới trong Pico CSS khá đơn giản. Một lưới có thể được định nghĩa bằng cách sử dụng lớp lưới. Trong Pico CSS, các cột lưới sẽ thu gọn trên các thiết bị có chiều rộng dưới 992 pixel.
Ngay bên dưới thẻ h1 trong nội dung của tệp index.htm, hãy tạo một lưới có bốn cột.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Mỗi div trong lưới phải có hai lớp: vùng chứa và tab. Lớp container là lớp CSS Pico gốc cho phép bạn căn giữa khung nhìn. Sau đó điền vào lưới với nội dung mẫu như thế này:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Why do birds sing in the morning?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>13 Minutes ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">The Secret Life of Ducklings</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>53 Minutes ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">NASA's New Mission: Sending Flat-Earthers to
Edge of Earth to Prove Them Wrong</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>1 hour ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Local Grandma Wins International Hip-Hop Dance Battle,
Proves Age is Just a Number</h4>
<div class="metadata">
<span>Anonymous</span>
<span>2 days ago</span>
</div>
</div>
</div>
Để xử lý kiểu dáng, hãy mở tệp style.css và thêm:
img {
width: 100%;
background-size: cover;
border-radius: 10px;
height: 200px;
}.card {
background-color: rgb(244, 244, 244);
border-radius: 10px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}
.card:hover {
transform: scale(1.03);
}
.metadata {
margin-top: -30px;
margin-bottom: 10px;
}
.title {
margin-top: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metadata {
font-size: 14px;
}
span:nth-child(1)::after {
content: " -";
}
Khi bạn mở trang trong trình duyệt của mình, bạn sẽ thấy:
Cách sử dụng các nút trong Pico CSS
Pico CSS cung cấp nhiều thành phần và thành phần HTML được tạo kiểu sẵn. Một trong những yếu tố phổ biến nhất của bất kỳ trang web nào là nút.
Theo truyền thống, các trình duyệt khác nhau hiển thị các nút hơi khác nhau. Thành phần nút trong Pico CSS tạo một nút có kiểu nhất quán trên tất cả các trình duyệt. Để sử dụng nó, chỉ cần thêm phần tử nút như bình thường:
<button>This is a button</button>
Theo mặc định, trong Pico CSS, các nút chiếm toàn bộ chiều rộng vùng chứa của chúng. Nếu bạn không thích hành vi này, hãy đảm bảo bạn đặt thuộc tính vai trò trên thành phần HTML nội tuyến thành “nút”:
<a href="https.//www.google.com" role="button">Go To Google</a>
Cách sử dụng công cụ tải trong Pico CSS
Trong Pico CSS, nếu bạn đặt aria-busy thành “true” cho bất kỳ phần tử nào, nó sẽ tự động thêm chỉ báo tải. Tính năng này có thể hữu ích nếu bạn muốn thông báo cho người dùng rằng có thứ gì đó chưa sẵn sàng để tương tác với họ hoặc trình duyệt đang tải xuống một tài nguyên.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Đoạn mã trên sẽ dẫn đến:
Các gợi ý có thể khó thực hiện nhưng Pico CSS xử lý được nó. Nó giúp bạn dễ dàng tạo chú giải công cụ trên bất kỳ thành phần nào mà không cần JavaScript phức tạp. Khi tạo chú giải công cụ trong Pico CSS, bạn cần sử dụng hai thuộc tính:
- data-tooltip: Chỉ định nội dung của chú giải công cụ.
- vị trí dữ liệu: Chỉ định vị trí của chú giải công cụ. Bạn có thể đặt thuộc tính này thành một trong bốn giá trị: “trên cùng”, “phải”, “dưới cùng” và “trái”.
Đoạn mã sau cho thấy cách sử dụng công cụ này:
<button data-tooltip="Top" data-placement="top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>
Sau khi chạy nó trong trình duyệt của bạn, bạn sẽ thấy:
Đàn accordion Pico CSS
Accordion cho phép người dùng chuyển đổi chế độ hiển thị của các phần nội dung bằng cách mở rộng hoặc thu gọn chúng, giống như đàn accordion của nhạc cụ mở rộng và thu gọn. Để triển khai chức năng này trong Pico CSS, hãy sử dụng phần tử chi tiết:
<details>
<summary>This is an accordion</summary>
<p>
Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
vulputate integer elit sodales? Egetnunc pellentesque eu eget
consequat condimentum praesent nec auctor sapien luctus at, donec ac
ex sit magna amet in.
</p>
</details>
Khi trình duyệt hiển thị các thẻ này, trình duyệt sẽ cung cấp tùy chọn hiển thị hoặc ẩn nội dung, trong trường hợp này là mũi tên thả xuống:
Khi nào bạn nên sử dụng CSS Framework
Các khung CSS có thể giúp hợp lý hóa quá trình tạo và tạo kiểu cho một ứng dụng web. Bạn nên cân nhắc sử dụng CSS framework nếu muốn tiết kiệm thời gian cho các tác vụ lặp đi lặp lại và sử dụng các thành phần có sẵn.
Các khung này cung cấp một tập hợp các kiểu CSS, lưới bố cục và thành phần được thiết kế sẵn, cho phép bạn tập trung vào logic và chức năng của ứng dụng. Nhiều khung CSS đi kèm với tài liệu phong phú và hỗ trợ cộng đồng, rất hữu ích nếu bạn gặp khó khăn.
