Questo framework snello è un ottimo modo per ottenere pagine Web attraenti senza troppi problemi.
I CSS sono una tecnologia di styling onnipresente e potente, ma può essere difficile lavorarci. Questo è il motivo per cui sono disponibili framework CSS come TailwindCSS e preprocessori come Less CSS e Sass.
Ma a volte, questi framework o "sapori" CSS possono essere eccessivi per il progetto su cui stai lavorando. A volte, desideri un framework che offra funzionalità essenziali per modellare il tuo sito web. È qui che entra in gioco Pico CSS. Pico è un framework CSS minimale che semplifica lo stile di elementi HTML nativi.
Installare Pico CSS nel tuo progetto
Il modo più comune per far funzionare Pico CSS nel tuo progetto è usare un file Rete per la distribuzione di contenuti (CDN). Pico CSS è disponibile sul CDN jsDelivr, quindi tutto ciò che devi fare è puntare al file pico.min.css file ospitato lì:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
In alternativa, puoi installare Pico CSS con il file Gestore pacchetti nodo. Affinché questo metodo funzioni, assicurati di aver installato Node.js sul tuo computer. Puoi confermare la disponibilità di Node.js sulla tua macchina eseguendo:
node -v
Se Node.js è disponibile, il terminale visualizzerà la sua versione. Se non lo hai installato, puoi imparare come far funzionare Node.js sul tuo computer. Installa Pico CSS eseguendo:
npm install @picocss/pico
Creazione di un sito web con Pico CSS
Quando imposti il layout per il tuo sito web, Pico CSS ti fornisce due classi, contenitore E griglia. Crea una nuova cartella e in quella cartella crea un file indice.htm file e un style.css file. Nel indice.htm file, aggiungere il seguente codice boilerplate:
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>
Sistema di griglia Pico CSS
Il Grid System in Pico CSS è piuttosto scarno. È possibile definire una griglia con il griglia classe. In Pico CSS, le colonne della griglia si comprimono sui dispositivi con una larghezza inferiore a 992 px.
Proprio sotto il h1 etichetta nel corpo del indice.htm file, creare una griglia con quattro colonne.
<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>
Ogni div nella griglia dovrebbe avere due classi: contenitore E carta. IL contenitore class è una classe Pico CSS nativa che abilita una finestra centrata. Successivamente, popola la griglia con alcuni contenuti di esempio come questo:
<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>
Per gestire lo stile, apri il file style.css file e aggiungere quanto segue:
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: " -";
}
Quando apri la pagina nel browser, dovresti vedere quanto segue:
Come utilizzare i pulsanti in Pico CSS
Pico CSS offre un'ampia varietà di elementi e componenti HTML pre-stilizzati. Uno degli elementi più comuni in qualsiasi sito Web è il pulsante.
Tradizionalmente, diversi browser visualizzano i pulsanti in modo leggermente diverso. IL pulsante elemento in Pico CSS crea un pulsante con uno stile coerente tra i browser. Per usarlo, aggiungi semplicemente il pulsante elemento come al solito:
<button>This is a buttonbutton>
Per impostazione predefinita, in Pico CSS, i pulsanti occupano l'intera larghezza del loro contenitore. Se non ti piace questo comportamento, assicurati di impostare il file ruolo attributo su un elemento HTML inline a "pulsante":
<ahref="https.//www.google.com"role="button">Go To Googlea>
In Pico CSS, se imposti aria-occupato su "true" su qualsiasi elemento, aggiungerà automaticamente un indicatore di caricamento. Potresti trovare utile questa funzionalità se desideri comunicare all'utente che alcuni elementi non sono pronti per interagire con esso o che il browser sta recuperando alcune risorse.
<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>
Il codice sopra risulterà quanto segue:
I tooltip possono essere complicati da implementare, ma Pico CSS se ne occupa. Semplifica la creazione di una descrizione comando su qualsiasi elemento senza la necessità di alcun JavaScript di fantasia. Quando crei un tooltip in Pico CSS, ci sono due attributi che devi usare:
- data-tooltip: Questo definisce il contenuto del tooltip.
- posizionamento dei dati: Questo definisce la posizione del tooltip. Puoi impostare questo attributo su uno dei quattro valori: "top", "right", "bottom" e "left".
Il codice seguente mostra come utilizzare questa utilità:
<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>
Quando lo esegui nel browser, dovresti vedere quanto segue:
Fisarmoniche in Pico CSS
Accordions consente agli utenti di alternare la visibilità delle sezioni di contenuto espandendole o comprimendole, in modo simile al modo in cui uno strumento musicale a fisarmonica si espande e si contrae. Per implementare questa funzionalità in Pico CSS, usa il file dettagli elemento:
<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>
Quando un browser visualizza questo markup, dovrebbe offrire un mezzo per mostrare o nascondere il contenuto, in questo caso, una freccia a discesa:
Quando dovresti usare un framework CSS
I framework CSS possono aiutarti a semplificare il processo di creazione e styling di un'applicazione web. Dovresti prendere in considerazione l'utilizzo di un framework CSS se desideri risparmiare tempo su attività ripetitive e sfruttare componenti predefiniti.
I framework forniscono una serie di stili CSS, griglie di layout e componenti predefiniti, consentendoti di concentrarti sulla logica e sulla funzionalità dell'applicazione. Molti framework CSS sono dotati di un'ampia documentazione e supporto della comunità che ti torneranno utili nel caso in cui ti trovi in difficoltà.
