Outsource Breakpoint to its own component

components/01_Layouts/_layouts.styl

@@ -1,3 +1,4 @@
 @import 'flexRow/_flexRow'
 @import 'flexGrid/_flexGrid'
-@import 'fan/_fan'
+@import 'fan/_fan'
+@import 'breakPoint/_breakPoint'

components/01_Layouts/breakPoint/_breakPoint.styl

@@ -0,0 +1,73 @@
+RV-BreakPoint__Item(localBreakPoint)
+	+RV-Element()
+		RV-FlexRow__Item()
+		flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
+		overflow: hidden;
+		--outer-spacing 0
+		--inner-spacing 0
+
+RV-BreakPoint__Item--outside()
+	+RV-Element--modifier()
+		margin-bottom -100vh
+		flex-shrink 999
+
+RV-BreakPoint__Item--inside()
+	+RV-Element--modifier()
+		flex-grow 0
+
+RV-BreakPoint(localBreakPoint)
+	RV-FlexRow()
+	+RV-Squash()
+		RV-FlexRow--wrap()
+	
+	overflow-y hidden
+	
+	RV-Reset()
+	gap 0px
+	
+	RV-Utils__ElementAmount--range(0, 20, @(index, total){
+			min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
+		}
+	)
+
+RV-BreakPoint--horizontal()
+	+RV-Block--modifier()
+		flex-wrap nowrap
+		min-width max-content
+		
+		+RV-Element('Item')
+			+RV-Element--modifier('outside')
+				margin-bottom unset
+				height unset		
+
+RV-BreakPoint--vertical()
+	+RV-Block--modifier()
+		flex-direction column
+		flex-wrap nowrap
+		height 100%
+		
+		+RV-Element('Item')
+			+RV-Element--modifier('outside')
+				margin-bottom unset
+				height unset
+
++RV-Block('RV-BreakPoint')
+	RV-CSSParameter({
+		localBreakPoint: 500px
+	})
+	
+	&&
+		--inner-spacing 0
+	
+	RV-BreakPoint(--localBreakPoint)
+	
+	+RV-Element()
+		RV-BreakPoint__Item(--localBreakPoint)
+		RV-BreakPoint__Item--outside()
+		RV-BreakPoint__Item--inside()
+		
+	RV-BreakPoint--horizontal()
+	RV-BreakPoint--vertical()
+		
+	
+	

components/01_Layouts/breakPoint/breakPoint.config.json

@@ -0,0 +1,17 @@
+{
+	"title": "BreakPoint",
+	"variants": [
+		{
+			"name": "Horizontal",
+			"context": {
+				"modifier": "--horizontal"
+			}
+		},
+		{
+			"name": "Vertical",
+			"context": {
+				"modifier": "--vertical"
+			}
+		}
+	]
+}

components/01_Layouts/breakPoint/breakPoint.hbs

@@ -0,0 +1,27 @@
+
+<style>
+	#wrapper {
+		height: 100vh;
+		--outer-spacing: 0;
+	}
+</style>
+<div class="RV-BreakPoint RV-BreakPoint{{modifier}}">
+	<div class="RV-BreakPoint__Item RV-Dummy RV-Spacing__Inner--medium">
+		<div>ItemItem</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
+		<div>Larger</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-Dummy">
+		<div>ItemItem</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-Dummy">
+		<div>ItemItem</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-BreakPoint__Item--inside RV-Dummy--yellow RV-Dummy">
+		<div style="margin: 15px;">Smaller</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-Dummy">
+		<div>ItemItem</div>
+	</div>
+</div>

components/01_Layouts/flexRow/_flexRow.styl

@@ -12,65 +12,14 @@ RV-FlexRow--horizontal()
 RV-FlexRow--vertical()
 	+RV-Block--modifier()
 		flex-direction column
-		
-		+RV-Element('Item')
-			margin-bottom unset
-
-
-RV-FlexRow__Item--outsideBreakPoint()
-	+RV-Element--modifier()
-		margin-bottom -100vh
-		height max-content
-		flex-shrink 999
-
-RV-FlexRow__Item--insideBreakPoint()
-	+RV-Element--modifier()
-		flex-grow 0
-/*
- * Breaks from row to column orientation at the given breakpoint
- * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
- */
-RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
-	+RV-Block--modifier()
-		RV-Reset()
-		gap 0px
-		
-		RV-Utils__ElementAmount--range(0, 20, @(index, total){
-				min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
-			}
-		)
-		
-		+RV-Element('Item')
-			min-width initial
-			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
-			overflow hidden
-			
-			RV-FlexRow__Item--outsideBreakPoint()
-			RV-FlexRow__Item--insideBreakPoint()
-				
-			margin 0
-			padding 0
-			--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
-			--height 100%
-			*
-				position relative
-				height calc(var(--height) - var(--_spacing-difference))
-				width calc(var(--height) - var(--_spacing-difference))
-				top calc(var(--_spacing-difference) / 2)
-				left calc(var(--_spacing-difference) / 2)
-		
-		@media(max-width mediaBreakPoint)
-			flex-direction row
-	
 
 /*
  * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
  */
-RV-FlexRow--auto()
+RV-FlexRow--wrap()
 	+RV-Block--modifier()
-		+RV-Squash()
+		flex-direction row
-			RV-FlexRow--horizontal()
+		flex-wrap wrap
-			flex-wrap wrap
 
 
 /* ##########
@@ -144,8 +93,6 @@ RV-FlexRow__Item--content()
   ########### */
 RV-FlexRow()
 	display flex
-	height 100%
-	overflow-y hidden
 
 +RV-Block('RV-FlexRow')
 	RV-FlexRow()
@@ -172,4 +119,4 @@ RV-FlexRow()
 	RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
 	RV-FlexRow--horizontal()
 	RV-FlexRow--vertical()
-	RV-FlexRow--auto()
+	RV-FlexRow--wrap()

components/01_Layouts/flexRow/flexRow.config.json

@@ -17,15 +17,9 @@
 			}
 		},
 		{
-			"name": "Breakpoint",
+			"name": "Wrap",
 			"context": {
-				"modifier": "--breakPoint"
+				"modifier": "--wrap"
-			}
-		},
-		{
-			"name": "Auto",
-			"context": {
-				"modifier": "--auto"
 			}
 		}
 	]