Cours 2 | Framework CSS¶

En Web 2, vous écriviez tout votre CSS à la main.

Cette session, on découvre un pilier du développement moderne : les cadriciels CSS (ou frameworks CSS). Un framework CSS, c'est du CSS déjà préparé qu'on branche à une page Web pour la styler sans partir de zéro.

Il en existe une grande variété, mais Tailwind est aujourd'hui le plus utilisé. Toutefois, afin d'aténuer la courbe d'apprentissage de ce nouveau concept, nous commencerons avec un minuscule framework nommé Milligram.

Introduction au frameworks CSS¶

Exercice - Milligram
Mon premier framework

Tailwind¶

Tailwind est aussi un framework CSS, mais sa philosophie est différente.

Milligram fournit des classes « sémantiques » toutes faites : .button, .row, .column.

Tailwind fournit des classes « utilitaires ». Il donne des micro-classes qui font chacune une seule petite chose, qu'on compose soi-même. Le but de Tailwind est de ne plus jamais coder de CSS 😈

Milligram Tailwind

<a href="#" class="button">
  Voir la bande annonce
</a>

<a href="#" class="px-6 py-2 bg-purple-600 text-white rounded font-bold uppercase">
  Voir la bande annonce
</a>

La documentation¶

Personne ne mémorise par coeur les classes de Tailwind. On utilise la documentation et l'autocomplétion de VS Code.

Tailwind CSS vs. Tailwind Plus

Dans la doc, vous verrez peut-être Tailwind Plus. Ignorez cette partie, elle est payante.

Installation¶

Exercice - Tailwind
Installation Tailwind en CDN

Espacements¶

Les classes d'espacement (padding et margin) se construisent avec ce motif :

<propriété><côté*>-<size>

Propriété
`m`	`margin`
`p`	`padding`

Coté (facultatif)
`t`	`top`
`b`	`bottom`
`l`	`left`
`r`	`right`
`x`	`right` + `left`
`y`	`top` + `bottom`

Unité
`0`	`0rem`
`1`	`0.25rem`
`2`	`0.5rem`
`3`	`0.75rem`
`4`	`1rem`
...

See the Pen Tailwind4 Spacing Builder by TIM Montmorency (@tim-momo) on CodePen.

On pourra alors utiliser ce type de classe dans le HTML. Voici un exemple :

See the Pen Tailwind4 Premier pas by TIM Montmorency (@tim-momo) on CodePen.

Couleurs¶

Les classes de couleur se construisent généralement avec ce motif :

<propriété>-<couleur>-<tinte>/<transparence>

Plusieurs propriétés peuvent être colorées. Ici on peut voir trois classiques : couleur de fond, texte et bordure.

See the Pen Tailwind4 Color Builder by TIM Montmorency (@tim-momo) on CodePen.

Notez qu'il n'est pas possible de changer la tinte d'une couleur définitive comme le blanc, le noir et la transparence.

Typograpie¶

See the Pen Tailwind4 Typography Builder by TIM Montmorency (@tim-momo) on CodePen.

<style type="text/tailwindcss">
@theme {
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Merriweather', serif;
    --font-mono: 'Fira Code', monospace;
}
</style>

😜 Évidemment, il ne faut pas oublier de lier les GoogleFonts dans le HTML avec leur script d'importation.

Bordures¶

Les configurations radius, width, color et style sont gérées pour les propriétés border et les outline. La syntaxe est la suivante :

rounded-<size>
border-<size>
border-<style>
border-<couleur>-<tinte>

See the Pen Tailwind4 Border Builder by TIM Montmorency (@tim-momo) on CodePen.

Exercice sur les bases¶

Exercice - Tailwind
Bases Tailwind

Tailwind Suite¶

Grandeurs (sizing)¶

Les dimensions comme le width et le height suivent la même syntaxe :

<w>-<value>
<h>-<value>

Les valeurs peuvent être :

une fraction (ex.: 1/4, 2/3, ...)
une valeur fixe (ex.: 4, 10, ...)
un conteneur (xs, sm, md, lg, xl, 2xl, 3xl ...).

On peut aussi utiliser le mot screen pour signifier la largeur de la fenêtre du navigateur (ex.: w-screen équivaut à width: 100vw;). Si vous avez besoin de vous rafaichir la mémoire sur les unités relatives au viewport, consultez la page Viewport units sur web.dev.

Enfin, si on veut ajouter un min-width ou max-width, on peut le faire avec cette syntaxe :

min-<w>-<value>
max-<w>-<value>

See the Pen Tailwind4 Sizing Builder by TIM Montmorency (@tim-momo) on CodePen.

Codepen

Valeur arbitraire

Il est également possible de spécifier une valeur arbitraire en l'inscrivant entre crochets.

Exemple

<div class="w-[5px]">
    ...
</div>

Conteneurs Tailwind¶

Les conteneurs Tailwind c'est juste des dimentions normalisées qu'on peut appliquer sur certaines classes. L'important ici est juste de savoir que ça existe.

Taille	rem
xs	`20rem`
sm	`24rem`
md	`28rem`
lg	`32rem`
xl	`36rem`
2xl	`42rem`
...

Effets¶

Les effets CSS comme box-shadow, opacity ou les filtres sont faciles à utiliser, mais demandent de bien comprendre leur fonctionnement. C'est pourquoi il sera recommandé ici de consulter la documentation officielle pour maîtriser leur syntaxe.

