Przewodnik dla początkujących dotyczący korzystania z Pico CSS

Alicia Brunner included in Programming Html Css Web Development Web Design

2023-08-18 1241 words 6 minutes

Contents

Kaskadowe arkusze stylów (CSS) to wszechobecny i solidny język wizualny, który pozwala na dostosowanie wyglądu elementów HTML, jednak jego wdrożenie może stanowić wyzwanie. Aby złagodzić te trudności, programiści opracowali ramy CSS, takie jak TailwindCSS, oraz technologie przetwarzania wstępnego, w tym Less CSS i Sass.

Pico CSS to usprawnione podejście do stylizacji stron internetowych, które zapewnia tylko niezbędne narzędzia i funkcje do poprawy estetyki bez narzucania nadmiernej złożoności projektom. Pozwala użytkownikom pracować z podstawowymi komponentami HTML i bez wysiłku stosować niestandardowe style.

Instalowanie Pico CSS w Twoim projekcie

Jedno ze standardowych podejść do integracji Pico CSS z projektem polega na wykorzystaniu sieci dostarczania treści (CDN). Takie podejście wymaga wykorzystania dostawcy usług CDN, który hostuje pliki Pico CSS, takiego jak jsDelivr. Aby zaimplementować to rozwiązanie, po prostu skieruj kod swojej aplikacji internetowej tak, aby odwoływał się do prekompilowanego pliku pico.min.css hostowanego przez CDN, ułatwiając w ten sposób bezproblemową integrację przy minimalnym wysiłku ze strony programistów.

 <link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>

Alternatywne podejście polega na wykorzystaniu Menedżera pakietów węzłów (NPM) do zainstalowania PicoCSS. Jednak przed kontynuowaniem należy upewnić się, że Node.js został pomyślnie zainstalowany w systemie. Aby sprawdzić, czy Node.js jest obecny na twoim urządzeniu, wykonaj następujące polecenie w terminalu lub wierszu polecenia:

 node -v

Jeśli w systemie jest zainstalowana instalacja Node.js, interfejs wiersza poleceń wyświetli informacje o wersji. W przypadku braku tego oprogramowania można uzyskać wskazówki dotyczące uzyskiwania i konfigurowania Node.js na swoim urządzeniu komputerowym. Aby zainstalować Pico CSS, wykonaj następujące kroki:

 npm install @picocss/pico

Tworzenie strony internetowej za pomocą Pico CSS

Przy ustalaniu projektu Twojej strony internetowej, Pico CSS oferuje dwie charakterystyczne klasyfikacje, a mianowicie „kontener” i „siatka”. Aby zainicjować ten proces, uprzejmie stwórz nowy katalog iw nim wygeneruj dokument o nazwie „index.htm” oraz inny o nazwie „style.css”. W pliku „index.htm” proszę umieścić następujący podstawowy kod szablonu:

 <!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>

System siatki Pico CSS

Implementacja systemu Grid w ramach Pico CSS ma minimalistyczny charakter. Oznaczenie siatek może być dokonane poprzez zastosowanie nazwy klasowej „grid”. Warto zauważyć, że w Pico CSS kolumny siatki podlegają konsolidacji w przypadku obecności urządzeń o szerokości ekranu poniżej progu 992 pikseli.

Poniżej elementu # w sekcji pliku index.htm utwórz siatkę składającą się z czterech kolumn.

 <div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

W celu uzyskania odpowiedniego formatowania dla każdego elementu div w siatce, konieczne jest przypisanie obu klas „kontener” i „karta” do każdego odpowiedniego elementu div. Ten pierwszy, oznaczony jako „kontener”, posiada nieodłączne właściwości centrowania oglądanej treści poprzez powiązanie z frameworkiem Pico CSS. Następnie włącz odpowiednie dane lub informacje w strukturę siatkową, stosując odpowiednią składnię i metodologię, w wyniku czego uzyskasz zorganizowany układ podobny do poniższego przykładu:

 <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>

Aby zmodyfikować wygląd naszej strony internetowej, musimy uzyskać dostęp do pliku style.css i dołączyć dostarczony fragment kodu. Umożliwi nam to dostosowanie różnych aspektów wizualnej prezentacji naszej strony internetowej, takich jak style czcionek, kolory i układ.

 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: " -";
}

Oczekuje się, że po załadowaniu strony internetowej w interfejsie przeglądarki użytkownik dostrzeże następujące elementy wyświetlane w widocznym miejscu na ekranie:

