CSS est une technologie de stylisation omniprésente et puissante, mais elle peut être difficile à utiliser. C’est pourquoi il existe des frameworks CSS comme TailwindCSS et des préprocesseurs comme Less CSS et Sass.
Mais parfois, ces frameworks ou « saveurs » CSS peuvent s’avérer inutiles pour le projet sur lequel vous travaillez. Parfois, vous avez besoin d’un framework qui offre des fonctionnalités essentielles pour styliser votre site web. C’est là que Pico CSS entre en jeu. Pico est un framework CSS minimal qui facilite le style des éléments HTML natifs.
Installer Pico CSS dans votre projet
La façon la plus courante d’installer Pico CSS dans votre projet est d’utiliser un réseau de diffusion de contenu (CDN). Pico CSS est disponible sur le CDN jsDelivr, donc tout ce que vous avez à faire est de pointer vers le fichier pico.min.css fichier hébergé ici :
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Vous pouvez également installer Pico CSS à l’aide du gestionnaire de paquets Node. Pour que cette méthode fonctionne, assurez-vous d’avoir installé Node.js sur votre machine. Vous pouvez confirmer la disponibilité de Node.js sur votre machine en exécutant :
node -v
Si Node.js est disponible, le terminal affichera sa version. Si vous ne l’avez pas installé, vous pouvez apprendre comment installer Node.js sur votre ordinateur. Installez Pico CSS en exécutant :
npm install @picocss/pico
Créer un site web avec Pico CSS
Lors de la mise en page de votre site Web, Pico CSS vous propose deux classes, conteneur et grille. Créez un nouveau dossier et dans ce dossier, créez un fichier index.htm fichier et a style.css . Dans le fichier index.htm ajoutez le code de base suivant :
<!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>
Système de grille CSS Pico
Le système de grille de Pico CSS est assez simple. Vous pouvez définir une grille à l’aide de la fonction grille classe. En Pico CSS, les colonnes de la grille se réduisent sur les appareils dont la largeur est inférieure à 992px.
Juste en dessous de l’élément h1 tag dans le corps de la index.htm créez une grille à quatre colonnes.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Chaque div dans la grille doit avoir deux classes : conteneur et carte. Les conteneur est une classe CSS native de Pico qui permet de centrer la fenêtre de visualisation. Ensuite, remplissez la grille avec un échantillon de contenu comme ceci :
<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>
Pour gérer le style, ouvrez le fichier style.css et ajoutez ce qui suit :
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: " -";
}
Lorsque vous ouvrez la page dans le navigateur, vous devriez voir ce qui suit :
Comment utiliser les boutons dans Pico CSS
Pico CSS offre une grande variété d’éléments et de composants HTML pré-stylisés. L’un des éléments les plus courants de tout site web est le bouton.
Traditionnellement, le rendu des boutons varie légèrement d’un navigateur à l’autre. Le bouton bouton dans Pico CSS crée un bouton dont le style est cohérent dans tous les navigateurs. Pour l’utiliser, il suffit d’ajouter l’élément bouton comme d’habitude :
<button>This is a button</button>
Par défaut, dans Pico CSS, les boutons occupent toute la largeur de leur conteneur. Si vous n’aimez pas ce comportement, assurez-vous de définir la propriété rôle sur un élément HTML en ligne à « button » :
<a href="https.//www.google.com" role="button">Go To Google</a>
Comment utiliser l’utilitaire de chargement dans Pico CSS
Dans Pico CSS, si vous définissez aria-busy à « true » sur n’importe quel élément, il ajoutera automatiquement un indicateur de chargement. Cette fonctionnalité peut s’avérer utile si vous souhaitez indiquer à l’utilisateur qu’un élément n’est pas prêt à être utilisé ou que le navigateur est en train de récupérer une ressource.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Le code ci-dessus donne le résultat suivant :
Les infobulles peuvent être difficiles à mettre en œuvre, mais Pico CSS s’en charge. Il permet de créer facilement une infobulle sur n’importe quel élément sans avoir recours à un JavaScript sophistiqué. Lorsque vous créez une infobulle dans Pico CSS, vous devez utiliser deux attributs :
- data-tooltip: Ceci définit le contenu de l’infobulle.
- placement des données: Cet attribut définit la position de l’infobulle. Cet attribut peut prendre l’une des quatre valeurs suivantes : « haut », « droite », « bas » et « gauche » : « haut », « droite », « bas » et « gauche ».
Le code suivant montre comment utiliser cet utilitaire :
<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>
Lorsque vous l’exécutez dans le navigateur, vous devriez voir ce qui suit :
Accordions dans Pico CSS
Les accordéons permettent aux utilisateurs d’alterner la visibilité des sections de contenu en les développant ou en les réduisant, de la même manière qu’un instrument de musique en accordéon se développe et se contracte. Pour mettre en œuvre cette fonctionnalité dans Pico CSS, utilisez l’élément détails élément :
<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>
Lorsqu’un navigateur affiche cette balise, il doit offrir un moyen d’afficher ou de masquer le contenu, dans ce cas, une flèche déroulante :
Quand utiliser un framework CSS ?
Les frameworks CSS peuvent vous aider à rationaliser le processus de construction et de stylisation d’une application web. Vous devriez envisager d’utiliser un framework CSS si vous souhaitez gagner du temps sur les tâches répétitives et tirer parti de composants préconstruits.
Les frameworks fournissent un ensemble de styles CSS, de grilles de mise en page et de composants préconçus, ce qui vous permet de vous concentrer sur la logique et les fonctionnalités de l’application. De nombreux frameworks CSS sont accompagnés d’une documentation complète et d’une assistance communautaire qui vous seront utiles si vous êtes bloqué.