initial commit

assets/scss/assets_test.scss

@@ -0,0 +1,74 @@
+/*
+*  ASSETS TESTS
+*  Styles for dev.assets_test* pages
+*/
+
+div.mgrid,
+div.lgrid,
+div.cgrid {
+
+   display: grid;
+   column-gap: 1em;
+   row-gap: 1em;
+
+   &.debug {
+      border: 1px solid black;
+      padding: 1em;
+
+      .area1, .area3 {
+         background-color: yellow;
+      }
+      .area2, .area4 {
+         background-color: transparentize(cyan, 0.4);
+         padding-top: 1em;
+         padding-left: 1em;
+      }
+      .item {
+         background-color: orange;
+      }
+      ul {
+         list-style-type: none;
+         padding: 0;
+         margin: 0;
+         display: flex;
+      }
+   }
+}
+
+div.mgrid {
+   div.area1 {
+      grid-column: 1 / 3;
+      grid-row: 1 / 3;
+   }
+   div.area2 {
+      grid-column: 2 / 3;
+      grid-row: 2 / 3;
+   }
+}
+
+div.lgrid {
+   div.area3 {
+      grid-area: ah;
+   }
+   div.area4 {
+      grid-area: bl;
+   }
+   grid-template-areas:
+        "ah ah"
+        "ah bl";  // invalid
+   /*
+   *   La zone qu'on crée avec les noms doit être rectangulaires.
+   *   Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L
+   *   (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité).
+   *   [...] Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.
+   *   src: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
+   */
+   grid-template-areas:
+        "ah ah"
+        ". bl";
+}
+
+div.cgrid {
+   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+   grid-template-rows: masonry;
+}