Jak używać przycisków w Pico CSS

Pico CSS zapewnia szeroką gamę wstępnie zaprojektowanych elementów HTML i bloków konstrukcyjnych, z których jednym z najczęściej używanych jest wszechobecny przycisk w projektowaniu stron internetowych.

Wykorzystując Pico CSS, element przycisku jest tworzony w taki sposób, aby prezentował jednolity projekt i wygląd w różnych przeglądarkach internetowych. Włączenie tego elementu polega na umieszczeniu go w swoim kodzie HTML, podobnie jak w przypadku innych standardowych praktyk:

 <button>This is a button</button>

Aby zastąpić domyślną właściwość Pico CSS, zgodnie z którą przyciski rozwijają się, zajmując całą szerokość ich kontenera nadrzędnego, konieczne jest przypisanie atrybutu „role” do dowolnego wbudowanego elementu HTML i ustawienie jego wartości na „button”.

 <a href="https.//www.google.com" role="button">Go To Google</a>

Jak korzystać z narzędzia ładowania w Pico CSS

Podczas korzystania z Pico CSS ustawienie atrybutu aria-busy na wartość „true” dla elementu służy do domyślnego wprowadzenia wskaźnika ładowania. Może to być przydatne w przypadkach, gdy chce się poinformować użytkownika o niedostępności interakcji z określonym elementem lub gdy przeglądarka pobiera określony zasób.

 <a href="#" aria-busy="true">Generating One-Time Password, please wait&hellip;</a>

Oczekuje się, że wyżej wymieniony kod da następujący wynik:

Jak korzystać z podpowiedzi w Pico CSS

Pico CSS upraszcza proces wdrażania podpowiedzi, zapewniając wydajne i przyjazne dla użytkownika rozwiązanie. Dzięki tej strukturze użytkownicy mogą bez wysiłku generować podpowiedzi dotyczące różnych elementów bez konieczności posiadania zaawansowanej znajomości języka JavaScript lub innych języków programowania. Aby utworzyć podpowiedź za pomocą Pico CSS, należy zastosować tylko dwie specyfikacje:

Podana definicja opisuje element podpowiedzi w HTML, określając, że zawiera on atrybut o nazwie „data-tooltip”, który określa jego zawartość.

Atrybut data-placement w Bootstrap służy do określania położenia podpowiedzi na stronie internetowej. Istnieją cztery możliwe wartości, które można przypisać temu atrybutowi, w tym „góra”, „prawo”, „dół” i „lewo”. Te wartości określają, gdzie pojawi się podpowiedź względem elementu wyzwalającego lub elementu docelowego.

Podany przykład pokazuje procedurę wykorzystania tego narzędzia w zwięzły sposób, wyjaśniając jego praktyczne zastosowanie.

 <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>

Podczas uruchamiania programu w przeglądarce internetowej należy zwrócić uwagę na następujący wynik:

Akordeony w Pico CSS

Wykorzystanie elementu w ramach Pico CSS umożliwia implementację funkcjonalności, która pozwala użytkownikom manipulować widocznością sekcji treści poprzez rozszerzanie i zmniejszanie, podobnie jak działanie wykonywane na instrumencie muzycznym akordeonu, w którym jego segmenty są rozszerzane lub kompresowane.

 <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>

Podczas renderowania tego kodu HTML przeglądarka powinna udostępnić interfejs do przełączania widoczności jego zawartości, co w tym przypadku jest reprezentowane przez opadającą strzałkę symbolizowaną w trójkącie:

Kiedy należy używać struktury CSS

Wykorzystanie frameworków CSS może przyspieszyć cykl programowania, eliminując potrzebę stosowania zbędnych elementów projektu, umożliwiając programistom skupienie się na bardziej złożonych aspektach aplikacji. Jeśli ktoś chce oszczędzać zasoby i wykorzystać korzyści oferowane przez te ramy, wskazane jest włączenie ich do projektu.

Wykorzystanie frameworków zapewnia zbiór z góry określonych wzorców stylów CSS, systemów siatek i bloków konstrukcyjnych, co pozwala programistom skoncentrować się na podstawowej logice i funkcjonalności ich aplikacji. Mnóstwu frameworków CSS towarzyszą obszerne materiały referencyjne i szeroko zakrojona pomoc społeczności, okazując się niezbędnym zasobem w obliczu wszelkich przeszkód lub wyzwań na drodze.