Cours 2¶

Tutorat¶

Calendrier

Retour sur les exercices¶

CSS grid + Mandala

Classroom50¶

Pour les exercices en classe, nous travaillerons désormais avec Classroom 50. Un outil d'attribution de devoir via GitHub.

Pour commencer, veuillez remplir le formulaire suivant :

Formulaire à remplir

Les exercices¶

Pour les exercices, un lien vous sera remis en temps et lieu.

Vous serez alors dirigé vers une page comme celle-ci :

Dans l'image ci-dessus, vous remarquerez 2 lignes en rouge. Ces lignes doivent simplement être ignorées : ne les modifiez pas. Elles sont requises pour fonctionner avec Classroom 50.

Complétez l'exercice demandé et n'oubliez pas de faire un commit + push. Cela officialisera la complétion de votre exercice.

Cadriciel 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 framework CSS¶

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 😈

<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¶

La documentation Tailwind est la source d'information la plus fiable. Toutefois, elle peut être mélangeante, car en un clic on peut passer de Tailwind CSS à Tailwind Plus qui est la partie payante du site. Ignorez la simplement.

Installation¶

Espacements¶

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

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

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

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 .

Typographie¶

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

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>

Codepen

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

Conteneurs Tailwind¶

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

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.

Display¶

Flexbox¶

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

Chaque enfant peut aussi être configuré individuellement :

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 :

Chaque enfant peut ensuite occuper plusieurs cellules :

https://www.tailwindgen.com/ (choisir le format HTML et non JSX)

Responsive¶

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

<prefixe>:<classe>

md:bg-red-100

Les différents breakpoints sont les suivants :

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>

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:

dark:<classe tailwind>

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

<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¶

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>

Exercices¶