Ce cadre mince est un excellent moyen d'obtenir des pages Web attrayantes sans trop de tracas.
CSS est une technologie de style omniprésente et puissante, mais il peut être difficile de travailler avec. C'est pourquoi des frameworks CSS comme TailwindCSS et des préprocesseurs comme Less CSS et Sass sont disponibles.
Mais parfois, ces frameworks ou "saveurs" CSS peuvent être exagérés pour le projet sur lequel vous travaillez. Parfois, vous voulez un cadre qui offre des fonctionnalités essentielles pour styliser votre site Web. C'est là qu'intervient Pico CSS. Pico est un framework CSS minimal qui facilite le style des éléments HTML natifs.
Installation de Pico CSS dans votre projet
La façon la plus courante de faire fonctionner Pico CSS dans votre projet consiste à utiliser un Réseau de diffusion de contenu (CDN). Pico CSS est disponible sur le CDN jsDelivr, il vous suffit donc de pointer vers le pico.min.css fichier hébergé ici :
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Alternativement, vous pouvez installer Pico CSS avec le Gestionnaire de packages de nœuds. 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 à faire fonctionner 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 configuration de la mise en page de votre site Web, Pico CSS vous propose deux classes, récipient et grille. Créez un nouveau dossier et dans ce dossier, créez un index.htm dossier et un style.css déposer. Dans le index.htm fichier, ajoutez le code passe-partout suivant :
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>
Système de grille Pico CSS
Le système de grille dans Pico CSS est plutôt simple. Vous pouvez définir une grille avec le grille classe. Dans Pico CSS, les colonnes de la grille s'effondrent sur les appareils d'une largeur inférieure à 992 pixels.
Juste en dessous de la h1 balise dans le corps de la index.htm fichier, créez une grille à quatre colonnes.
<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>
Chaque div dans la grille devrait avoir deux classes: récipient et carte. Le récipient est une classe Pico CSS native qui active une fenêtre d'affichage centrée. Ensuite, remplissez la grille avec un exemple de contenu comme celui-ci :
<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>
Pour gérer le style, ouvrez le style.css fichier 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é-stylés. L'un des éléments les plus courants de tout site Web est le bouton.
Traditionnellement, différents navigateurs rendent les boutons légèrement différemment. Le bouton L'élément dans Pico CSS crée un bouton avec un style cohérent dans tous les navigateurs. Pour l'utiliser, il suffit d'ajouter le bouton élément comme d'habitude :
<button>This is a buttonbutton>
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 le rôle attribut sur un élément HTML en ligne à "bouton":
<ahref="https.//www.google.com"role="button">Go To Googlea>
Dans Pico CSS, si vous définissez aria-occupé à "true" sur n'importe quel élément, il ajoutera automatiquement un indicateur de chargement. Vous pouvez trouver cette fonctionnalité pratique si vous souhaitez informer l'utilisateur qu'un élément n'est pas prêt pour qu'il interagisse avec lui, ou que le navigateur récupère une ressource.
<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>
Le code ci-dessus donnera le résultat suivant :
Les info-bulles peuvent être difficiles à mettre en œuvre, mais Pico CSS s'en charge. Cela facilite la création d'une info-bulle sur n'importe quel élément sans avoir besoin de JavaScript sophistiqué. Lors de la création d'une info-bulle dans Pico CSS, vous devez utiliser deux attributs :
- info-bulle de données: Cela définit le contenu de l'info-bulle.
- placement de données: Cela définit la position de l'info-bulle. Vous pouvez définir cet attribut sur l'une des quatre valeurs suivantes: "top", "right", "bottom" et "left".
Le code suivant vous montre comment utiliser cet utilitaire :
<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>
Lorsque vous l'exécutez dans le navigateur, vous devriez voir ce qui suit :
Accordéons en Pico CSS
Les accordéons permettent aux utilisateurs de basculer 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 accordéon se développe et se contracte. Pour implémenter cette fonctionnalité dans Pico CSS, utilisez le détails élément:
<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>
Lorsqu'un navigateur affiche ce balisage, il doit offrir un moyen d'afficher ou de masquer le contenu, dans ce cas, une flèche déroulante :
Quand devriez-vous utiliser un framework CSS
Les frameworks CSS peuvent vous aider à rationaliser le processus de création 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 des composants prédéfinis.
Les frameworks fournissent un ensemble de styles CSS, de grilles de mise en page et de composants préconçus, vous permettant 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'un support communautaire qui vous seront utiles au cas où vous seriez bloqué.
