Hướng dẫn sử dụng Pico CSS cho người mới bắt đầu
Cascading Style Sheets (CSS) là một ngôn ngữ hình ảnh mạnh mẽ và có mặt khắp nơi, cho phép tùy chỉnh giao diện của các phần tử HTML, tuy nhiên việc triển khai nó có thể gây ra những thách thức. Để giảm bớt những khó khăn này, các nhà phát triển đã phát triển các khung CSS như TailwindCSS và các công nghệ tiền xử lý bao gồm Less CSS và Sass.
Pico CSS là một cách tiếp cận hợp lý để tạo kiểu cho các trang web chỉ cung cấp các công cụ và tính năng cần thiết để nâng cao tính thẩm mỹ mà không gây phức tạp quá mức cho các dự án. Nó cho phép người dùng làm việc với các thành phần HTML cơ bản và dễ dàng áp dụng các kiểu tùy chỉnh.
Cài đặt Pico CSS trong Dự án của bạn
Một trong những cách tiếp cận tiêu chuẩn để tích hợp Pico CSS vào dự án liên quan đến việc sử dụng Mạng phân phối nội dung (CDN). Cách tiếp cận này đòi hỏi phải tận dụng nhà cung cấp dịch vụ CDN lưu trữ các tệp Pico CSS, chẳng hạn như jsDelivr. Để triển khai giải pháp này, chỉ cần hướng mã ứng dụng web của bạn tham chiếu đến tệp pico.min.css được biên dịch trước do CDN lưu trữ, nhờ đó tạo điều kiện tích hợp liền mạch mà nhà phát triển cần nỗ lực tối thiểu.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Một cách tiếp cận khác liên quan đến việc sử dụng Trình quản lý gói nút (NPM) để cài đặt PicoCSS. Tuy nhiên, điều cần thiết là đảm bảo rằng Node.js đã được cài đặt thành công trên hệ thống của bạn trước khi tiếp tục. Để xác minh xem Node.js có trên thiết bị của bạn hay không, hãy thực hiện lệnh sau trong terminal hoặc dấu nhắc lệnh:
node -v
Nếu có cài đặt Node.js trong hệ thống, giao diện dòng lệnh sẽ hiển thị thông tin phiên bản của nó. Trong trường hợp không có phần mềm này, bạn có thể tìm hướng dẫn để lấy và thiết lập Node.js trên thiết bị máy tính của mình. Để cài đặt Pico CSS, hãy thực hiện các bước sau:
npm install @picocss/pico
Tạo trang web bằng Pico CSS
Khi thiết lập thiết kế trang web của bạn, Pico CSS cung cấp hai cách phân loại riêng biệt, đó là “vùng chứa” và “lưới”. Để bắt đầu quá trình này, vui lòng tạo một thư mục mới và trong đó, tạo một tài liệu có tên “index.htm” cũng như một tài liệu khác có tên “style.css”. Trong tệp “index.htm”, vui lòng kết hợp mã mẫu cơ bản tiếp theo:
<!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="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
Việc triển khai hệ thống Grid trong Pico CSS thể hiện đặc tính tối giản. Việc chỉ định các lưới có thể được thực hiện bằng cách sử dụng tên gọi lớp"lưới". Đáng chú ý, trong Pico CSS, các cột lưới được hợp nhất khi có sự hiện diện của các thiết bị có chiều rộng màn hình dưới ngưỡng 992 pixel.
Bên dưới phần tử # trong phần của tệp index.htm, hãy tạo một lưới bao gồm bốn cột.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Để đạt được định dạng phù hợp cho từng phần tử div trong lưới, điều cần thiết là phải gán cả hai lớp"vùng chứa"và"thẻ"cho từng div tương ứng. Cái trước, được ký hiệu là"vùng chứa", sở hữu các thuộc tính vốn có của việc căn giữa nội dung được xem thông qua liên kết của nó với khung CSS Pico. Sau đó, kết hợp dữ liệu hoặc thông tin có liên quan trong cấu trúc dạng lưới bằng cách sử dụng cú pháp và phương pháp thích hợp, dẫn đến bố cục có tổ chức tương tự như ví dụ được cung cấp bên dưới:
<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>
Để sửa đổi giao diện trang web của chúng tôi, chúng tôi phải truy cập tệp style.css và kết hợp đoạn mã được cung cấp. Điều này sẽ cho phép chúng tôi tùy chỉnh các khía cạnh khác nhau trong phần trình bày trực quan của trang web, chẳng hạn như kiểu phông chữ, màu sắc và bố cục.
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 tải trang web trong giao diện trình duyệt của bạn, người dùng sẽ nhận thấy các yếu tố sau được hiển thị nổi bật trên màn hình:
Cách sử dụng các nút trong Pico CSS
Pico CSS cung cấp một loạt các phần tử HTML được thiết kế sẵn và các khối xây dựng, với một trong những phần tử được sử dụng thường xuyên nhất là nút phổ biến trong thiết kế web.
Bằng cách sử dụng Pico CSS, phần tử nút được chế tạo để thể hiện thiết kế và giao diện đồng nhất trên nhiều trình duyệt web khác nhau. Việc kết hợp phần tử này bao gồm việc chèn nó vào trong mã HTML của một người, tương tự như các thông lệ tiêu chuẩn khác:
<button>This is a button</button>
Để ghi đè thuộc tính mặc định của Pico CSS trong đó các nút mở rộng để chiếm toàn bộ chiều rộng của vùng chứa chính của chúng, điều cần thiết là gán thuộc tính “vai trò” cho bất kỳ phần tử HTML nội tuyến nào và đặt giá trị của nó thành “nút”.
<a href="https.//www.google.com" role="button">Go To Google</a>
Cách sử dụng Tiện ích tải trong Pico CSS
Khi sử dụng Pico CSS, việc đặt thuộc tính aria-busy thành “true” trên một phần tử sẽ giới thiệu chỉ báo tải theo mặc định. Điều này có thể hữu ích trong trường hợp một người muốn thông báo cho người dùng về việc không thể tương tác với một phần tử cụ thể hoặc khi trình duyệt đang truy xuất một tài nguyên cụ thể.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Mã nói trên dự kiến sẽ tạo ra kết quả sau:
Cách sử dụng Chú giải công cụ trong Pico CSS
Pico CSS đơn giản hóa quy trình triển khai chú giải công cụ bằng cách cung cấp giải pháp hiệu quả và thân thiện với người dùng. Với khung này, người dùng có thể dễ dàng tạo các chú giải công cụ trên nhiều yếu tố khác nhau mà không yêu cầu kiến thức nâng cao về JavaScript hoặc các ngôn ngữ lập trình khác. Để thiết lập chú giải công cụ bằng Pico CSS, chỉ phải áp dụng hai thông số kỹ thuật:
Định nghĩa được cung cấp mô tả một phần tử chú giải công cụ trong HTML, xác định rằng phần tử này chứa một thuộc tính gọi là “data-tooltip” xác định nội dung của nó.
Thuộc tính data-placement trong Bootstrap được sử dụng để chỉ định vị trí của chú giải công cụ trên trang web. Có bốn giá trị có thể được gán cho thuộc tính này, bao gồm “trên cùng”, “phải”, “dưới cùng” và “trái”. Các giá trị này xác định vị trí chú giải công cụ sẽ xuất hiện so với phần tử kích hoạt hoặc phần tử đích của nó.
Ví dụ được cung cấp minh họa quy trình sử dụng công cụ này một cách ngắn gọn, làm sáng tỏ ứng dụng thực tế của nó.
<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>
Khi chạy chương trình trong trình duyệt web, người ta sẽ quan sát đầu ra sau:
Đàn accordions trong Pico CSS
Việc sử dụng phần tử trong khung CSS Pico cho phép triển khai chức năng cho phép người dùng điều khiển khả năng hiển thị của các phần nội dung thông qua mở rộng và thu hẹp, giống như hành động được thực hiện trên một nhạc cụ đàn accordion trong đó các phân đoạn của nó được mở rộng hoặc nén.
<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 kết xuất mã HTML này, trình duyệt phải cung cấp một giao diện để chuyển đổi khả năng hiển thị nội dung của nó, trong trường hợp này được biểu thị bằng một mũi tên giảm dần được ký hiệu trong một hình tam giác:
Khi Nào Bạn Nên Sử Dụng CSS Framework
Việc sử dụng các khung CSS có thể đẩy nhanh chu kỳ phát triển bằng cách loại bỏ nhu cầu về các yếu tố thiết kế dư thừa, cho phép các nhà phát triển tập trung nỗ lực vào các khía cạnh phức tạp hơn của ứng dụng. Nếu một người mong muốn bảo tồn tài nguyên và tận dụng lợi ích do các khuôn khổ này mang lại, thì nên kết hợp chúng vào dự án.
Việc sử dụng các khung cung cấp một tập hợp các mẫu kiểu dáng CSS, hệ thống lưới và các khối xây dựng được xác định trước cho phép các nhà phát triển tập trung vào logic và chức năng cơ bản của các ứng dụng của họ. Vô số khung CSS được đi kèm với các tài liệu tham khảo toàn diện và sự hỗ trợ rộng rãi của cộng đồng, chứng tỏ đây là một nguồn tài nguyên không thể thiếu khi đối mặt với bất kỳ trở ngại hoặc thách thức nào trên đường đi.