See the Pen Tailwind4 Effect Builder by TIM Montmorency (@tim-momo) on CodePen.

Display¶

Classe Tailwind	Équivalent CSS
`block`	`display: block;`
`inline-block`	`display: inline-block;`
`inline`	`display: inline;`
`flex`	`display: flex;`
`inline-flex`	`display: inline-flex;`
`grid`	`display: grid;`
`hidden`	`display: none;`

Flexbox¶

Le mode flex s'active avec la classe flex sur le parent. On configure ensuite la disposition des enfants avec ces classes :

Classe (parent)	Effet
`flex-row` / `flex-col`	Enfants en ligne ou en colonne
`flex-wrap`	Les enfants retournent à la ligne si l'espace manque
`justify-<value>`	Alignement sur l'axe principal
`items-<value>`	Alignement sur l'axe secondaire
`gap-<size>`	Espace entre les enfants

See the Pen Tailwind4 Flexbox Builder by TIM Montmorency (@tim-momo) on CodePen.

Chaque enfant peut aussi être configuré individuellement :

Classe (enfant)	Effet
`flex-1` / `grow`	L'enfant grandit pour occuper l'espace disponible
`shrink-0`	L'enfant ne rétrécit pas
`basis-<size>`	Taille de départ de l'enfant avant distribution de l'espace
`self-start/center/end`	Aligne cet enfant seul, différemment des autres
`order-<n>`	Change l'ordre visuel sans toucher au HTML

Grid¶

Le mode grid s'active avec la classe grid sur le parent. On définit ensuite le nombre de colonnes/rangées avec ces classes :

Classe (parent)	Effet
`grid-cols-<n>`	Nombre de colonnes
`grid-rows-<n>`	Nombre de rangées
`gap-<size>`	Espace entre les cellules (aussi `gap-x-`/`gap-y-`)

See the Pen Tailwind4 Grid Builder by TIM Montmorency (@tim-momo) on CodePen.

Chaque enfant peut ensuite occuper plusieurs cellules :

Classe (enfant)	Effet
`col-span-<n>`	Occupe `n` colonnes
`row-span-<n>`	Occupe `n` rangées
`col-start-<n>` / `col-end-<n>`	Position précise de début/fin (colonne)
`row-start-<n>` / `row-end-<n>`	Position précise de début/fin (rangée)

Responsive¶

Pour spécifier une classe à un breakpoint donné, il faut ajouter le préfixe du breakpoint à une classe Tailwind :

Syntaxe

<prefixe>:<classe>

Exemple

md:bg-red-100

Les différents breakpoints sont les suivants :

Préfixe	Largeur minimale
`sm`	40rem
`md`	48rem
`lg`	64rem
`xl`	80rem
`2xl`	96rem

See the Pen Tailwind4 Responsive by TIM Montmorency (@tim-momo) on CodePen.

Codepen

Interactivité¶

Les pseudo-classes comme :hover ou :focus sont configurables de la même façon que les breakpoints.

hover:<classe tailwind>
focus:<classe tailwind>

See the Pen Tailwind4 hover by TIM Montmorency (@tim-momo) on CodePen.

Mode sombre (darkmode)¶

Tailwind vient nativement avec le concept de dark mode. Pour en faire usage, il existe quelques méthodes.

Méthode automatique (`prefers-color-scheme`)¶

Selon la préférence du navigateur. C'est la plus simple. Pour ce faire, il ne suffit que de spécifier l'état en darkmode avec dark:

syntaxe

dark:<classe tailwind>

exemple

<div class="bg-white dark:bg-black">
    Fond en blanc par défaut, mais en noir si le OS est configuré en darkmode.
</div>

Méthode manuelle¶

On doit d'abord indiquer à Tailwind une règle spéciale via sa balise <style>. Ainsi, si la classe dark est présente dans le HTML, cette partie sera forcée en darkmode.

<head>
    ...
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
        @custom-variant dark (&:where(.dark, .dark *));
    </style>
</head>

See the Pen Untitled by TIM Montmorency (@tim-momo) on CodePen.

Partie javascript du bouton

<button id="darkmode-toggle">Passer en mode clair</button>
...
<script>
    // Ajoute/retire la classe "dark" sur la balise <html>
    document.getElementById("darkmode-toggle").addEventListener("click", function() {
        document.documentElement.classList.toggle('dark');
    });
</script>

Transform¶

See the Pen Tailwind4 Transform Builder by TIM Montmorency (@tim-momo) on CodePen.

La translation peut se faire en pourcentage avec des fractions (ex.: 1/4) ou des valeurs fixes (ex.: 4). Un axe (x, y) peut être spécifié. La valeur full représente une translation de 100%.

translate-<value>
translate-<axe>-<value>

La rotation se fait simplement en degrés. Un axe (x, y ou z) peut être spécifié.

rotate-<value>
rotate-<axe>-<value>

L'échelle (scale) se fait normalement en pourcentage (ex. 110 pour 110%). Un axe (x, y ou z) peut être spécifié.

scale-<value>
scale-<axe>-<value>

Une valeur négative peut être spécifié en appliquant un «-» avant la classe. (ex.: -scale-10)

Exercices¶

Exercice - Tailwind
Gratuit