Converting Layouts to mixin name based generatort

components/01_Layouts/_layouts.styl

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

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-BreakPoint__Item(breakPoint, fixedSize=var(--fixedSize))
-	RV-FlexRow()
+	+RV-Element()
-	+RV-Squash()
+		RV-FlexRow__Item()
-		RV-FlexRow--wrap()
+		flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
+		overflow: hidden;
+		--outer-spacing 0
+		--inner-spacing 0
 		
-	overflow-y hidden
+		RV-BreakPoint__Item--outside()
+		RV-BreakPoint__Item--inside()
+		RV-BreakPoint__Item--fixedSize(fixedSize)
 
-	RV-Reset()
+// Test skipping a level or two
-	gap 0px
+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-BreakPoint--wrap__Item()	
-			+RV-Element--modifier('outside')
+
-				margin-bottom -100vh
+
+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-BreakPoint--vertical__Item()
+	+RV-Element()
+		RV-BreakPoint--vertical__Item--outside()
 
-		+RV-Element('Item')
-			+RV-Element--modifier('outside')
-				margin-bottom unset
-				height unset
 
 RV-BreakPoint--vertical()
 	+RV-Block--modifier()
@@ -45,31 +63,33 @@ RV-BreakPoint--vertical()
 		flex-wrap nowrap
 		height 100%
 		
-		+RV-Element('Item')
+		RV-BreakPoint--vertical__Item()
-			+RV-Element--modifier('outside')
-				margin-bottom unset
-				height unset
 
-+RV-Block('RV-BreakPoint')
+RV-BreakPoint(breakPoint)
-	RV-CSSParameter({
+	+RV-Block()
-		breakPoint: 500px
+		RV-CSSParameter({
-		fixedSize: 100px
+			breakPoint: breakPoint
-	})
+			fixedSize: 100px
+		})
 		
-	&&
+		&&
-		--inner-spacing 0
+			--inner-spacing 0
+		RV-FlexRow()
+		RV-FlexRow--wrap()
 		
-	RV-BreakPoint(--breakPoint)
+		overflow-y hidden
 		
-	+RV-Element()
+		RV-Reset()
-		RV-BreakPoint__Item(--breakPoint)
+		gap 0px
-		RV-BreakPoint__Item--outside()
+		
-		RV-BreakPoint__Item--inside()
+		RV-BreakPoint__Item(--breakPoint, --fixedSize)
-		RV-BreakPoint__Item--fixedSize(--fixedSize)
+		
+		RV-BreakPoint--wrap()
+		RV-BreakPoint--horizontal()
+		RV-BreakPoint--vertical()
+		
+RV-BreakPoint(500px)
 
-	RV-BreakPoint--wrap()
-	RV-BreakPoint--horizontal()
-	RV-BreakPoint--vertical()
 		
 	
 	

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 class="RV-BreakPoint__Item RV-Dummy">
-		<div>Larger</div>
+		<div>ItemItem</div>
 	</div>
 </div>

components/01_Layouts/fan/_fan.styl

@@ -1,3 +1,4 @@
+
 /*
  * A Fan is a layout that consists of two parts:
  * The base and the surface, named after a hand fan.
@@ -18,13 +19,9 @@ RV-Fan--horizontal__Base()
 		RV-BreakPoint__Item(--localBreakPoint)
 		RV-BreakPoint__Item--outside()
 			
-		flex-basis base-width
+		flex-basis --base-width
 		flex-grow 0
 
-RV-Fan--horizontal__Base--wurst()
-	+RV-Element--modifier()
-		--wurst wasser
-
 /*
  * Base on the left, Surface on the right
  * Base is fixed, given size, Surface is given height
@@ -37,9 +34,7 @@ RV-Fan--horizontal(base-height, base-width)
 		})
 		RV-BreakPoint(--localBreakPoint)
 		RV-Fan--horizontal__Surface()
-		+RV-Element()
+		RV-Fan--horizontal__Base()
-			RV-Fan--horizontal__Base()
-			RV-Fan--horizontal__Base--wurst()
 
 		RV-BreakPoint--horizontal()
 		min-width base-width
@@ -125,6 +120,9 @@ RV-Fan__Surface(base-height, base-width)
 			height calc_height(100%)
 			width calc_width(100%)
 			
+		RV-Fan__Surface--fixedHeight(base-height)
+		RV-Fan__Surface--fixedWidth(base-width)
+
 /* ############
  * Block Mixin
  * ############ */
