Cours 3¶

Retour sur les exercices¶

Bases, Layout et Responsive

Tailwind, la suite¶

Ci-dessous, quelques exemples de mise en forme utiles.

Colonne centrée¶

<div class="max-w-xl mx-auto">
  <p>...</p>
</div>

Layout header + aside + main + footer¶

<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">

  <header>...</header>

  <div class="grid sm:grid-cols-[16rem_1fr]">
    <aside>...</aside>
    <main>...</main>
  </div>

  <footer>...</footer>

</div>

Image + contenu¶

<section class="grid gap-4 items-center sm:grid-cols-2">
  <img src="..." alt="" class="rounded-lg aspect-16/9 object-cover" />
  <div>
    <p>...</p>
  </div>
</section>

<section class="grid gap-4 items-center sm:grid-cols-2 sm:text-right">
  <img src="..." alt="" class="rounded-lg aspect-16/9 object-cover sm:order-2" />
  <div>
    <p>...</p>
  </div>
</section>

Colonne centrée + 3 colonnes¶

<div class="max-w-xl mx-auto">
  <div class="grid gap-4 sm:grid-cols-3">
    <div>...</div>
    <div>...</div>
    <div>...</div>
  </div>
</div>

Texte sur image¶

<section class="relative min-h-dvh grid place-items-center">
  <img src="..." alt="" class="absolute inset-0 size-full object-cover">
  <div class="absolute inset-0 bg-black/50"></div>
  <div class="relative text-center">
    <p>...</p>
  </div>
</section>

Image et ratio¶

<img src="..." alt="" class="aspect-16/9 object-cover" />

À propos de Tailwind¶

En soi, Tailwind n'a pas de style prédéfini. On dit que Tailwind est non opinionné (unopinionated). C'est-à-dire qu'il n'impose ni direction artistique ni identité visuelle. Il ne fournit que les outils pour styliser un site.

C'est très flexible et ça permet de faire un peu tout, mais disposer d'une maquette avec un système de design aide énormément à garder le cap sur le style à maintenir d'une page à l'autre.

Quand on n'en a pas, il faut trouver des solutions pour ne pas réinventer la roue, comme l'exercice du QR code 😜

HyperUI¶

HyperUI permet de magasiner des composantes responsives déjà faites (opinionated), construites avec des classes Tailwind.

Trois styles sont disponibles :

• Application : style pour des interfaces de gestion
• Marketing : style pour des sites promotionnels simples
• Neobrutalism : style plus original, mais moins passe-partout

Générateur de mode sombre¶

Certaines composantes sont disponibles en mode sombre (dark mode), d'autres non. Pour pallier ce manque, on peut utiliser l'outil « Dark Mode Generator ».

Modèles HyperUI¶

Des modèles de pages complets (templates) sont également disponibles.

Installation¶

C'est tout l'avantage d'HyperUI, il n'y a rien à installer ! Ça utilise seulement les classes Tailwind 4 et rien d'autre 🤷

Exercice HyperUI¶

DaisyUI¶

Entièrement construite sur Tailwind, DaisyUI est une bibliothèque de classes sémantiques qui simplifie grandement le HTML.

En contrepartie, elle impose ses propres choix de design (opinionated). L'apparence des éléments étant définie à l'avance, cela peut représenter un inconvénient pour les projets nécessitant une interface sur mesure.

<button class="bg-zinc-100 border font-semibold text-zinc-900 text-sm px-4 
duration-200 py-2.5 transition-all hover:border-zinc-300 hover:bg-zinc-200 
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 
active:translate-y-[0.5px] inline-flex gap-2 rounded-sm active:border-zinc-300 
active:bg-zinc-200 active:shadow-none text-center align-middle cursor-pointer 
border-zinc-200 dark:border-zinc-700 dark:bg-neutral-700 dark:text-zinc-300 
dark:hover:border-zinc-950 dark:hover:bg-zinc-950 dark:focus-visible:outline-zinc-200 
dark:active:border-zinc-950 dark:active:bg-zinc-900">
Bouton Tailwind
</button>

<button class="btn">
Bouton DaisyUI
</button>

Thèmes¶

DaisyUI vient avec une multitude de thèmes . En changeant de thème, toutes les composantes s'ajustent dynamiquement.

Sémantique¶

DaisyUI utilise un vocabulaire sémantique pour ses classes. C'est pratique parce que peu importe le thème, c'est toujours les mêmes noms des couleurs :

Primary, Secondary, Info, Success, Warning, Error, Accent, Neutral et Base

Installation du CDN¶

Comme Tailwind, DaisyUI possède aussi une méthode d'installation par CDN . Les deux s'installent conjointement dans la partie <head> du site :

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> 

Composantes¶

Une fois DaisyUI installée, on peut utiliser ses composantes . Elles sont catégorisées ainsi :

• Actions (composantes interactives) : Bouton, dropdown, Modal
• Data display (affichage de données) : Accordion, Card, List, Table
• Navigation : Breadcrumb, Navbar, Tab
• Feedback (rétroaction utilisateur) : Alert, Progress, Tooltip
• Data input (composantes de formulaire) : Input field, Checkbox, Select
• Layout (mise en page) : Hero, Footer, Drawer
• Mockup (simulation visuelle)

Spécifier un thème¶

Il suffit d'ajouter l'identifiant du thème choisi à la balise <html> :

<html data-theme="forest">
  ...
