Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)

src/css/theme-2022/components/grid.less

@@ -0,0 +1,192 @@
+// Settings
+
+@container_width: 1200px;
+@columns: 12;
+@main_padding: 20px;
+
+// Grid
+
+.container {
+    margin: auto;
+    width: @container_width;
+    padding: 0 @main_padding;
+
+    @media (max-width: 576px) {
+        width: 90%;
+    }
+    @media (min-width: 576px) {
+        width: 540px;
+    }
+    @media (min-width: 768px) {
+        width: 720px;
+    }
+    @media (min-width: 992px) {
+        width: 960px;
+    }
+    @media (min-width: 1240px) {
+        width: 1200px;
+    }
+    @media (min-width: 1400px) {
+        width: 1320px;
+    }
+}
+
+// Mixins
+
+.order(@val) {
+    order: @val;
+    -moz-order: @val;
+    -webkit-order: @val;
+}
+
+// Row / Col
+
+.row {
+    display: flex;
+    display: -webkit-flex;
+    flex-wrap: wrap;
+    margin: 0px -@main_padding;
+    &.centerrow {
+        each(range(@columns), {
+			.col-@{value}, .col-xs-@{value}, .col-sm-@{value}, .col-md-@{value}, .col-lg-@{value} {
+				align-items: center;
+				justify-content: center;
+			}
+		});
+    }
+    &.fullwidth {
+        margin: 0px;
+    }
+    .col {
+        flex: none;
+        padding: 0px @main_padding;
+        width: 100%;
+
+        .right {
+            text-align: right;
+            justify-content: flex-end;
+        }
+    }
+
+    & ~ .row:not(.nospace) {
+        margin-top: @space-lg;
+    }
+}
+
+each(range(@columns), {
+	.col-@{value}, .col-xs-@{value}, .col-sm-@{value}, .col-md-@{value}, .col-lg-@{value} {
+		flex:none;
+		position:relative;
+		min-height:1px;
+		padding:0px @main_padding;
+		width:100%;
+		display:flex;
+		display:-webkit-flex;
+		flex-direction: column;
+		flex-wrap:wrap;
+
+        &.right {
+            display: flex;
+            justify-content: flex-end;
+
+            & > * {
+                margin-left: auto;
+            }
+        }
+    }
+	.order-@{value} {
+		.order(@value);
+	}
+});
+
+// Set Column Width on breakpoints
+.loop (@val) {
+    each(range(@columns), {
+		.col-@{val}-@{value} {
+			width: (100% / @columns * @value);
+		}
+		.order-@{val}-@{value} {
+			.order(@value);
+		}
+	});
+}
+
+.col-0 {
+    display: none;
+}
+each(range(@columns), {
+	.col-@{value} {
+		width: (100% / @columns * @value);
+	}
+	.order-@{value} {
+		.order(@value);
+	}
+});
+
+@media screen and (min-width: 500px) {
+    .row .col {
+        width: 50%;
+        flex: none;
+    }
+    .row .col-xs-0 {
+        display: none;
+    }
+    .loop(xs);
+}
+
+@media screen and (min-width: 768px) {
+    .row .col {
+        width: 33.3333333%;
+        flex: none;
+    }
+    .row .col-sm-0 {
+        display: none;
+    }
+    .loop(sm);
+}
+
+@media screen and (min-width: 1050px) {
+    .row .col-md-0 {
+        display: none;
+    }
+    .loop(md);
+}
+
+@media screen and (min-width: 1250px) {
+    .row .col {
+        flex: 1;
+        width: auto;
+    }
+    .row .col-lg-0 {
+        display: none;
+    }
+    .loop(lg);
+}
+
+// Hidden
+
+@media screen and (max-width: 576px) {
+    .hidden-xs {
+        display: none !important;
+    }
+}
+@media screen and (max-width: 768px) {
+    .hidden-sm {
+        display: none !important;
+    }
+}
+@media screen and (max-width: 992px) {
+    .hidden-md {
+        display: none !important;
+    }
+}
+@media screen and (max-width: 1200px) {
+    .hidden-lg {
+        display: none !important;
+    }
+}
+@media screen and (max-width: 1400px) {
+    .hidden-xl {
+        display: none !important;
+    }
+}