Dieses schlanke Framework ist eine großartige Möglichkeit, ohne großen Aufwand attraktive Webseiten zu erstellen.

CSS ist eine allgegenwärtige, leistungsstarke Styling-Technologie, die jedoch schwierig zu handhaben sein kann. Aus diesem Grund stehen CSS-Frameworks wie TailwindCSS und Präprozessoren wie Less CSS und Sass zur Verfügung.

Aber manchmal können diese Frameworks oder CSS-„Varianten“ für das Projekt, an dem Sie arbeiten, übertrieben sein. Manchmal benötigen Sie ein Framework, das wesentliche Funktionen für die Gestaltung Ihrer Website bietet. Hier kommt Pico CSS ins Spiel. Pico ist ein minimales CSS-Framework, das die einfache Gestaltung nativer HTML-Elemente ermöglicht.

Installieren von Pico CSS in Ihrem Projekt

Der gängigste Weg, Pico CSS in Ihrem Projekt zum Laufen zu bringen, ist die Verwendung von a Content Delivery Network (CDN). Pico CSS ist auf dem jsDelivr-CDN verfügbar, Sie müssen also nur auf das verweisen pico.min.css dort gehostete Datei:

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

Alternativ können Sie Pico CSS mit installieren Knotenpaketmanager. Damit diese Methode funktioniert, stellen Sie sicher, dass Sie Node.js auf Ihrem Computer installiert haben. Sie können die Verfügbarkeit von Node.js auf Ihrem Computer bestätigen, indem Sie Folgendes ausführen:

node -v

Wenn Node.js verfügbar ist, zeigt das Terminal seine Version an. Wenn Sie es nicht installiert haben, Erfahren Sie, wie Sie Node.js auf Ihrem Computer zum Laufen bringen. Installieren Sie Pico CSS, indem Sie Folgendes ausführen:

npm install @picocss/pico

Erstellen einer Website mit Pico CSS

Beim Einrichten des Layouts für Ihre Website stellt Ihnen Pico CSS zwei Klassen zur Verfügung: Container Und Netz. Erstellen Sie einen neuen Ordner und erstellen Sie in diesem Ordner eine index.htm Datei und a style.css Datei. Im index.htm Fügen Sie in der Datei den folgenden Boilerplate-Code hinzu:

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>

Pico CSS Grid System

Das Grid-System in Pico CSS ist ziemlich schlicht. Mit dem können Sie ein Raster definieren Netz Klasse. In Pico CSS werden die Rasterspalten auf Geräten mit einer Breite unter 992 Pixel ausgeblendet.

Direkt darunter h1 Tag in der Körper des index.htm Erstellen Sie in der Datei ein Raster mit vier Spalten.

<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>

Jede div im Raster sollte zwei Klassen haben: Container Und Karte. Der Container Die Klasse ist eine native Pico-CSS-Klasse, die ein zentriertes Ansichtsfenster ermöglicht. Füllen Sie als Nächstes das Raster mit einigen Beispielinhalten wie diesem:

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

Um das Styling durchzuführen, öffnen Sie die style.css Datei und fügen Sie Folgendes hinzu:

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

Wenn Sie die Seite im Browser öffnen, sollten Sie Folgendes sehen:

So verwenden Sie Schaltflächen in Pico CSS

Pico CSS bietet eine große Auswahl an vorgefertigten HTML-Elementen und -Komponenten. Eines der häufigsten Elemente auf jeder Website ist der Button.

Traditionell stellen verschiedene Browser Schaltflächen etwas unterschiedlich dar. Der Taste -Element in Pico CSS erstellt eine Schaltfläche mit einheitlichem Stil in allen Browsern. Um es zu verwenden, fügen Sie einfach das hinzu Taste Element wie gewohnt:

<button>This is a buttonbutton>

Standardmäßig nehmen in Pico CSS Schaltflächen die gesamte Breite ihres Containers ein. Wenn Ihnen dieses Verhalten nicht gefällt, stellen Sie sicher, dass Sie es einstellen Rolle Attribut auf einem Inline-HTML-Element zu „button“:

<ahref="https.//www.google.com"role="button">Go To Googlea>

In Pico CSS, wenn Sie festlegen Arie-beschäftigt auf „true“ für ein beliebiges Element setzen, wird automatisch eine Ladeanzeige hinzugefügt. Diese Funktion kann nützlich sein, wenn Sie dem Benutzer mitteilen möchten, dass ein Element nicht für die Interaktion bereit ist oder dass der Browser eine Ressource abruft.

<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>

Der obige Code führt zu Folgendem:

Tooltips können schwierig zu implementieren sein, aber Pico CSS kümmert sich darum. Es macht es einfach, einen Tooltip für jedes Element zu erstellen, ohne dass dafür kompliziertes JavaScript erforderlich ist. Beim Erstellen eines Tooltips in Pico CSS müssen Sie zwei Attribute verwenden:

  • Daten-Tooltip: Dies definiert den Inhalt des Tooltips.
  • Datenplatzierung: Dies definiert die Position des Tooltips. Sie können dieses Attribut auf einen von vier Werten festlegen: „oben“, „rechts“, „unten“ und „links“.

Der folgende Code zeigt Ihnen, wie Sie dieses Dienstprogramm verwenden:

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

Wenn Sie es im Browser ausführen, sollten Sie Folgendes sehen:

Akkordeons in Pico CSS

Mit Accordions können Benutzer die Sichtbarkeit von Inhaltsabschnitten durch Erweitern oder Reduzieren umschalten, ähnlich wie ein Akkordeon-Musikinstrument sich ausdehnt und zusammenzieht. Um diese Funktionalität in Pico CSS zu implementieren, verwenden Sie die Einzelheiten 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>

Wenn ein Browser dieses Markup anzeigt, sollte er eine Möglichkeit bieten, den Inhalt anzuzeigen oder auszublenden, in diesem Fall einen Dropdown-Pfeil:

Wann sollten Sie ein CSS-Framework verwenden?

CSS-Frameworks können Ihnen helfen, den Prozess der Erstellung und Gestaltung einer Webanwendung zu optimieren. Sie sollten die Verwendung eines CSS-Frameworks in Betracht ziehen, wenn Sie bei sich wiederholenden Aufgaben Zeit sparen und vorgefertigte Komponenten nutzen möchten.

Frameworks bieten eine Reihe vorgefertigter CSS-Stile, Layoutraster und Komponenten, sodass Sie sich auf die Logik und Funktionalität der Anwendung konzentrieren können. Viele CSS-Frameworks verfügen über eine umfangreiche Dokumentation und Community-Unterstützung, die sich als nützlich erweisen wird, falls Sie einmal nicht weiterkommen.