Découvrir un framework CSS : Pico.CSS

Précédent
par : App UI

Découverte d'un framewok Css : Pico

Un framework CSS permet dans un cadre éprouvé, et d’appliquer un certain nombre de règles prédéfinies associées à une sémantique html et un système de class structuré.

À la recherche d’un framework minimal

Dans le cadre de certains projets, visant la performance maximale, ou dans certains cadres particuliers on peut être amené à utiliser différents frameworks malgré le fait que l’un d’eux domine très largement. Il existe donc des frameworks très complets, mais forcément plus lourds, pour découvrir les frameworks notre choix s’est porté sur Picoss un framework minimal d’à peine 10kb.

https://picocss.com/

Installer / Utiliser Pico CSS

À télécharger et dézipper

https://github.com/picocss/pico/archive/refs/heads/master.zip

Code à intégrer dans le head du html (fichier en local)

Code à intégrer dans le head du html (avec un CDN)

Html complet pour commencer

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/css/pico.min.css">
        <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
        <title>Premier essai avec Pico CSS</title> 
        </head>
        <body>
        <main class="container">
        <h1>Vous utilisez un framework CSS</h1>
        </main>
        </body>
        </html>

La responsivité avec Pico

Device	Extra small	Small	Medium	Large	Extra large
Breakpoint	<576px	≥576px	≥768px	≥992px	≥1200px
Viewport	100%	540px	720px	960px	1140px

Les thèmes

Pico est livré avec deux thèmes Light & Dark.

Les thèmes peuvent être forcés dès le document

ou sur un élément html spécifique

Les containers

Les conteneurs sont là pour encadrer le contenu dans le cadre du framework
.container active un conteneur centré .container-fluid active un affichage à 100% de la largeur

Code à intégrer

    <body>
    <main class="container"></main>
    </body>

Les grilles

Pico contient un système de grille minimaliste et automatique

Code à intégrer

        <div class="grid">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>

Une grille en html / css : qu’est-ce que c’est ?

Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web. La trame est constituée généralement de rangées (colonnes ou lignes). L'espace entre chaque ligne ou colonne est communément gouttière.

Typographie

Tous les éléments de typographie sont responsives automatiquement.

Device	Extra small	Small	Medium	Large	Extra large
Base font	16px	17px	18px	19px	20px
`<h1>`	32px	34px	36px	38px	40px
`<h2>`	28px	29px	31.5px	33.25px	35px
`<h3>`	24px	25.5px	27px	28.5px	30px
`<h4>`	20px	21.25px	22.5px	23.75px	25px
`<h5>`	18px	19.125px	20.25px	21.375px	22.5px
`<h6>`	16px	17px	18px	19px	20px
`<small>`	14px	14.875px	15.75px	16.625px	17.5px

Code à intégrer

    <div class="headings">
    <h2>Titre 2</h2>
    <h3>Sous-titre de niveau 3</h3>
    </div>

Boutons & Forms

Tous les éléments sont pré-stylisés

Code html à intégrer

<button>Button</button> <input type="submit">

Lien HTML a

Code html à intégrer

    <a href="#" role="button">Lien inline</a>
    <a href="#" role="button">Lien inline</a>
    <a href="#" role="button" class="secondary">Couleur secondaire</a>
    <a href="#" role="button" class="contrast">Niveau de contraste</a>

Formulaire complet

Code html à intégrer

    <form>
    <!-- Grille automatique Pico CSS -->
    <div class="grid">
    <!-- Label du champs -->
    <label for="firstname">
    Prénom <input type="text" id="firstname" name="firstname" placeholder="First name" required>
    </label>
    <!-- Label du champs -->
    <label for="lastname">
    Nom <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
    </label>
    </div>
    <label for="email">
    Courriel</label>
    <input type="email" id="email" name="email" placeholder="Adresse de courriel" required>
    <!-- Légende -->
    <small>
    Politique de confidentialité</small>
    <!-- Bouton -->
    <button type="submit">
    transmettre</button>
    </form>

Encore plus loin

Comprendre ce qu'est un CSS reset

Le reset CSS permet de réinitialiser à 0 la valeur de certains éléments HTML de base afin d'éviter les différences d'affichage sur les divers navigateurs du marché.