@@ -138,43 +136,11 @@ RV-Fan(base-height, base-width)
 		position relative
 		min-width min-content
 
-+RV-Generate()
+		RV-Fan__Base(--base-height, --base-width)
-	RV-Fan(280px, 320px)
-	RV-Fan__Base(--base-height, --base-width)
-		
-	+RV-Element()
 		RV-Fan__Surface(--base-height, --base-width)
-		RV-Fan__Surface--fixedHeight(base-height)
-		RV-Fan__Surface--fixedWidth(base-width)
 		
-	RV-Fan--auto(--base-height, --base-width)
+		RV-Fan--auto(--base-height, --base-width)
-	RV-Fan--vertical(--base-height, --base-width)
+		RV-Fan--vertical(--base-height, --base-width)
-	RV-Fan--horizontal(--base-height, --base-width)
+		RV-Fan--horizontal(--base-height, --base-width)
-
-
-RV-Fan--horizontal__Surface()
-	+RV-BEM()
-		--peter bernd
-
-RV-Fan--horizontal__Base--wurst()
-	+RV-BEM()
-		--fan wurst
-
-RV-Fan--horizontal__Base()
-	+RV-BEM()
-		RV-Fan--horizontal__Base--wurst()
-		RV-Fan--horizontal__Surface()
-		--wurst wasser
-
-RV-Fan--horizontal()
-	+RV-BEM()
-		RV-Fan--horizontal__Base()
-		--kaka pipi
-
-RV-Fan()
-	+RV-BEM()
-		RV-Fan--horizontal()
-		--blubb bernd
-
-RV-Fan()
 
+RV-Fan(280px, 320px)

components/01_Layouts/flexGrid/_flexGrid.styl

@@ -12,20 +12,33 @@ RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
 		grid-template-columns repeat(auto-fill, item-width)
 		justify-content space-between
 
+RV-FlexGrid--masonry__Item()
+	+RV-Element()
+		display inline-block
+		width 100%
+		height unset
+		margin-bottom: var(--inner-spacing);
+		& > *  {
+			height auto
+		}
+		
 RV-FlexGrid--masonry(item-height=300px,item-width=300px)
 	+RV-Block--modifier()
 		display unquote(block)
 		column-count auto
 		column-width item-width
 		
-		+RV-Element('Item')
+		RV-FlexGrid--masonry__Item()
-			display inline-block
+		
-			width 100%
+
-			height unset
+RV-FlexGrid--verticalMasonry__Item()
-			margin-bottom: var(--inner-spacing);
+	+RV-Element()
-			& > *  {
+		display inline-block
-				height auto
+		height unset
-			}
+		margin-bottom: var(--inner-spacing);
+		& > *  {
+			height auto
+		}
 		
 RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
 	+RV-Block--modifier()
@@ -33,13 +46,12 @@ RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
 		column-count auto
 		column-width item-width
 		
-		+RV-Element('Item')
+		RV-FlexGrid--verticalMasonry__Item()
-			display inline-block
+			
-			height unset
+RV-FlexGrid--horizontalMasonry__Item()
-			margin-bottom: var(--inner-spacing);
+	+RV-Element()
-			& > *  {
+		height calc_height(item-height)
-				height auto
+		width calc_width(max-content)
-			}
 
 RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
 	+RV-Block--modifier()
@@ -47,9 +59,7 @@ RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
 		flex-direction row
 		flex-wrap wrap
 		
-		+RV-Element('Item')
+		RV-FlexGrid--horizontalMasonry__Item()
-			height calc_height(item-height)
-			width calc_width(max-content)
 		
 
 RV-FlexGrid__Item(item-height, item-width)
@@ -61,20 +71,21 @@ RV-FlexGrid__Item(item-height, item-width)
 		}
 
 RV-FlexGrid(item-height, item-width)
