PicoCSS : Un framework CSS pour les amoureux de la sémantique HTML

PicoCSS : Un framework CSS pour les amoureux de la sémantique HTML

Posté le 26/01/2024 | 1 commentaire dans Développement CSS | Retour à la liste

Table des matières

    1. Think different
    2. Pas de classe
    3. Mise en place
    4. Simplicité, légèreté et efficacité
    5. L'outil idéal ?

Aujourd'hui je voulais vous parler d'un petit framework CSS, PicoCSS.

Si je l'aime bien, celui-là, c'est parce qu'il n'utilise pas ou extrêmement peu de classes. Il est léger, sous license MIT, et si on connait Sass, assez facile à modifier.

Think different

Alors non, d'habitude, je n'aime vraiment pas ces bêtes là. Noms de classes à rallonge dans le genre Bootstrap et autres usines à gaz.
Ce que je leur reproche, c'est que le nom des classes utilisées définissent l'aspect du conteneur, genre :

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

Vous avez compris le principe.

Ici on a 2 problèmes :

  • is-white : Ici, on définit la couleur du bouton grâce à une classe, et pas à son contexte. Le problème c'est que si je construis une page sur fond noir, j'aurai tendance à utiliser ces boutons blancs. Si un jour me prend l'envie de balancer mon fond sombre et de passer en clair, soit je modifie mes is-white en is-black, soit je modifie la couleur des boutons blancs. Je me retrouve donc avec des boutons is-white qui sont noirs.
  • <button class="button" : Y'a rien qui choque là ? Il faut définir un bouton comme un bouton, et un input comme un input ? Qui est tenté par faire un <button class="div"> ? Les frameworks n'utilisent pas la sémantique HTML, et c'est un problème qui peut être simplifié.

Pas de classe

PicoCSS revendique n'utiliser presque aucune classe. Presque, car le système de grilles en a besoin, mais une version classless existe également.
Sa force à lui, c'est d'utiliser la sémantique. Pour styliser un bouton, il n'y a aucune classe à ajouter, seule la sémantique suffit :

<button>Texte</button>

Si vous voulez donner un style de bouton à un lien, toujours pas de classe, on utilise ce qui est disponible en HTML5 :

<a role="button">Lien bouton</a>

Et je peux vous garantir que ça fait la différence.
Sur une page simple, avec uniquement des tags HTML, le fait d'inclure le fichier css de Pico change toute la page :

<section id="preview">
    <h2>Preview</h2>
    <p>
        Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla
        iaculis eros a elit pharetra egestas.
    </p>
    <form>
        <input type="text" name="firstname" placeholder="First name" aria-label="First name" required />
        <input type="email" name="email" placeholder="Email address" aria-label="Email address" required />
        <fieldset>
            <label for="terms">
                <input type="checkbox" role="switch" id="terms" name="terms" />
                I agree to the <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
            </label>
        </fieldset>
        <button type="submit">Subscribe</button>
    </form>
</section>

Le rendu sans CSS :

Le rendu avec Pico, simplement en ajoutant la feuille de styles :

Simple et efficace non ?

Il vous laisse le soin d'ajouter vos propres classes. Par exemple, pour un bouton, on peut imaginer un button.error, que vous mettrez en rouge.

Mise en place

Si vous êtes plutôt du genre à tout héberger chez vous, vous pouvez récupérer les fichiers CSS compilés, et le mettre dans l'entête de votre site :

<link rel="stylesheet" href="css/pico.min.css">

Si vous êtes plus fainéants, il y a toujours la solution du CDN (par jsDelivr) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

Sinon, il est également disponible via npm et composer.

Simplicité, légèreté et efficacité

PicoCSS ne pèse que 10ko. Si l'on compare ça aux mastodontes, ça en fait un concurrent très léger.
Pour autant, ce framework CSS n'est pas en reste sur pas mal de points :

  • Mode clair / sombre
  • Complètement responsive (taille du texte incluse)
  • Conteneurs fluides
  • Système de grilles
  • ...

Je vous laisse lire la documentation de PicoCSS pour découvrir tout ça. Un générateur de thème simple est également présent, qui vous permettra de choisir la couleur dominante de votre site, si n'êtes pas fan du bleu ;)

A l'heure actuelle, une v2 est en préparation (la v2RC3 est déjà sortie). D'après les sources, les dévs restent dans le même esprit, à savoir la simplicité.

L'outil idéal ?

Alors non, bien sûr. Même si je n'en ai fait que des éloges, PicoCSS n'est pas la réponse à tout, et ne gère pas tout.

Si vous n'êtes pas à l'aise avec Sass, la modification du CSS sera tout simplement longue et barbante.
De plus, il n'y a pas de Javascript. Aussi, oubliez les menus dynamiques ou les animations trop hypes, mais pour un petit blog, un site léger, c'est l'outil parfait.

Max Koder
Max Koder

Développeur en mauvaise herbe, électronicien et bricoleur à mes heures de hobby perdues, compteur de grains de riz, tenteur de tiramisu, mais surtout papa.

Principal développeur de 299Ko, j'essaye de maintenir ce CMS qui me tient à coeur.

Commentaires

  • Charlesweeld | 03/03/2024

    Helpful info. Lucky me I found your web site by chance, and I'm stunned why this coincidence didn't came about earlier! I bookmarked it.
    look also at my pages and give a rating

    XEvil is a straightforward, rapidly and hassle-free system for thoroughly computerized recognition and bypass in the overwhelming majority of captchas (CAPTCHAs), without the have to have to attach any third-celebration expert services.

    This system Just about completely replaces providers such as AntiGate (Anti-Captcha), RuCaptcha, DeCaptcher and others. Simultaneously, it substantially exceeds them in recognition pace (10 situations or maybe more) and is completely no cost.

    https://acessy.wiki/index.php/User:JoeSear60351726 SpeedyIndex google скачать
    https://trudoteka.ru/speedyindex-google-promotion-101/ fast indexing of links meaning

    @d@=

Ajouter un commentaire