UI with Piperade Grid

resources/sass/grille.scss

@@ -0,0 +1,57 @@
+$col: 13;
+
+.start {
+    justify-content: flex-start;
+}
+
+.center {
+    justify-content: center;
+}
+
+.end {
+    justify-content: flex-end;
+}
+
+.v-center {
+    align-items: center;
+}
+.row{
+    display:flex;
+    flex-direction: row;
+}
+/*
+// ENABLE FOR DEV OR FOR DEMONSTRATION
+
+.col{
+    border: 3px solid red;
+}
+.row{
+    border: 3px solid green;
+}
+*/
+
+
+    @media screen and (min-width: 600px) {
+    @for $i from 1 to $col {
+
+        .s#{$i} {
+            width: calc(#{$i} * 8.334%);
+        }
+    }
+    }
+    @media screen and (min-width: 600px) and (max-width: 992px) {
+        @for $i from 1 to $col {
+
+            .m#{$i} {
+                width: calc(#{$i} * 8.334%);
+            }
+        }
+    }
+    @media screen and (min-width: 992px) {
+        @for $i from 1 to $col {
+
+            .l#{$i} {
+                width: calc(#{$i} * 8.334%);
+            }
+        }
+    }

resources/sass/materialize/sass/materialize.scss

@@ -14,7 +14,6 @@
 @import "components/global";
 @import "components/badges";
 @import "components/icons-material-design";
-@import "components/grid";
 @import "components/navbar";
 @import "components/typography";
 @import "components/transitions";
@@ -33,9 +32,3 @@
 @import "components/table_of_contents";
 @import "components/sidenav";
 @import "components/preloader";
-@import "components/slider";
-@import "components/carousel";
-@import "components/tapTarget";
-@import "components/pulse";
-@import "components/datepicker";
-@import "components/timepicker";