De gebruikersinterface stylen
We hebben nog geen tijd besteed aan het ontwerp van de gebruikersinterface. Om als een pro te stylen, gebruiken we een moderne stack gebaseerd op AssetMapper, de Symfony-component die onze assets al vanaf de allereerste stap van dit boek beheert.
AssetMapper omarmt moderne webstandaarden: JavaScript- en CSS-bestanden worden ongewijzigd geserveerd en aan elkaar gekoppeld met een importmap, waardoor de browser native ES modules rechtstreeks kan laden. Geen bundler, geen build-stap, geen Node.js.
Bekijk het importmap.php bestand in de root van het project: het beschrijft de JavaScript-packages die door de applicatie worden gebruikt. De importmap() Twig-functie die in templates/base.html.twig wordt aangeroepen, stelt ze beschikbaar aan de browser.
Bootstrap inzetten
Om met goede standaardinstellingen te beginnen en een responsieve website te bouwen, kan een CSS-framework zoals Bootstrap een groot verschil maken. Installeer het als een importmap-package:
1
$ symfony console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.cssHet command registreert de package in importmap.php en downloadt deze (en de @popperjs/core afhankelijkheid) naar assets/vendor/; de applicatie is tijdens runtime niet afhankelijk van een CDN.
Importeer Bootstrap in het belangrijkste JavaScript-entrypoint (we hebben ook het standaard welkomstbericht opgeschoond):
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! 🎉');Merk op dat app.css na de Bootstrap-styles wordt geïmporteerd, zodat onze aanpassingen winnen.
Het Symfony form-systeem ondersteunt Bootstrap native met een speciaal thema, schakel het in:
1 2
twig:
form_themes: ['bootstrap_5_layout.html.twig']De HTML stylen
We zijn nu klaar om de applicatie te stylen. Download het archief en pak het uit in de root van het project:
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.zipBekijk de templates, je leert misschien een trucje of twee over Twig.
De assets serveren
Er is niets te builden: ververs een pagina en de wijzigingen zijn live. In development serveert AssetMapper de assetbestanden rechtstreeks.
Neem de tijd om de visuele veranderingen te ontdekken. Bekijk het nieuwe ontwerp in een browser.
Het gegenereerde inlogformulier is nu ook gestyled, aangezien de Maker bundle standaard Bootstrap CSS-classes gebruikt:
Voor productie voert Upsun automatisch het asset-map:compile command uit tijdens de buildfase: alle assets worden gekopieerd naar public/assets/ met een versie-hash in hun bestandsnamen, wat veilige, langdurige HTTP-caching mogelijk maakt.