-	display grid
+	+RV-Block()
+		RV-CSSParameter({
+			item-height: item-height,
+			item-width: item-width
+		})
 		
-	grid-template-columns: repeat(auto-fill, var(--item-width));
+		display grid
+		grid-template-columns: repeat(auto-fill, var(--item-width));
 		
-+RV-Block('RV-FlexGrid')
+		RV-FlexGrid__Item(--item-height, --item-width)
-	RV-CSSParameter({
-		item-height: 300px,
-		item-width: 300px
-	})
-	RV-FlexGrid(--item-height, --item-width)
 		
-	RV-FlexGrid__Item(--item-height, --item-width)
+		RV-FlexGrid--autoWidth(--item-height, --item-width)
-	RV-FlexGrid--autoWidth(--item-height, --item-width)
+		RV-FlexGrid--fixedSize(--item-height, --item-width)
-	RV-FlexGrid--fixedSize(--item-height, --item-width)
+		RV-FlexGrid--masonry(--item-height, --item-width)
-	RV-FlexGrid--masonry(--item-height, --item-width)
+		RV-FlexGrid--verticalMasonry(--item-height, --item-width)
-	RV-FlexGrid--verticalMasonry(--item-height, --item-width)
+		RV-FlexGrid--horizontalMasonry(--item-height, --item-width)	
-	RV-FlexGrid--horizontalMasonry(--item-height, --item-width)		
+
+RV-FlexGrid(300px, 300px)

components/01_Layouts/flexRow/_flexRow.styl

@@ -21,14 +21,6 @@ RV-FlexRow--wrap()
 		flex-direction row
 		flex-wrap wrap
 
-
-/* ##########
- * Item class
-  ########### */
-RV-FlexRow__Item()
-	+RV-Element()
-		flex-grow 3
-
 /*
  * Varios relative width of items to each other
  */
@@ -87,20 +79,12 @@ RV-FlexRow__Item--content()
 		flex-basis max-content
 
 /* ##########
- * Block
+ * Item class
   ########### */
-RV-FlexRow()
+RV-FlexRow__Item()
-	display flex
-
-+RV-Block('RV-FlexRow')
-	RV-FlexRow()
-	
-	RV-CSSParameter({
-		width: 100px
-	})
-	
 	+RV-Element()
-		RV-FlexRow__Item()
+		flex-grow 3
+		
 		RV-FlexRow__Item--narrower()
 		RV-FlexRow__Item--narrow()
 		RV-FlexRow__Item--wide()
@@ -111,7 +95,21 @@ RV-FlexRow()
 		RV-FlexRow__Item--quarter()
 		RV-FlexRow__Item--content()
 
-	RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
+/* ##########
-	RV-FlexRow--horizontal()
+ * Block
-	RV-FlexRow--vertical()
+  ########### */
-	RV-FlexRow--wrap()
+RV-FlexRow()
+	+RV-Block()
+		RV-CSSParameter({
+			width: 100px
+		})
+		display flex
+		
+		RV-FlexRow__Item()
+		
+		RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
+		RV-FlexRow--horizontal()
+		RV-FlexRow--vertical()
+		RV-FlexRow--wrap()
+
+RV-FlexRow()

components/03_Styles/_styles.styl

@@ -1,4 +1,4 @@
 @import 'dummy/_dummy'
-@import 'elementList/_elementList'
+//@import 'elementList/_elementList'
-@import 'boxShadow/_boxShadow'
+//@import 'boxShadow/_boxShadow'
-@import 'iconized/_iconized'
+//@import 'iconized/_iconized'

components/_components.styl

@@ -1,11 +1,13 @@
+bem_debug = true
+
 @import '00_Tools/_tools'
 @import '01_Layouts/_layouts'
-/*@import '02_ContentShape/_contentShape'
+//@import '02_ContentShape/_contentShape'
 @import '03_Styles/_styles'
-@import '04_Atoms/_atoms'
+//@import '04_Atoms/_atoms'
-@import '05_Molecules/_molecules'
+//@import '05_Molecules/_molecules'
 
-@import '06_Organisms/_organisms'
+//@import '06_Organisms/_organisms'
 //@import '10_Examples/playground/_playground'