feat(design): add base design

.gitignore

@@ -19,3 +19,10 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

assets/app.js

@@ -0,0 +1,10 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.scss';
+

assets/styles/_base.scss

@@ -0,0 +1,35 @@
+body {
+  font-family: Helvetica, sans-serif;
+  background-color: $color-background;
+  color: $color-text;
+}
+
+a {
+  color: $color-action;
+  &:hover, &:focus {
+    color: $color-action-active;
+  }
+}
+
+header, main, footer {
+  max-width: $size-body;
+  margin: 0 auto;
+  padding: 0 $size-spacer-margin;
+}
+
+header {
+  padding: $size-spacer-md $size-spacer-margin;
+  img {
+    max-height: 4em;
+  }
+}
+
+main {
+  margin: $size-spacer-lg auto;
+}
+
+footer {
+  margin: $size-spacer-lg auto;
+  font-size: .9em;
+  opacity: .6;
+}

assets/styles/_config.scss

@@ -0,0 +1,17 @@
+$color-primary: #00B4FF;
+$color-background: #123;
+$color-text: #fff;
+$color-danger: #f00;
+
+$color-action-contrast: $color-background;
+$color-action: $color-primary;
+$color-action-active: lighten($color-primary, 10%);
+
+$size-body: 40rem;
+
+$size-spacer-xs: .15rem;
+$size-spacer-sm: .5rem;
+$size-spacer-md: 1rem;
+$size-spacer-lg: 5rem;
+
+$size-spacer-margin: $size-spacer-md

assets/styles/_form.scss

@@ -0,0 +1,58 @@
+
+form {
+
+  display: grid;
+  gap: $size-spacer-md;
+
+  // Form groups (label + input)
+  > div > div {
+    display: grid;
+    gap: $size-spacer-sm;
+  }
+
+  // Used for errors in forms
+  ul {
+    padding: 0;
+    margin: 0;
+    color: $color-danger;
+    display: grid;
+    gap: $size-spacer-xs;
+
+    li {
+      margin: 0;
+      font-style: italic;
+      display: block;
+    }
+  }
+
+  input {
+    background: $color-text;
+    color: $color-background;
+    border: 0;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: $size-spacer-md;
+  }
+
+  label {
+    font-variant: all-small-caps;
+    font-weight: bolder;
+    display: block;
+  }
+}
+
+button, .btn {
+  background: $color-action;
+  color: $color-action-contrast;
+  border: 2px solid $color-action;
+  text-transform: uppercase;
+  box-sizing: border-box;
+  padding: $size-spacer-sm $size-spacer-md;
+  border-radius: $size-spacer-xs;
+  font-weight: bolder;
+
+  &:hover, &:focus {
+    background: $color-action-active;
+  }
+}

assets/styles/app.scss

@@ -0,0 +1,3 @@
+@import "config";
+@import "base";
+@import "form";

composer.json

@@ -42,6 +42,7 @@
         "symfony/uid": "6.1.*",
         "symfony/validator": "6.1.*",
         "symfony/web-link": "6.1.*",
+        "symfony/webpack-encore-bundle": "^1.14",
         "symfony/yaml": "6.1.*",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"

config/bundles.php

@@ -13,4 +13,5 @@
     Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
     Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
     Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

config/packages/twig.yaml

@@ -1,5 +1,7 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
+    form_themes: [ 'foundation_6_layout.html.twig' ]
+
 
 when@test:
     twig:

config/packages/webpack_encore.yaml

@@ -0,0 +1,49 @@
+webpack_encore:
+    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
+    output_path: '%kernel.project_dir%/public/build'
+    # If multiple builds are defined (as shown below), you can disable the default build:
+    # output_path: false
+
+    # Set attributes that will be rendered on all script and link tags
+    script_attributes:
+        defer: true
+        # Uncomment (also under link_attributes) if using Turbo Drive
+        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
+        # 'data-turbo-track': reload
+    # link_attributes:
+        # Uncomment if using Turbo Drive
+        # 'data-turbo-track': reload
+
+    # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
+    # crossorigin: 'anonymous'
+
+    # Preload all rendered script and link tags automatically via the HTTP/2 Link header
+    # preload: true
+
+    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
+    # strict_mode: false
+
+    # If you have multiple builds:
+    # builds:
+        # pass "frontend" as the 3rg arg to the Twig functions
+        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
+        # frontend: '%kernel.project_dir%/public/frontend/build'
+
+    # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+    # Put in config/packages/prod/webpack_encore.yaml
+    # cache: true
+
+framework:
+    assets:
+        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
+
+#when@prod:
+#    webpack_encore:
+#        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+#        # Available in version 1.2
+#        cache: true
+
+#when@test:
+#    webpack_encore:
+#        strict_mode: false