Aller au contenu principal

Pico.css

Comment installer Pico.css dans un projet Symfony

Qu'est-ce que Pico.css ?​

Pico.css est une bibliothèque CSS minimaliste qui permet de styliser rapidement une page Web avec un design épuré et moderne, sans avoir à écrire beaucoup de CSS personnalisé.

Comment l'installer dans Symfony ?​

Par défaut, Symfony charge déjà :

  • app.js
  • qui importe app.css
  • puis ce bundle est injecté dans base.html.twig via {{ importmap('app') }}
info

Pour utiliser Pico.css, nous avons 2 options :

  • soit charger Pico.css par CDN dans base.html.twig
  • soit l’intégrer dans app.css

Option 1 — Charger Pico.css par CDN​

La méthode la plus simple et la plus rapide : charger Pico.css par CDN dans le fichier de base de nos templates Twig

astuce

Pour récupérer le lien CDN de Pico.css, le plus simple consiste à consulter la documentation de Pico.css : https://picocss.com/docs

Une fois que vous avez l'URL du CDN de Pico.css, il suffit d'ajouter ce lien dans base.html.twig, dans le bloc stylesheets :

{% block stylesheets %}
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
    >
{% endblock %}

Exemple complet​

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>

        {% block stylesheets %}
            <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
            >
        {% endblock %}

        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

Avantages​

  • ultra simple
  • pas besoin d’installation supplémentaire
  • parfait pour tester vite

Inconvénient​

  • dépend d’un CDN externe

Option 2 — Intégrer Pico.css dans app.css​

Cette méthode est un peu plus longue à mettre en place, mais elle est la plus propre car elle permet de garder tout notre style centralisé dans app.css, et de ne pas dépendre d’un CDN externe.

Comme notre projet importe déjà app.css, nous pouvons y ajouter Pico.css puis nos propres surcharges.

Exemple​

Dans app.css :

@import url('https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css');

body {
    background-color: skyblue;
}

Ici :

  • Pico.css est chargé d’abord
  • notre CSS passe ensuite et peut le surcharger

Quand choisir cette option ?​

Si nous voulons garder tout notre style centralisé dans app.css.

Comment utiliser Pico.css dans un template​

Pico.css stylise bien les balises HTML sémantiques.

Par exemple dans index.html.twig :

{% extends '`base.html.twig`' %}

{% block title %}Accueil{% endblock %}

{% block body %}
    <main class="container">
        <h1>Bienvenue</h1>
        <p>Cette page utilise Pico.css dans Symfony.</p>

        <form>
            <label for="name">Nom</label>
            <input type="text" id="name" name="name" placeholder="Votre nom">

            <button type="submit">Envoyer</button>
        </form>
    </main>
{% endblock %}
info

Pico.css fonctionne très bien même si nous n’utilisons pas de classes CSS, mais il est recommandé d’utiliser la classe container sur le <main> pour un meilleur rendu.

Voici quelques-unes des balises HTML stylisées par Pico.css :

  • <main class="container">
  • <section>
  • <article>
  • <form>
  • <label>
  • <input>
  • <button>

Remarques​

Notre app.css contient actuellement :

body {
    background-color: skyblue;
}

Avec Pico.css, ce fond bleu risque de donner un rendu un peu étrange.

Nous pouvons le remplacer par quelque chose de plus discret, par exemple :

main.container {
    margin-top: 2rem;
}