Guide du débutant pour l’utilisation de Pico CSS

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 voulez 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.

Installation de 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, il vous suffit donc de pointer vers le fichier pico.min.css qui y est hébergé :

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 :

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 :

Création d’un site web avec Pico CSS

Lors de la mise en page de votre site web, Pico CSS met à votre disposition deux classes, conteneur et grille. Créez un nouveau dossier et dans ce dossier, créez une grille index.htm et un fichier style.css . Dans le fichier index.htm ajoutez le code boilerplate suivant :

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 l’élément grille . Dans Pico CSS, les colonnes de la grille se réduisent sur les appareils dont la largeur est inférieure à 992px.

Juste en dessous de la classe h1 dans la balise corps de la balise index.htm créez une grille à quatre colonnes.

Chaque div dans la grille doit avoir deux classes : conteneur et carte. La carte 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 :

Pour gérer le style, ouvrez la classe style.css et ajoutez ce qui suit :

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 dans Pico CSS permet de créer un bouton dont le style est cohérent d’un navigateur à l’autre. Pour l’utiliser, il suffit d’ajouter l’élément bouton comme d’habitude :

Par défaut, dans Pico CSS, les boutons occupent toute la largeur de leur conteneur. Si vous n’aimez pas ce comportement, veillez à définir l’élément rôle d’un élément HTML en ligne à « button » :

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 pratique si vous souhaitez indiquer à l’utilisateur qu’un élément n’est pas prêt à être utilisé ou que le navigateur est en train d’extraire une ressource.

Le code ci-dessus donnera le résultat suivant :

Comment utiliser les infobulles dans Pico CSS

Les infobulles peuvent être difficiles à mettre en œuvre, mais Pico CSS s’en charge. Il facilite la création d’une infobulle sur n’importe quel élément, sans qu’il soit nécessaire de recourir à un JavaScript sophistiqué. Lorsque vous créez une infobulle dans Pico CSS, vous devez utiliser deux attributs :

• data-tooltip: Cet attribut définit le contenu de l’infobulle.
• data-placement: 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 vous montre comment utiliser cet utilitaire :

Lorsque vous l’exécutez dans le navigateur, vous devriez voir ce qui suit :

Les accordéons 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 la balise détails pour mettre en œuvre cette fonctionnalité :

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 mise en forme d’une application web. Vous devriez envisager d’utiliser un cadre 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 vous retrouvez dans l’impasse.