Styliser l'interface utilisateur
Nous n'avons pas consacré de temps au design de l'interface utilisateur. Pour la styliser comme un pro, nous utiliserons une stack moderne basée sur AssetMapper, le composant Symfony qui gère nos assets depuis la toute première étape de ce livre.
AssetMapper s'appuie sur les standards modernes du web : les fichiers JavaScript et CSS sont servis tels quels et reliés entre eux par une importmap, ce qui permet au navigateur de charger directement des modules ES natifs. Pas de bundler, pas d'étape de build, pas de Node.js.
Jetez un coup d'œil au fichier importmap.php à la racine du projet : il décrit les paquets JavaScript utilisés par l'application. La fonction Twig importmap(), appelée dans templates/base.html.twig, les expose au navigateur.
Tirer parti de Bootstrap
Pour commencer avec de bonnes bases et construire un site web responsive, un framework CSS comme Bootstrap peut faire gagner beaucoup de temps. Installez-le en tant que paquet importmap :
1
$ symfony console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.cssLa commande enregistre le paquet dans importmap.php et le télécharge (ainsi que sa dépendance @popperjs/core) dans assets/vendor/ ; l'application ne dépend d'aucun CDN à l'exécution.
Importez Bootstrap dans le point d'entrée JavaScript principal (nous en avons aussi profité pour supprimer le message de bienvenue par défaut) :
1 2 3 4 5 6 7 8 9 10 11
--- i/assets/app.js
+++ w/assets/app.js
@@ -5,6 +5,6 @@ import './stimulus_bootstrap.js';
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/app.css';
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');Notez que app.css est importé après les styles de Bootstrap, afin que nos personnalisations l'emportent.
Le système de formulaire de Symfony supporte Bootstrap nativement avec un thème spécial. Activez-le :
1 2
twig:
form_themes: ['bootstrap_5_layout.html.twig']Styliser le HTML
Nous pouvons maintenant styliser l'application. Téléchargez et extrayez l'archive à la racine du projet :
1 2 3
$ php -r "copy('https://symfony.com/uploads/assets/guestbook-8.1.zip', 'guestbook-8.1.zip');"
$ unzip -o guestbook-8.1.zip
$ rm guestbook-8.1.zipJetez un coup d'œil aux templates, vous pourriez y apprendre une astuce ou deux à propos de Twig.
Servir les assets
Il n'y a rien à builder : rechargez une page et les changements sont visibles. En développement, AssetMapper sert directement les fichiers d'assets.
Prenez le temps de découvrir les modifications visuelles. Jetez un coup d'œil au nouveau design dans un navigateur.
Étant donné que le Maker Bundle utilise les classes CSS de Bootstrap par défaut, le formulaire de connexion précédemment généré est maintenant automatiquement stylisé :
En production, Upsun exécute automatiquement la commande asset-map:compile pendant la phase de build : tous les assets sont copiés dans public/assets/ avec un hash de version dans leur nom de fichier, ce qui permet un cache HTTP sûr et de longue durée.