Le CSS est une technologie de mise en page à la fois très répandue et performante, mais son utilisation peut parfois s’avérer complexe. C’est la raison pour laquelle des frameworks CSS comme TailwindCSS, ainsi que des préprocesseurs tels que Less CSS et Sass, sont mis à disposition.
CONTENU VIDÉO DU JOUR
DÉFILEZ POUR ACCÉDER AU CONTENU
Cependant, il arrive que ces frameworks ou ces « variantes » de CSS soient trop complexes pour le projet en cours. Parfois, il suffit d’une structure qui propose des fonctions de base pour la mise en page d’un site web. C’est là qu’intervient Pico CSS. Pico est un framework CSS minimaliste qui simplifie la mise en forme des éléments HTML standards.
Intégration de Pico CSS dans votre projet
La méthode la plus courante pour utiliser Pico CSS dans votre projet est d’employer un réseau de diffusion de contenu (CDN). Pico CSS est hébergé sur le CDN jsDelivr, il suffit donc de faire pointer votre projet vers le fichier pico.min.css qui s’y trouve :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
Vous avez également la possibilité d’installer Pico CSS via le gestionnaire de paquets Node. Pour que cette option fonctionne, assurez-vous d’avoir installé Node.js sur votre machine. Vous pouvez vérifier la présence de Node.js sur votre ordinateur en saisissant la commande suivante :
node -v
Si Node.js est installé, le terminal affichera sa version. Dans le cas contraire, vous pouvez vous renseigner sur la manière d’installer Node.js sur votre système. Pour installer Pico CSS, tapez la commande :
npm install @picocss/pico
Création d’un site Web avec Pico CSS
Pour l’organisation de la structure de votre site web, Pico CSS propose deux classes, conteneur et grille. Créez un nouveau répertoire, et dans ce répertoire, créez un fichier index.htm et un fichier style.css. Dans le fichier index.htm, copiez le code HTML de base suivant :
<!DOCTYPE html>
<html lang="fr">
<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="https://wilku.top/a-beginners-guide-to-using-pico-css/style.css" />
<title>Site Pico</title>
</head>
<body>
<div class="container">
<h2>Articles intéressants à lire...</h2>
</div>
</body>
</html>
Système de grille Pico CSS
Le système de grille de Pico CSS est assez simple. Vous pouvez créer une grille en utilisant la classe « grille ». Dans Pico CSS, les colonnes de la grille sont réorganisées sur les appareils dont la largeur est inférieure à 992 pixels.
Juste après la balise h2 dans le corps du fichier index.htm, insérez une grille de quatre colonnes.
<div class="grid"> <div></div> <div></div> <div></div> <div></div> </div>
Chaque div de la grille doit être associée à deux classes : conteneur et carte. La classe conteneur est une classe native de Pico CSS qui active une zone d’affichage centrée. Ensuite, remplissez la grille avec un contenu de démonstration comme celui-ci :
<div class="grid">
<div class="container card">
<img src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg" />
<h4 class="title">Pourquoi les oiseaux chantent-ils le matin ?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>Il y a 13 minutes</span>
</div>
</div>
<div class="container card">
<img src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg" />
<h4 class="title">La vie secrète des canetons</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>Il y a 53 minutes</span>
</div>
</div>
<div class="container card">
<img src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg" />
<h4 class="title">Nouvelle mission de la NASA : Envoyer les platistes au bord de la Terre pour leur prouver qu'ils ont tort</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>Il y a 1 heure</span>
</div>
</div>
<div class="container card">
<img src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg" />
<h4 class="title">Une grand-mère locale remporte un concours international de danse hip-hop, prouvant que l'âge n'est qu'un chiffre</h4>
<div class="metadata">
<span>Anonyme</span>
<span>Il y a 2 jours</span>
</div>
</div>
</div>
Pour gérer le style, ouvrez le fichier style.css et ajoutez le code suivant :
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 obtenir l’affichage suivant :
Utilisation des boutons dans Pico CSS
Pico CSS propose une large gamme d’éléments et de composants HTML pré-stylisés. L’un des éléments les plus utilisés sur les sites web est le bouton.
Habituellement, les navigateurs affichent les boutons avec des styles légèrement différents. L’élément de bouton de Pico CSS génère un bouton dont le style est uniforme sur tous les navigateurs. Pour l’utiliser, ajoutez simplement l’élément bouton comme d’habitude :
<button>Ceci est un bouton</button>
Par défaut, dans Pico CSS, les boutons occupent toute la largeur de leur conteneur. Si vous ne souhaitez pas ce comportement, assurez-vous de définir l’attribut de rôle d’un élément HTML en ligne à « bouton » :
<a href="https.//www.google.com" role="button">Aller sur Google</a>
Utilisation de l’utilitaire de chargement dans Pico CSS
Dans Pico CSS, si vous définissez l’attribut aria-busy à « true » sur n’importe quel élément, un indicateur de chargement s’affichera automatiquement. Vous pouvez trouver cette fonctionnalité pratique si vous souhaitez indiquer à l’utilisateur qu’un élément n’est pas prêt à interagir, ou que le navigateur télécharge une ressource.
<a href="#" aria-busy="true">Génération du mot de passe temporaire, veuillez patienter…</a>
Le code ci-dessus produira le résultat suivant :
Les info-bulles peuvent être compliquées à mettre en œuvre, mais Pico CSS s’en occupe. Cela simplifie la création d’une info-bulle sur n’importe quel élément, sans avoir recours à du JavaScript complexe. Pour créer une info-bulle dans Pico CSS, vous devez utiliser deux attributs :
- data-tooltip : définit le contenu de l’info-bulle.
- data-placement : définit la position de l’info-bulle. Vous pouvez définir cet attribut avec l’une des quatre valeurs suivantes : « top », « right », « bottom » et « left ».
Le code ci-dessous illustre l’utilisation de cet utilitaire :
<button data-tooltip="Haut" data-placement="top">Haut</button> <button data-tooltip="Droite" data-placement="right">Droite</button> <button data-tooltip="Bas" data-placement="bottom">Bas</button> <button data-tooltip="Gauche" data-placement="left">Gauche</button>
Lorsque vous l’exécutez dans le navigateur, vous devriez observer ce qui suit :
Accordéons avec Pico CSS
Les accordéons permettent aux utilisateurs d’afficher ou de masquer des parties de contenu en les développant ou en les réduisant, à l’image d’un accordéon. Pour implémenter cette fonctionnalité dans Pico CSS, utilisez l’élément details :
<details>
<summary>Ceci est un accordéon</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>
Quand un navigateur affiche ce code, il devrait proposer un moyen d’afficher ou de masquer le contenu, dans ce cas précis, une flèche de déroulement :
Quand utiliser un framework CSS
Les frameworks CSS peuvent vous aider à rationaliser le processus de création et de mise en page d’une application web. Il est pertinent d’utiliser un framework CSS si vous souhaitez gagner du temps sur les tâches répétitives et profiter de composants pré-conçus.
Les frameworks proposent un ensemble de styles CSS, de grilles de mise en page et de composants prêts à l’emploi, 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 détaillée et d’un soutien communautaire qui peuvent s’avérer très utiles en cas de difficulté.