Restructuring

components/01_Layouts/flexRow/_flexRow.scss

@@ -1,48 +1,73 @@
-@mixin RV-FlexRow__Container--column {
+/*
+ * Classes for easy flexrow usage
+ */
+
+
+/* ##########
+ * Container class
+  ########### */
+@mixin RV-FlexRow__Container($-prefix: '&') {
     display: flex;
-    flex-direction: column;
+    height: 100%;
 }
 
-@mixin RV-FlexRow__Container--multiRow {
+/*
-    flex-wrap: wrap;
+ * Orientation
-}
+ */
-
+@mixin RV-FlexRow__Container--horizontal {
-@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
     flex-direction: row;
     flex-wrap: wrap;
-
-    * {
-        flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
-    }
 }
 
 @mixin RV-FlexRow__Container--vertical {
     flex-direction: column;
 }
 
-@mixin RV-FlexRow__Container($-prefix: '&') {
+/*
-    display: flex;
+ * Breaks from row to column orientation at the given breakpoint
-    height: 100%;
+ * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
+ */
+@mixin RV-FlexRow__Container--breakPoint($-localBreakPoint: 500px, $-mediaBreakPoint: null) {
+    * {
+        flex-basis: calc(#{$-localBreakPoint} * 999 - 100% * 999);
     }
 
-@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') {
+    @if ($-mediaBreakPoint !=null) {
-    #{$-prefix}--multiRow {
+        @media(max-width: $-mediaBreakPoint) {
-        @include RV-FlexRow__Container--multiRow;
-    }
-
-    #{$-prefix}--column {
             @include RV-FlexRow__Container--column;
         }
-
+    }
-    #{$-prefix}--horizontal {
-        @include RV-FlexRow__Container--horizontal(#{$-break_width});
 }
 
-    #{$-prefix}--vertical {
+/*
+ * Shorthand for the modifiers above
+ */
+@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
+    &--breakPoint {
+        @include RV-FlexRow__Container--breakPoint(#{$-break_width});
+    }
+
+    &--horizontal {
+        @include RV-FlexRow__Container--horizontal;
+    }
+
+    &--vertical {
         @include RV-FlexRow__Container--vertical;
     }
 }
 
+/* ##########
+ * Item class
+  ########### */
+@mixin RV-FlexRow__Item {
+    min-width: min-content;
+    width: 100%;
+    @include RV-FlexRow__Item--normal;
+}
+
+/*
+ * Varios relative width of items to each other
+ */
 @mixin RV-FlexRow__Item--normal {
     flex-grow: 3;
     flex-shrink: 3;
@@ -68,6 +93,9 @@
     flex-shrink: 1;
 }
 
+/*
+ * Item has always the given width
+ */
 @mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
     flex-grow: 0;
     flex-shrink: 0;
@@ -75,67 +103,110 @@
     flex-basis: $-width;
 }
 
-@mixin RV-FlexRow__Item($-prefix: '&') {
+/*
-    min-width: min-content;
+ * Item width relativ to the container
-    width: 100%;
+ */
-
+@mixin RV-FlexRow__Item--half {
-    #{$-prefix},
+    flex-grow: 0;
-    #{$-prefix}--normal {
+    flex-shrink: 0;
-        @include RV-FlexRow__Item--normal;
+    flex-basis: 50%;
-    }
+    width: 50%;
 }
 
-@mixin RV-FlexRow__Item--advanced($-prefix: '&') {
+@mixin RV-FlexRow__Item--third {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 33.33%;
+    width: 33.33%;
+}
+
+@mixin RV-FlexRow__Item--quarter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 25%;
+    width: 25%;
+}
+
+@mixin RV-FlexRow__Item--content {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    flex-basis: max-content;
+}
+
+/*
+ * Shorthand for the modifiers above
+ */
+@mixin RV-FlexRow__Item--shorthands() {
     @include RV-Alignment;
 
-    #{$-prefix}--narrower {
+    &--narrower {
         @include RV-FlexRow__Item--narrower;
     }
 
-    #{$-prefix}--narrow {
+    &--narrow {
         @include RV-FlexRow__Item--narrow;
     }
 
-    #{$-prefix}--wide {
+    &--wide {
         @include RV-FlexRow__Item--wide;
     }
 
-    #{$-prefix}--wider {
+    &--wider {
         @include RV-FlexRow__Item--wider;
     }
 
-    #{$-prefix}--fixedSize {
+    &--fixedSize {
         @include RV-FlexRow__Item--fixedSize;
     }
+
+    &--half {
+        @include RV-FlexRow__Item--half;
     }
 
-@mixin RV-FlexRow--multiRow($-prefix: '&') {
+    &--third {
-    #{$-prefix}__Container {
+        @include RV-FlexRow__Item--third;
-        @include RV-FlexRow__Container--multiRow;
+    }
+
+    &--quarter {
+        @include RV-FlexRow__Item--quarter;
+    }
+
+    &--content {
+        @include RV-FlexRow__Item--content;
     }
 }
 
+/*
+ * Combining basic classes
+ */
 @mixin RV-FlexRow($-prefix: '&') {
     #{$-prefix}__Container {
         @include RV-FlexRow__Container($-prefix: $-prefix);
     }
 
     #{$-prefix}__Item {
-        @include RV-FlexRow__Item($-prefix: $-prefix);
+        @include RV-FlexRow__Item;
     }
 }
 
-@mixin RV-FlexRow--advanced($-break_width: 500px, $-prefix: '&') {
+/*
+ * Combining shorthands
+ */
+@mixin RV-FlexRow--shorthands($-break_width: 500px, $-prefix: '&') {
     #{$-prefix}__Container {
-        @include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix);
+        @include RV-FlexRow__Container--shorthands($-break_width);
     }
 
     #{$-prefix}__Item {
-        @include RV-FlexRow__Item--advanced($-prefix: $-prefix);
+        @include RV-FlexRow__Item--shorthands;
     }
 }
 
+/*
+ * Final CSS Class
+ */
 .RV-FlexRow {
     @include RV-FlexRow;
-    @include RV-FlexRow--advanced;
+    @include RV-FlexRow--shorthands;
 }

components/01_Layouts/flexRow/flexRow.hbs

@@ -25,5 +25,5 @@
 	<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
 	<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
 	<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">.</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
 </div>