Ta smukła platforma to świetny sposób na uzyskanie atrakcyjnych stron internetowych bez większych kłopotów.
CSS to wszechobecna, potężna technologia stylizacji, ale praca z nią może być trudna. Właśnie dlatego dostępne są frameworki CSS, takie jak TailwindCSS i preprocesory, takie jak Less CSS i Sass.
Ale czasami te frameworki lub „smaki” CSS mogą być przesadą dla projektu, nad którym pracujesz. Czasami potrzebujesz frameworka, który oferuje podstawowe funkcje do stylizowania Twojej witryny. Tutaj wkracza Pico CSS. Pico to minimalistyczny framework CSS, który ułatwia stylizowanie natywnych elementów HTML.
Instalowanie Pico CSS w Twoim projekcie
Najczęstszym sposobem uruchomienia Pico CSS w projekcie jest użycie pliku Sieć dostarczania treści (CDN). Pico CSS jest dostępny w jsDelivr CDN, więc wszystko, co musisz zrobić, to wskazać plik pico.min.css hostowany tam plik:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Alternatywnie możesz zainstalować Pico CSS z plikiem
Menedżer pakietów węzłów. Aby ta metoda zadziałała, upewnij się, że masz zainstalowany Node.js na swoim komputerze. Możesz potwierdzić dostępność Node.js na swoim komputerze, uruchamiając:node -v
Jeśli Node.js jest dostępny, terminal wyświetli jego wersję. Jeśli nie masz go zainstalowanego, możesz dowiedzieć się, jak uruchomić Node.js na swoim komputerze. Zainstaluj Pico CSS, uruchamiając:
npm install @picocss/pico
Tworzenie strony internetowej z Pico CSS
Podczas konfigurowania układu witryny Pico CSS zapewnia dwie klasy, pojemnik I siatka. Utwórz nowy folder iw tym folderze utwórz plik indeks.htm plik i A styl.css plik. w indeks.htm dodaj następujący kod wzorcowy:
html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<metaname="viewport"content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
<linkrel="stylesheet"href="style.css" />
<title>Pico Websitetitle>
head>
<body>
<divclass="container">
<h1>Articles Worth Reading...h1>
div>
body>
html>
System siatki Pico CSS
System siatki w Pico CSS jest dość prosty. Możesz zdefiniować siatkę za pomocą siatka klasa. W Pico CSS kolumny siatki zwijają się na urządzeniach o szerokości poniżej 992 pikseli.
Tuż pod h1 tagować w ciało z indeks.htm utwórz siatkę z czterema kolumnami.
<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>
Każdy dz w siatce powinien mieć dwie klasy: pojemnik I karta. The pojemnik class to natywna klasa Pico CSS, która umożliwia wyśrodkowanie widocznego obszaru. Następnie wypełnij siatkę przykładową zawartością, taką jak ta:
<divclass="grid">
<divclass="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4class="title">Why do birds sing in the morning?h4>
<divclass="metadata">
<span>David Uzonduspan>
<span>13 Minutes agospan>
div>
div><divclass="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4class="title">The Secret Life of Ducklingsh4>
<divclass="metadata">
<span>Sam Hollandspan>
<span>53 Minutes agospan>
div>
div><divclass="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4class="title">NASA's New Mission: Sending Flat-Earthers to
Edge of Earth to Prove Them Wrongh4>
<divclass="metadata">
<span>Simon Petersonspan>
<span>1 hour agospan>
div>
div>
<divclass="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4class="title">Local Grandma Wins International Hip-Hop Dance Battle,
Proves Age is Just a Numberh4>
<divclass="metadata">
<span>Anonymousspan>
<span>2 days agospan>
div>
div>
div>
Aby obsłużyć stylizację, otwórz plik styl.css plik i dodaj:
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ć:
Jak używać przycisków w Pico CSS
Pico CSS oferuje szeroką gamę wstępnie stylizowanych elementów i komponentów HTML. Jednym z najczęstszych elementów każdej strony internetowej jest przycisk.
Tradycyjnie różne przeglądarki renderują przyciski nieco inaczej. The przycisk element w Pico CSS tworzy przycisk o spójnym stylu we wszystkich przeglądarkach. Aby go użyć, po prostu dodaj przycisk Element jak zwykle:
<button>This is a buttonbutton>
Domyślnie w Pico CSS przyciski zajmują całą szerokość ich kontenera. Jeśli nie podoba ci się to zachowanie, upewnij się, że ustawiłeś rola atrybut wbudowanego elementu HTML na „button”:
<ahref="https.//www.google.com"role="button">Go To Googlea>
W Pico CSS, jeśli ustawisz aria-zajęty na „true” na dowolnym elemencie, automatycznie doda wskaźnik ładowania. Ta funkcja może się przydać, jeśli chcesz zakomunikować użytkownikowi, że jakiś element nie jest gotowy do interakcji z nim lub że przeglądarka pobiera jakiś zasób.
<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>
Powyższy kod spowoduje, że:
Podpowiedzi mogą być trudne do wdrożenia, ale Pico CSS sobie z tym radzi. Ułatwia tworzenie podpowiedzi na dowolnym elemencie bez potrzeby używania wymyślnego JavaScript. Tworząc podpowiedź w Pico CSS, musisz użyć dwóch atrybutów:
- data-tooltip: Określa zawartość podpowiedzi.
- umieszczanie danych: Określa położenie podpowiedzi. Możesz ustawić ten atrybut na jedną z czterech wartości: „top”, „right”, „bottom” i „left”.
Poniższy kod pokazuje, jak korzystać z tego narzędzia:
<buttondata-tooltip="Top"data-placement="top">Topbutton>
<buttondata-tooltip="Right"data-placement="right">Rightbutton>
<buttondata-tooltip="Bottom"data-placement="bottom">Bottombutton>
<buttondata-tooltip="Left"data-placement="left">Leftbutton>
Po uruchomieniu go w przeglądarce powinieneś zobaczyć:
Akordeony w Pico CSS
Akordeony pozwalają użytkownikom przełączać widoczność sekcji treści poprzez ich rozwijanie lub zwijanie, podobnie jak instrument muzyczny akordeon rozszerza się i kurczy. Aby zaimplementować tę funkcjonalność w Pico CSS, użyj pliku Detale element:
<details>
<summary>This is an accordionsummary>
<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>
Gdy przeglądarka wyświetla te znaczniki, powinna oferować możliwość pokazania lub ukrycia treści, w tym przypadku strzałkę rozwijaną:
Kiedy powinieneś używać CSS Framework
Ramy CSS mogą pomóc usprawnić proces tworzenia i stylizowania aplikacji internetowej. Powinieneś rozważyć użycie frameworka CSS, jeśli chcesz zaoszczędzić czas na powtarzalnych zadaniach i wykorzystać gotowe komponenty.
Frameworki zapewniają zestaw wstępnie zaprojektowanych stylów CSS, siatek układu i komponentów, co pozwala skupić się na logice i funkcjonalności aplikacji. Wiele frameworków CSS jest dostarczanych z obszerną dokumentacją i wsparciem społeczności, które przydają się, jeśli kiedykolwiek utkniesz.