</html>

Usage d'une composante¶

Pour ajouter un bouton :

1. Aller sur la page de la documentation du bouton
2. Trouver l'exemple pour un bouton primary
3. Cliquer sur l'onglet HTML
4. Copier la partie du code qui nous intéresse. Par exemple :

   <button class="btn btn-soft btn-primary">Primary</button>
   

5. Coller dans le HTML de son projet.

Mode sombre¶

Il faut savoir que chaque thème DaisyUI incarne soit un mode dark, soit un mode light, mais jamais les deux.

Lorsqu'on utilise DaisyUI avec un CDN, il faut en choisir un par défaut. On ne peut pas configurer un thème en fonction du prefers-color-scheme du système de l'utilisateur.

Pour passer de l'un à l'autre, il faut donc permuter la valeur de data-theme avec un contrôleur de thème .

<input type="checkbox" class="theme-controller" value="id-du-theme-ici" />

Exercice DaisyUI¶

Gestionnaire de paquets¶

Le CDN, c'est du code hébergé ailleurs. C'est parfait pour faire un prototype, mais c'est vite limitant pour gérer ses dépendances à long terme.

La façon contemporaine d'ajouter du code externe se fait avec un gestionnaire de paquets (package manager). C'est l'équivalent du App Store, mais pour développeurs. Au lieu d'aller sur plein de sites différents, de télécharger des fichiers de code, de les copier dans tes dossiers et de gérer les mises à jour toi-même, un package manager le fait pour toi.

Node package manager : npm¶

Pour le cours, nous utiliserons npm.

Il est déjà installé au Cégep, mais pour l'avoir à la maison, il suffit d'installer Node.js .

Installation¶

D'abord, npm s'utilise en ligne de commande ! On peut donc faire un test avec Git Bash.

1. Ouvrir Git Bash
2. Se déplacer dans Documents avec cd
3. Créer un dossier test avec mkdir
4. Se déplacer dans test avec cd
5. Exécuter la ligne de commande suivante pour initialiser le projet :

   npm init
   

6. puis celle-ci pour installer la technologie milligram :

   npm install milligram
   

7. Consulter le contenu du dossier test :

   📁 test
   ├── 📁 node_modules
   │    ├── 📁 milligram
   │    │    ├── 📁 dist
   │    │    │    ├── 📄 milligram.css 👈
   │    │    │    └── ...
   │    │    ├── 📁 src
   │    │    └── ...
   │    └── 📁 normalize.css
   │         ├── 📄 normalize.css 👈
   │         └── ...
   ├── 📄 package.json
   └── 📄 package-lock.json
   

{
  "name": "digger",
  "version": "1.0.0",
  "dependencies": {
    "milligram": "^1.4.1",
    "normalize.css": "^8.0.1"
  }
}

Usage manuel¶

Le code de Milligram est sous node_modules, donc on pourrait simplement lier les fichiers ainsi :

<link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
<link rel="stylesheet" href="./node_modules/milligram/dist/milligram.css">

Vite¶

Vite est un outil de compilation (build tool) en ligne de commande qui nous permettra de travailler avec Tailwind / DaisyUI sans l'usage de CDN.

Vite vanille¶

Voici un usage de Vite sans framework JavaScript.

1. Créer un dossier pour le projet

   mkdir mon-projet
   

2. Se déplacer dans le dossier

   cd mon-projet
   

3. Initialise npm avec :

   npm init
   

4. Installe vite, tailwind et daisyui avec la commande npm

   npm install vite tailwindcss @tailwindcss/vite daisyui
   

5. Ouvre le projet dans VSCode
6. À la racine, crée un fichier vite.config.mjs et ajoute ce contenu :
   vite.config.mjs

   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({
     base: './',
     plugins: [tailwindcss()]
   })
   

7. À la racine, crée un fichier style.css et ajoute ce contenu :
   style.css

   @import "tailwindcss";
   @plugin "daisyui";
   

8. À la racine, crée un fichier index.html et ajoute ce contenu :
   index.html

   <!doctype html>
   <html lang="fr">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="./style.css">
       <title>Mon projet</title>
     </head>
     <body>
       <button class="btn btn-primary">Bouton daisyUI</button>
     </body>
   </html>
   

9. De retour en ligne de commande, exécuter :

   npx vite
   

Pour arrêter le serveur : Ctrl+C

Build¶

Pour effectuer un build, exécutez :

npx vite build

Ça va créer un dossier dans lequel on retrouve le html/css/js optimisé et prêt à mettre en ligne !

Pour tester le build, exécutez :

npx vite preview

GitHub¶

Lorsqu'on ajoute un projet du genre sur GitHub, il n'est pas nécessaire d'ajouter le dossier de distribution ni node_modules comme mentionné plus tôt.

node_modules/
dist/

# Cache de vite
.vite/

# Mac
.DS_Store

# VSCode
.vscode/*
!.vscode/extensions.json

Avantages¶

• Indépendance. Ça compile les classes Tailwind sans requête à un site externe
• Ça va nous permettre d'ajouter un thème DaisyUI custom. Impossible avec le CDN
• Ça va nous permettre de configurer les thèmes par défaut (dépendamment du prefers-color-scheme par exemple). Impossible avec le CDN
• Ouvre l'accès à tout l'écosystème npm ❤️
• Optimise le déploiement
• Contexte complet pour les outils d'IA : le code des librairies est présent localement