Converting Layouts to mixin name based generatort

components/01_Layouts/breakPoint/_breakPoint.styl

@@ -1,11 +1,3 @@
-RV-BreakPoint__Item(breakPoint)
-	+RV-Element()
-		RV-FlexRow__Item()
-		flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
-		overflow: hidden;
-		--outer-spacing 0
-		--inner-spacing 0
-
 RV-BreakPoint__Item--outside()
 	+RV-Element--modifier()
 		flex-shrink 999
@@ -14,30 +6,56 @@ RV-BreakPoint__Item--inside()
 	+RV-Element--modifier()
 		flex-grow 0
 
-RV-BreakPoint(breakPoint)
-	RV-FlexRow()
-	+RV-Squash()
-		RV-FlexRow--wrap()
-	
-	overflow-y hidden
-	
-	RV-Reset()
-	gap 0px
+RV-BreakPoint__Item(breakPoint, fixedSize=var(--fixedSize))
+	+RV-Element()
+		RV-FlexRow__Item()
+		flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
+		overflow: hidden;
+		--outer-spacing 0
+		--inner-spacing 0
+		
+		RV-BreakPoint__Item--outside()
+		RV-BreakPoint__Item--inside()
+		RV-BreakPoint__Item--fixedSize(fixedSize)
+
+// Test skipping a level or two
+RV-BreakPoint--wrap__Item--outside()
+	+RV-Element--modifier()
+		margin-bottom -100vh
+		
+RV-BreakPoint--wrap__Item()
+	+RV-Element()
+		RV-BreakPoint--wrap__Item--outside()
 
 RV-BreakPoint--wrap()
 	+RV-Block--modifier()
-		+RV-Element('Item')
-			+RV-Element--modifier('outside')
-				margin-bottom -100vh
+		RV-BreakPoint--wrap__Item()	
+
+
+RV-BreakPoint--horizontal__Item--outside()
+	+RV-Element--modifier()
+		margin-bottom unset
+		height unset
+		
+RV-BreakPoint--horizontal__Item()
+	+RV-Element()
+		RV-BreakPoint--horizontal__Item--outside()
 
 RV-BreakPoint--horizontal()
 	+RV-Block--modifier()
 		flex-wrap nowrap
+		flex-direction row
+		RV-BreakPoint--horizontal__Item()
+
+RV-BreakPoint--vertical__Item--outside()
+	+RV-Element--modifier()
+		margin-bottom unset
+		height unset
 		
-		+RV-Element('Item')
-			+RV-Element--modifier('outside')
-				margin-bottom unset
-				height unset
+RV-BreakPoint--vertical__Item()
+	+RV-Element()
+		RV-BreakPoint--vertical__Item--outside()
+
 
 RV-BreakPoint--vertical()
 	+RV-Block--modifier()
@@ -45,31 +63,33 @@ RV-BreakPoint--vertical()
 		flex-wrap nowrap
 		height 100%
 		
-		+RV-Element('Item')
-			+RV-Element--modifier('outside')
-				margin-bottom unset
-				height unset
+		RV-BreakPoint--vertical__Item()
 
-+RV-Block('RV-BreakPoint')
-	RV-CSSParameter({
-		breakPoint: 500px
-		fixedSize: 100px
-	})
-	
-	&&
-		--inner-spacing 0
-	
-	RV-BreakPoint(--breakPoint)
-	
-	+RV-Element()
-		RV-BreakPoint__Item(--breakPoint)
-		RV-BreakPoint__Item--outside()
-		RV-BreakPoint__Item--inside()
-		RV-BreakPoint__Item--fixedSize(--fixedSize)
+RV-BreakPoint(breakPoint)
+	+RV-Block()
+		RV-CSSParameter({
+			breakPoint: breakPoint
+			fixedSize: 100px
+		})
 		
-	RV-BreakPoint--wrap()
-	RV-BreakPoint--horizontal()
-	RV-BreakPoint--vertical()
+		&&
+			--inner-spacing 0
+		RV-FlexRow()
+		RV-FlexRow--wrap()
+		
+		overflow-y hidden
+		
+		RV-Reset()
+		gap 0px
+		
+		RV-BreakPoint__Item(--breakPoint, --fixedSize)
+		
+		RV-BreakPoint--wrap()
+		RV-BreakPoint--horizontal()
+		RV-BreakPoint--vertical()
+		
+RV-BreakPoint(500px)
+
 		
 	
 	

components/01_Layouts/breakPoint/breakPoint.hbs

@@ -6,13 +6,22 @@
 	}
 </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>Content</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-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
-		<div>Larger</div>
+	<div class="RV-BreakPoint__Item RV-Dummy">
+		<div>ItemItem</div>
 	</div>
 </div>