Panduan Pemula untuk Menggunakan Pico CSS
Table of content:
CSS adalah teknologi penataan gaya yang kuat dan ada di mana-mana, tetapi sulit untuk dikerjakan. Inilah mengapa framework CSS seperti TailwindCSS dan preprosesor seperti Less CSS dan Sass tersedia.
Namun terkadang, kerangka kerja atau “rasa” CSS ini mungkin berlebihan untuk proyek yang sedang Anda kerjakan. Terkadang, Anda menginginkan kerangka kerja yang menawarkan fitur-fitur penting bagi Anda untuk menata situs web Anda. Di sinilah Pico CSS masuk. Pico adalah kerangka kerja CSS minimal yang memudahkan gaya elemen HTML asli.
Baca Juga:
Memasang Pico CSS di Proyek Anda
Cara paling umum untuk mengaktifkan dan menjalankan Pico CSS di proyek Anda adalah dengan menggunakan Content Delivery Network (CDN). Pico CSS tersedia di CDN jsDelivr, jadi yang perlu Anda lakukan hanyalah mengarahkan ke pico.min.css file yang dihosting di sana:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Atau, Anda dapat menginstal Pico CSS dengan Node Package Manager. Agar metode ini berfungsi, pastikan Anda telah menginstal Node.js di mesin Anda. Anda dapat mengonfirmasi ketersediaan Node.js di mesin Anda dengan menjalankan:
node -v
Jika Node.js tersedia, terminal akan menampilkan versinya. Jika Anda belum menginstalnya, Anda dapat mempelajari cara mengaktifkan dan menjalankan Node.js di komputer Anda. Instal Pico CSS dengan menjalankan:
npm install @picocss/pico
Membuat Situs Web Dengan Pico CSS
Saat menyiapkan tata letak untuk situs web Anda, Pico CSS memberi Anda dua kelas, wadah Dan kisi. Buat folder baru dan di folder itu, buat file index.htm berkas dan a style.css mengajukan. Dalam index.htm file, tambahkan kode boilerplate berikut:
<!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>
Sistem Pico CSS Grid
Sistem Grid di Pico CSS cukup sederhana. Anda dapat menentukan kisi dengan kisi kelas. Di Pico CSS, kolom grid diciutkan pada perangkat dengan lebar di bawah 992px.
Tepat di bawah h1 tag di tubuh dari index.htm file, buat kisi dengan empat kolom.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Setiap div di grid harus memiliki dua kelas: wadah Dan kartu. Itu wadah class adalah kelas Pico CSS asli yang memungkinkan viewport terpusat. Selanjutnya, isi grid dengan beberapa contoh konten seperti ini:
<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>
Untuk menangani penataan, buka file style.css file dan tambahkan berikut ini:
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: " -";
}
Ketika Anda membuka halaman di browser, Anda akan melihat yang berikut:
Cara Menggunakan Tombol di Pico CSS
Pico CSS menawarkan berbagai elemen dan komponen HTML pra-gaya. Salah satu elemen paling umum di situs web mana pun adalah tombol.
Secara tradisional, browser yang berbeda merender tombol sedikit berbeda. Itu tombol elemen di Pico CSS membuat tombol dengan gaya yang konsisten di seluruh browser. Untuk menggunakannya, cukup tambahkan tombol elemen seperti biasa:
<button>This is a button</button>
Secara default, di Pico CSS, tombol menggunakan seluruh lebar wadahnya. Jika Anda tidak menyukai perilaku ini, pastikan Anda mengaturnya peran atribut pada elemen HTML sebaris ke “tombol”:
<a href="https.//www.google.com" role="button">Go To Google</a>
Cara Menggunakan Utilitas Pemuatan di Pico CSS
Di Pico CSS, jika Anda mengatur aria-sibuk ke “benar” pada elemen apa pun, maka secara otomatis akan menambahkan indikator pemuatan. Anda mungkin menemukan fitur ini berguna jika Anda ingin berkomunikasi dengan pengguna bahwa beberapa elemen belum siap bagi mereka untuk berinteraksi dengannya, atau bahwa browser sedang mengambil beberapa sumber daya.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Kode di atas akan menghasilkan sebagai berikut:
Tip alat bisa rumit untuk diterapkan, tetapi Pico CSS menanganinya. Itu membuatnya mudah untuk membuat tooltip pada elemen apa pun tanpa perlu JavaScript yang mewah. Saat membuat tooltip di Pico CSS, ada dua atribut yang perlu Anda gunakan:
- data-tooltip: Ini mendefinisikan konten tooltip.
- penempatan data: Ini menentukan posisi tooltip. Anda dapat menyetel atribut ini ke salah satu dari empat nilai: “atas”, “kanan”, “bawah”, dan “kiri”.
Kode berikut menunjukkan cara menggunakan utilitas ini:
<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>
Ketika Anda menjalankannya di browser, Anda akan melihat yang berikut:
Akordeon di Pico CSS
Akordion memungkinkan pengguna mengalihkan visibilitas bagian konten dengan memperluas atau menciutkannya, mirip dengan cara alat musik akordeon mengembang dan menyusut. Untuk menerapkan fungsi ini di Pico CSS, gunakan detail elemen:
<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>
Saat browser menampilkan markup ini, browser harus menawarkan cara untuk menampilkan atau menyembunyikan konten, dalam hal ini, panah drop-down:
Kapan Anda Harus Menggunakan Framework CSS
Kerangka kerja CSS dapat membantu Anda merampingkan proses pembuatan dan gaya aplikasi web. Anda harus mempertimbangkan untuk menggunakan kerangka kerja CSS jika Anda ingin menghemat waktu untuk tugas berulang dan memanfaatkan komponen yang dibuat sebelumnya.
Frameworks menyediakan serangkaian gaya CSS, kisi tata letak, dan komponen yang telah dirancang sebelumnya, memungkinkan Anda berfokus pada logika dan fungsionalitas aplikasi. Banyak kerangka kerja CSS dilengkapi dengan dokumentasi ekstensif dan dukungan komunitas yang akan berguna jika Anda mengalami kebuntuan.
Artikel Terkait
