Dit slanke raamwerk is een geweldige manier om zonder veel gedoe aantrekkelijke webpagina's te krijgen.
CSS is een alomtegenwoordige, krachtige stylingtechnologie, maar het kan moeilijk zijn om ermee te werken. Daarom zijn er CSS-frameworks zoals TailwindCSS en preprocessors zoals Less CSS en Sass beschikbaar.
Maar soms zijn deze kaders of CSS-"smaken" misschien overdreven voor het project waaraan u werkt. Soms wilt u een raamwerk dat essentiële functies biedt om uw website vorm te geven. Dit is waar Pico CSS om de hoek komt kijken. Pico is een minimaal CSS-framework dat het gemakkelijk maakt om native HTML-elementen op te maken.
Pico CSS installeren in uw project
De meest gebruikelijke manier om Pico CSS in uw project aan de gang te krijgen, is door een Netwerk voor inhoudslevering (CDN). Pico CSS is beschikbaar op de jsDelivr CDN, dus alles wat je hoeft te doen is wijzen naar het pico.min.css bestand dat daar wordt gehost:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Als alternatief kunt u Pico CSS installeren met de Node-pakketbeheerder. Om deze methode te laten werken, moet u ervoor zorgen dat u Node.js op uw computer hebt geïnstalleerd. U kunt de beschikbaarheid van Node.js op uw computer bevestigen door het volgende uit te voeren:
node -v
Als Node.js beschikbaar is, geeft de terminal de versie weer. Als u deze niet hebt geïnstalleerd, u kunt leren hoe u Node.js op uw computer kunt gebruiken. Installeer Pico CSS door het volgende uit te voeren:
npm install @picocss/pico
Een website maken met Pico CSS
Bij het opzetten van de lay-out voor uw website biedt Pico CSS u twee klassen, container En rooster. Maak een nieuwe map aan en maak in die map een index.htm bestand en een stijl.css bestand. In de index.htm bestand, voeg de volgende boilerplate-code toe:
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-systeem
Het rastersysteem in Pico CSS is behoorlijk kaal. U kunt een raster definiëren met de rooster klas. In Pico CSS vouwen de rasterkolommen samen op apparaten met een breedte van minder dan 992px.
Direct onder de h1 label in de lichaam van de index.htm bestand, maak een raster met vier kolommen.
<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>
Elk div in het raster moeten twee klassen hebben: container En kaart. De container class is een native Pico CSS-klasse die een gecentreerde viewport mogelijk maakt. Vul vervolgens het raster met wat voorbeeldinhoud zoals deze:
<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>
Om de styling af te handelen, opent u het stijl.css bestand en voeg het volgende toe:
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: " -";
}
Wanneer u de pagina in de browser opent, zou u het volgende moeten zien:
Knoppen gebruiken in Pico CSS
Pico CSS biedt een breed scala aan vooraf opgemaakte HTML-elementen en -componenten. Een van de meest voorkomende elementen op een website is de knop.
Traditioneel geven verschillende browsers knoppen iets anders weer. De knop element in Pico CSS creëert een knop met een consistente stijl in alle browsers. Om het te gebruiken, voegt u gewoon de knop onderdeel zoals gewoonlijk:
<button>This is a buttonbutton>
In Pico CSS nemen knoppen standaard de volledige breedte van hun container in beslag. Als je dit gedrag niet leuk vindt, zorg er dan voor dat je de rol attribuut op een inline HTML-element aan "knop":
<ahref="https.//www.google.com"role="button">Go To Googlea>
In Pico CSS, als je instelt aria-druk naar "true" voor elk element, zal het automatisch een laadindicator toevoegen. U vindt deze functie misschien handig als u de gebruiker wilt laten weten dat een bepaald element niet klaar is om ermee te werken, of dat de browser een bron aan het ophalen is.
<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>
Bovenstaande code resulteert in het volgende:
Tooltips kunnen lastig te implementeren zijn, maar daar zorgt Pico CSS voor. Het maakt het gemakkelijk om een tooltip te maken voor elk element zonder dat er fancy JavaScript nodig is. Bij het maken van een tooltip in Pico CSS zijn er twee attributen die u moet gebruiken:
- data-tooltip: Dit definieert de inhoud van de tooltip.
- data-plaatsing: Dit definieert de positie van de tooltip. U kunt dit kenmerk instellen op een van de volgende vier waarden: "top", "right", "bottom" en "left".
De volgende code laat zien hoe u dit hulpprogramma gebruikt:
<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>
Wanneer u het in de browser uitvoert, zou u het volgende moeten zien:
Accordeons in Pico CSS
Met accordeons kunnen gebruikers de zichtbaarheid van inhoudssecties wijzigen door ze uit te vouwen of samen te vouwen, vergelijkbaar met de manier waarop een accordeonmuziekinstrument uitzet en inkrimpt. Om deze functionaliteit in Pico CSS te implementeren, gebruikt u de details 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>
Wanneer een browser deze opmaak weergeeft, moet deze een manier bieden om de inhoud weer te geven of te verbergen, in dit geval een vervolgkeuzepijl:
Wanneer moet u een CSS-framework gebruiken?
CSS-frameworks kunnen u helpen het proces van het bouwen en vormgeven van een webtoepassing te stroomlijnen. Overweeg een CSS-framework te gebruiken als u tijd wilt besparen op repetitieve taken en gebruik wilt maken van vooraf gebouwde componenten.
Frameworks bieden een set vooraf ontworpen CSS-stijlen, lay-outrasters en componenten, zodat u zich kunt concentreren op de logica en functionaliteit van de toepassing. Veel CSS-frameworks worden geleverd met uitgebreide documentatie en community-ondersteuning die van pas zal komen als je ooit vastloopt.
