CSS, czyli Kaskadowe Arkusze Stylów, to wszechstronne i potężne narzędzie do projektowania wyglądu stron internetowych. Mimo to, praca z CSS może czasem stanowić wyzwanie. Właśnie dlatego powstały frameworki CSS, takie jak Tailwind CSS, oraz preprocesory, np. Less CSS i Sass, które mają ułatwić ten proces.
MUO WIDEO DNIA
PRZEWIŃ, ABY ZOBACZYĆ WIĘCEJ TREŚCI
Niekiedy jednak rozbudowane frameworki lub różne odmiany CSS mogą okazać się zbyt skomplikowane dla danego projektu. Zdarza się, że potrzebne jest proste narzędzie, które dostarczy jedynie podstawowych funkcji do nadania wyglądu witrynie. W takim przypadku z pomocą przychodzi Pico CSS. To minimalistyczny framework, który upraszcza proces stylizacji standardowych elementów HTML.
Instalacja Pico CSS w projekcie
Najczęściej Pico CSS jest wdrażany w projektach za pośrednictwem sieci CDN (Content Delivery Network). Pico CSS jest dostępny w usłudze jsDelivr, wystarczy więc odwołać się do pliku pico.min.css, który jest tam hostowany:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
Alternatywnym rozwiązaniem jest instalacja Pico CSS przy użyciu menedżera pakietów Node. Aby skorzystać z tej metody, upewnij się, że masz zainstalowane środowisko Node.js na swoim komputerze. Sprawdzenie, czy Node.js jest dostępne, można przeprowadzić, wpisując w terminalu następującą komendę:
node -v
Jeśli Node.js jest zainstalowane, terminal wyświetli jego wersję. W przeciwnym razie, warto zapoznać się z instrukcją instalacji Node.js na swoim systemie. Aby zainstalować Pico CSS za pomocą npm, użyj komendy:
npm install @picocss/pico
Tworzenie strony internetowej z Pico CSS
W zakresie budowy układu strony, Pico CSS oferuje dwie klasy: „container” oraz „grid”. Utwórz nowy katalog, a w nim umieść pliki index.htm oraz style.css. W pliku index.htm wklej poniższy szablon kodu:
<!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>Strona z Pico</title> </head> <body> <div class="container"> <h1>Artykuły warte przeczytania...</h1> </div> </body> </html>
System siatki w Pico CSS
Mechanizm siatki w Pico CSS jest nieskomplikowany. Definiuje się ją za pomocą klasy „grid”. W Pico CSS, kolumny siatki przechodzą w układ jednowymiarowy na ekranach o szerokości mniejszej niż 992 piksele.
Tuż pod nagłówkiem h1 w pliku index.htm utwórz siatkę z czterema kolumnami:
<div class="grid"> <div></div> <div></div> <div></div> <div></div> </div>
Każdy element div w siatce powinien mieć przypisane dwie klasy: „container” oraz „card”. Klasa „container” jest standardową klasą Pico CSS, która pozwala na wyśrodkowanie zawartości. Następnie wypełnij siatkę przykładową treścią, jak w przykładzie poniżej:
<div class="grid"> <div class="container card"> <img src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg" /> <h4 class="title">Dlaczego ptaki śpiewają o poranku?</h4> <div class="metadata"> <span>David Uzondu</span> <span>13 minut temu</span> </div> </div><div class="container card"> <img src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg" /> <h4 class="title">Sekretne życie kaczątek</h4> <div class="metadata"> <span>Sam Holland</span> <span>53 minuty temu</span> </div> </div>
<div class="container card"> <img src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg" /> <h4 class="title">Nowa misja NASA: Wysyłamy zwolenników płaskiej Ziemi na
krawędź Ziemi, aby udowodnić im, że się mylą</h4> <div class="metadata"> <span>Simon Peterson</span> <span>Godzinę temu</span> </div> </div><div class="container card"> <img src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg" /> <h4 class="title">Lokalna Babcia wygrywa międzynarodową bitwę hip-hopową,
udowadniając, że wiek to tylko liczba</h4> <div class="metadata"> <span>Anonim</span> <span>2 dni temu</span> </div> </div> </div>W celu dodania stylizacji, otwórz plik style.css i wklej poniższy kod:
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: " -"; }Po otwarciu strony w przeglądarce, powinieneś zobaczyć taki efekt:
Jak wykorzystać przyciski w Pico CSS
Pico CSS oferuje szeroki wachlarz gotowych elementów i komponentów HTML. Jednym z najczęściej używanych elementów na każdej stronie internetowej jest przycisk.
Zazwyczaj różne przeglądarki renderują przyciski w nieco odmienny sposób. W Pico CSS element przycisku generuje spójny wygląd we wszystkich przeglądarkach. Aby go użyć, wystarczy dodać standardowy element przycisku:
<button>To jest przycisk</button>Domyślnie, przyciski w Pico CSS zajmują pełną szerokość swojego kontenera. Jeżeli preferujesz inne zachowanie, przypisz atrybut „role” o wartości „button” do wybranego elementu HTML:
<a href="https.//www.google.com" role="button">Przejdź do Google</a>Jak korzystać z funkcji ładowania w Pico CSS
W Pico CSS, ustawienie atrybutu „aria-busy” na wartość „true” dla dowolnego elementu automatycznie aktywuje wskaźnik ładowania. Ta funkcja może być przydatna, gdy chcesz zasygnalizować użytkownikowi, że element nie jest gotowy do interakcji lub że przeglądarka pobiera zasoby.
<a href="#" aria-busy="true">Generowanie hasła jednorazowego, proszę czekać…</a>Powyższy kod spowoduje wyświetlenie:
Podpowiedzi mogą być trudne do wdrożenia, ale Pico CSS ułatwia to zadanie. Umożliwia dodawanie podpowiedzi do dowolnego elementu bez konieczności pisania skomplikowanego kodu JavaScript. Aby utworzyć podpowiedź w Pico CSS, należy użyć dwóch atrybutów:
- data-tooltip: Określa treść podpowiedzi.
- data-placement: Ustawia położenie podpowiedzi. Atrybut może przyjąć jedną z czterech wartości: „top” (góra), „right” (prawo), „bottom” (dół) oraz „left” (lewo).
Poniższy kod demonstruje, jak korzystać z tej funkcji:
<button data-tooltip="Góra" data-placement="top">Góra</button> <button data-tooltip="Prawo" data-placement="right">Prawo</button> <button data-tooltip="Dół" data-placement="bottom">Dół</button> <button data-tooltip="Lewo" data-placement="left">Lewo</button>
Po otwarciu strony w przeglądarce powinieneś zobaczyć taki efekt:
Akordeony w Pico CSS
Akordeony umożliwiają użytkownikom przełączanie widoczności sekcji treści poprzez ich rozwijanie i zwijanie, analogicznie do działania instrumentu muzycznego. Aby zaimplementować tę funkcję w Pico CSS, użyj elementu „details”:
<details> <summary>To jest akordeon</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>
Przeglądarka, interpretując ten kod, powinna umożliwić wyświetlanie lub ukrywanie treści, prezentując strzałkę rozwijania:
Kiedy warto używać frameworka CSS
Frameworki CSS mogą usprawnić proces tworzenia i projektowania aplikacji internetowych. Użycie frameworka CSS jest wskazane, gdy zależy Ci na oszczędności czasu podczas wykonywania powtarzalnych zadań oraz na wykorzystaniu gotowych komponentów.
Frameworki zapewniają zestaw predefiniowanych stylów CSS, siatek układu i komponentów, co pozwala skoncentrować się na logice i funkcjonalności aplikacji. Dodatkowo, wiele frameworków CSS posiada obszerną dokumentację oraz aktywne społeczności użytkowników, które mogą być nieocenioną pomocą w razie napotkania trudności.
newsblog.pl