Adapting Layouts to the new bem generator

components/01_Layouts/_layouts.styl

@@ -1,6 +1,6 @@
 @import 'dummy/_dummy'
 @import 'contentCrop/_contentCrop'
-@import 'fullWidthContent/_fullWidthContent'
+//@import 'fullWidthContent/_fullWidthContent'
 @import 'flexRow/_flexRow'
 @import 'flexGrid/_flexGrid'
 @import 'fan/_fan'

components/01_Layouts/alignment/_alignment.styl

@@ -2,55 +2,41 @@ RV-Alignment()
 	display grid
 
 RV-Alignment--top()
-	+RV-Block__Modifier--name('top')
+	+RV-Block--modifier()
 		align-content start
 
 RV-Alignment--bottom()
-	+RV-Block__Modifier--name('bottom')
+	+RV-Block--modifier()
 		align-content end
 
 RV-Alignment--left()
-	+RV-Block__Modifier--name('left')
+	+RV-Block--modifier()
 		justify-content start
 
 RV-Alignment--right()
-	+RV-Block__Modifier--name('right')
+	+RV-Block--modifier()
 		justify-content: end
 
 RV-Alignment--horizontalCenter()
-	+RV-Block__Modifier--name('horizontalCenter')
+	+RV-Block--modifier()
 		justify-content center
 
 RV-Alignment--verticalCenter()
-	+RV-Block__Modifier--name('verticalCenter')
+	+RV-Block--modifier()
 		align-items center
 
 RV-Alignment--center()
-	+RV-Block__Modifier--name('center')
+	+RV-Block--modifier()
-		
 		align-items center
 		justify-content center
 
 +RV-Block('RV-Alignment')
 	RV-Alignment()
 	
-	+RV-Block__Modifier()
+	RV-Alignment--top()
-		RV-Alignment--top()
+	RV-Alignment--bottom()
-		
+	RV-Alignment--left()	
-	+RV-Block__Modifier()
+	RV-Alignment--right()
-		RV-Alignment--bottom()
+	RV-Alignment--horizontalCenter()
-		
+	RV-Alignment--verticalCenter()
-	+RV-Block__Modifier()
+	RV-Alignment--center()
-		RV-Alignment--left()
-		
-	+RV-Block__Modifier()
-		RV-Alignment--right()
-	
-	+RV-Block__Modifier()
-		RV-Alignment--horizontalCenter()
-		
-	+RV-Block__Modifier()
-		RV-Alignment--verticalCenter()
-		
-	+RV-Block__Modifier()
-		RV-Alignment--center()

components/01_Layouts/contentCrop/_contentCrop.styl

@@ -1,30 +1,30 @@
 RV-ContentCrop--bottom()
-	+RV-Block__Modifier--name('bottom')
+	+RV-Block--modifier()
 		.RV-Image *
 			object-position bottom 
 		
 RV-ContentCrop--top()
-	+RV-Block__Modifier--name('top')
+	+RV-Block--modifier()
 		.RV-Image *
 			object-position top
 
 RV-ContentCrop--right()
-	+RV-Block__Modifier--name('right')
+	+RV-Block--modifier()
 		.RV-Image *
 			object-position right
 
 RV-ContentCrop--left()
-	+RV-Block__Modifier--name('left')
+	+RV-Block--modifier()
 		.RV-Image *
 			object-position left
 			
 RV-ContentCrop--center()
-	+RV-Block__Modifier--name('center')
+	+RV-Block--modifier()
 		.RV-Image *
 			object-position center
 
 RV-ContentCrop--square()
-	+RV-Block__Modifier--name('square')
+	+RV-Block--modifier()
 		width 100%
 		padding-top 100%
 		position relative
@@ -38,7 +38,7 @@ RV-ContentCrop--square()
 			right 0
 		
 RV-ContentCrop--circle()
-	+RV-Block__Modifier--name('circle')
+	+RV-Block--modifier()
 		border-radius 50%
 		width 100%
 		padding-top 100%
@@ -58,7 +58,7 @@ RV-ContentCrop--XtoY(x=1, y=1)
 		y: y
 	})
 	
-	+RV-Block__Modifier--name('XtoY')
+	+RV-Block--modifier()
 		width 100%
 		padding-top 100% * (--y / --x)
 		position relative
@@ -72,27 +72,27 @@ RV-ContentCrop--XtoY(x=1, y=1)
 			right 0
 
 RV-ContentCrop--1to2()
-	+RV-Block__Modifier--name('1to2')
+	+RV-Block--modifier()
 		RV-ContentCrop__XtoY(1, 2)
 
 RV-ContentCrop--2to1()
-	+RV-Block__Modifier--name('2to1')
+	+RV-Block--modifier()
 		RV-ContentCrop__XtoY(2, 1)
 
 RV-ContentCrop--4to3()
-	+RV-Block__Modifier--name('4to3')
+	+RV-Block--modifier()
 		RV-ContentCrop__XtoY(4, 3)
 
 RV-ContentCrop--16to9()
-	+RV-Block__Modifier--name('16to9')
+	+RV-Block--modifier()
 		RV-ContentCrop__XtoY(16, 9)
 
 RV-ContentCrop--3to2()
-	+RV-Block__Modifier--name('3to2')
+	+RV-Block--modifier()
 		RV-ContentCrop__XtoY(3, 2)
 
 RV-ContentCrop__Text--fade(background-color=white)
-	+RV-Element__Modifier--name('fade')
+	+RV-Element--modifier()
 		&:after
 			background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
 			display block
@@ -106,7 +106,7 @@ RV-ContentCrop__Text--fade(background-color=white)
 			z-index 10
 
 RV-ContentCrop__Text--ellipsis(background-color=white)
-	+RV-Element__Modifier--name('ellipsis')
+	+RV-Element--modifier()
 		&:after
 			position relative
 			display block
@@ -159,50 +159,21 @@ RV-ContentCrop(line-height=1.1, height=350px)
 	
 	RV-ContentCrop(line-height, height)
 	
-	+RV-Element()
+	RV-ContentCrop__Image()
-		RV-ContentCrop__Image()
 	
-	+RV-Element()
+	+RV-Element('Text')
-		RV-ContentCrop__Text(line-height)
+		RV-ContentCrop__Text--ellipsis()
-		
+		RV-ContentCrop__Text--fade()
-		+RV-Element__Modifier()
-			RV-ContentCrop__Text--ellipsis()
-			
-		+RV-Element__Modifier()
-			RV-ContentCrop__Text--fade()
 	
-	+RV-Block__Modifier()
+	RV-ContentCrop--bottom()
-		RV-ContentCrop--bottom()
+	RV-ContentCrop--top()
-		
+	RV-ContentCrop--right()
-	+RV-Block__Modifier()
+	RV-ContentCrop--left()
-		RV-ContentCrop--top()
+	RV-ContentCrop--center()
-	
+	RV-ContentCrop--square()
-	+RV-Block__Modifier()
+	RV-ContentCrop--circle()
-		RV-ContentCrop--right()
+	RV-ContentCrop--1to2()
-	
+	RV-ContentCrop--2to1()
-	+RV-Block__Modifier()
+	RV-ContentCrop--4to3()
-		RV-ContentCrop--left()
+	RV-ContentCrop--16to9()
-	
+	RV-ContentCrop--3to2()
-	+RV-Block__Modifier()
-		RV-ContentCrop--center()
-	
-	+RV-Block__Modifier()
-		RV-ContentCrop--square()
-		
-	+RV-Block__Modifier()
-		RV-ContentCrop--circle()
-		
-	+RV-Block__Modifier()
-		RV-ContentCrop--1to2()
-		
-	+RV-Block__Modifier()
-		RV-ContentCrop--2to1()
-		
-	+RV-Block__Modifier()
-		RV-ContentCrop--4to3()
-		
-	+RV-Block__Modifier()
-		RV-ContentCrop--16to9()
-		
-	+RV-Block__Modifier()
-		RV-ContentCrop--3to2()

components/01_Layouts/dummy/_dummy.styl

@@ -1,18 +1,18 @@
 +RV-Block('RV-Dummy')
 	
-	&--oranage
+	+RV-Block--modifier('orange')
 		background-color #F4A460 !important
 		
-	&--blue
+	+RV-Block--modifier('blue')
 		background-color #6495ED !important
 		
-	&--green
+	+RV-Block--modifier('green')
 		background-color #90EE90 !important
 		
-	&--red
+	+RV-Block--modifier('red')
 		background-color #ce6d6d !important
 		
-	&--yellow
+	+RV-Block--modifier('yellow')
 		background-color #eae144 !important
 		
 	background-color #F4A460
@@ -40,25 +40,25 @@
 		height var(--height)
 		width var(--width)
 		
-		+RV-Element__Modifier('large')
+		+RV-Element--modifier('large')
 			--height 500px
 			--width 500px
 			
-		+RV-Element__Modifier('small')
+		+RV-Element--modifier('small')
 			--height 100px
 			--width 100px
 
-	+RV-Block__Modifier('square')
+	+RV-Block--modifier('square')
 		height 350px
 		width 350px
 		
-	+RV-Block__Modifier('portrait')
+	+RV-Block--modifier('portrait')
 		height 350px
 		width 150px
 		
-	+RV-Block__Modifier('landscape')
+	+RV-Block--modifier('landscape')
 		width 350px
 		height 150px
 	
-	+RV-Block__Modifier('red')
+	+RV-Block--modifier('red')
 		background-color #d8583e

components/01_Layouts/fan/_fan.styl

@@ -15,9 +15,9 @@
  * but will fill the parent's width
  */
 RV-Fan--horizontal(base-height, base-width)
-	+RV-Block__Modifier--name('horizontal')
+	+RV-Block--modifier()
 		flex-direction row
-		
+
 		+RV-Element('Base')
 			//flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
 			flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width
@@ -34,7 +34,7 @@ RV-Fan--horizontal(base-height, base-width)
 				margin var(--_margin)
 				padding var(--_padding)
 				box-sizing border-box
-		
+
 		+RV-Element('Surface')
 			height base-height
 			box-sizing border-box
@@ -46,7 +46,7 @@ RV-Fan--horizontal(base-height, base-width)
  * minimal height is given height, will grow with content
  */
 RV-Fan--vertical(base-height, base-width)
-	+RV-Block__Modifier--name('vertical')
+	+RV-Block--modifier()
 		flex-direction column
 		width base-width
 		min-width initial
@@ -56,6 +56,9 @@ RV-Fan--vertical(base-height, base-width)
 			box-sizing border-box
 			min-width initial
 			min-height base-height
+			
+			+RV-Element--modifier('fixedHeight')
+				--wurst wasserererer
 
 
 /*
@@ -64,7 +67,7 @@ RV-Fan--vertical(base-height, base-width)
  * Width of the base and surface in vertical are base-width
  */
 RV-Fan--auto(base-height, base-width)
-	+RV-Block__Modifier--name('auto')
+	+RV-Block--modifier()
 		flex-flow row wrap
 
 		+RV-Element('Base')
@@ -80,24 +83,24 @@ RV-Fan--auto(base-height, base-width)
  * Element Mixins
  * ############### */
 RV-Fan__Base(base-height, base-width)
-	+RV-Element--name('Base')
+	+RV-Element()
 		box-sizing border-box
 		flex-basis base-width
 		flex-shrink 0
 		flex-grow 0
 
 RV-Fan__Surface--fixedHeight(height)
-	+RV-Element__Modifier--name('fixedHeight')
+	+RV-Element--modifier()
 		height height
 		box-sizing border-box
 
 RV-Fan__Surface--fixedWidth(width)
-	+RV-Element__Modifier--name('fixedWidth')
+	+RV-Element--modifier()
 		max-width width
 		box-sizing border-box
 
 RV-Fan__Surface(base-height, base-width)
-	+RV-Element--name('Surface')
+	+RV-Element()
 		overflow hidden
 		box-sizing border-box
 		height base-height
@@ -112,36 +115,21 @@ RV-Fan(base-height, base-width)
 	position relative
 	min-width base-width
 
-/* #########
- * CSS-Class
- * ######### */
 +RV-Block('RV-Fan')
 	RV-CSSParameter({
 		base-height: 280px,
 		base-width: 320px
 	})
-	
-	--inner-spacing 0px
 
 	RV-Fan(--base-height, --base-width)
+	RV-Fan__Base(--base-height, --base-width)
+	
 	+RV-Element()
+		RV-Fan__Surface--fixedHeight(base-height)
+		RV-Fan__Surface--fixedWidth(base-width)
 		RV-Fan__Surface(--base-height, --base-width)
 		
-		+RV-Element__Modifier()
+	RV-Fan--auto(--base-height, --base-width)
-			RV-Fan__Surface--fixedWidth(--base-width)
+	RV-Fan--vertical(--base-height, --base-width)
-			
+	RV-Fan--horizontal(--base-height, --base-width)
-		+RV-Element__Modifier()
-			RV-Fan__Surface--fixedHeight(--base-height)
-
-	+RV-Element()
-		RV-Fan__Base(--base-height, --base-width)
-
-	+RV-Block__Modifier()
-		RV-Fan--fullWidth(--base-height, --base-width)
-	+RV-Block__Modifier()
-		RV-Fan--vertical(--base-height, --base-width)
-	+RV-Block__Modifier()
-		RV-Fan--horizontal(--base-height, --base-width)
-	+RV-Block__Modifier()
-		RV-Fan--auto(--base-height, --base-width)
 				

components/01_Layouts/flexGrid/_flexGrid.styl

@@ -1,19 +1,19 @@
 
 RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
-	+RV-Block__Modifier--name('autoWidth')
+	+RV-Block--modifier()
 		grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr))
 		grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
 		grid-auto-rows minmax(item-height, 1fr)
 
 RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
-	+RV-Block__Modifier--name('fixedSize')
+	+RV-Block--modifier()
 		grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
 		grid-auto-rows minmax(item-height, 1fr)
 		grid-template-columns repeat(auto-fill, item-width)
 		justify-content space-between
 
 RV-FlexGrid--masonry(item-height=300px,item-width=300px)
-	+RV-Block__Modifier--name('masonry')
+	+RV-Block--modifier()
 		display unquote(block)
 		column-count auto
 		column-width item-width
@@ -28,7 +28,7 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
 			}
 
 RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
-	+RV-Block__Modifier--name('verticalMasonry')
+	+RV-Block--modifier()
 		display unquote(block)
 		column-count auto
 		column-width item-width
@@ -42,7 +42,7 @@ RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
 			}
 			
 RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
-	+RV-Block__Modifier--name('horizontalMasonry')
+	+RV-Block--modifier()
 		display flex
 		flex-direction row
 		flex-wrap wrap
@@ -53,7 +53,7 @@ RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
 		
 
 RV-FlexGrid__Item(item-height, item-width)
-	+RV-Element--name('Item')
+	+RV-Element()
 		height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
 		& > *  {
 			height 100%
@@ -72,20 +72,9 @@ RV-FlexGrid(item-height, item-width)
 	})
 	RV-FlexGrid(--item-height, --item-width)
 	
-	+RV-Element()
+	RV-FlexGrid__Item(--item-height, --item-width)
-		RV-FlexGrid__Item(--item-height, --item-width)
+	RV-FlexGrid--autoWidth(--item-height, --item-width)
-
+	RV-FlexGrid--fixedSize(--item-height, --item-width)
-	+RV-Block__Modifier()
+	RV-FlexGrid--masonry(--item-height, --item-width)
-		RV-FlexGrid--autoWidth(--item-height, --item-width)
+	RV-FlexGrid--verticalMasonry(--item-height, --item-width)
-		
+	RV-FlexGrid--horizontalMasonry(--item-height, --item-width)		
-	+RV-Block__Modifier()
-		RV-FlexGrid--fixedSize(--item-height, --item-width)
-		
-	+RV-Block__Modifier()
-		RV-FlexGrid--masonry(--item-height, --item-width)
-		
-	+RV-Block__Modifier()
-		RV-FlexGrid--verticalMasonry(--item-height, --item-width)
-	
-	+RV-Block__Modifier()
-		RV-FlexGrid--horizontalMasonry(--item-height, --item-width)		

components/01_Layouts/flexRow/_flexRow.styl

@@ -6,11 +6,11 @@
  * Orientation
  */
 RV-FlexRow--horizontal()
-	+RV-Block__Modifier--name('horizontal')
+	+RV-Block--modifier()
 		flex-direction row
 
 RV-FlexRow--vertical()
-	+RV-Block__Modifier--name('vertical')
+	+RV-Block--modifier()
 		flex-direction column
 		
 		+RV-Element('Item')
@@ -18,20 +18,20 @@ RV-FlexRow--vertical()
 
 
 RV-FlexRow__Item--outsideBreakPoint()
-	+RV-Element__Modifier--name('outsideBreakPoint')
+	+RV-Element--modifier()
 		margin-bottom -100vh
 		height max-content
 		flex-shrink 999
 
 RV-FlexRow__Item--insideBreakPoint()
-	+RV-Element__Modifier--name('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--name('breakPoint')
+	+RV-Block--modifier()
 		RV-Reset()
 		gap 0px
 		
@@ -45,11 +45,8 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
 			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
 			overflow hidden
 			
-			+RV-Element__Modifier()
+			RV-FlexRow__Item--outsideBreakPoint()
-				RV-FlexRow__Item--outsideBreakPoint()
+			RV-FlexRow__Item--insideBreakPoint()
-				
-			+RV-Element__Modifier()
-				RV-FlexRow__Item--insideBreakPoint()
 				
 			margin 0
 			padding 0
@@ -70,16 +67,17 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
  * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
  */
 RV-FlexRow--auto()
-	+RV-Block__Modifier--name('auto')
+	+RV-Block--modifier()
-		RV-FlexRow--horizontal()
+		+RV-Squash()
-		flex-wrap wrap
+			RV-FlexRow--horizontal()
+			flex-wrap wrap
 
 
 /* ##########
  * Item class
   ########### */
 RV-FlexRow__Item()
-	+RV-Element--name('Item')
+	+RV-Element()
 		flex-grow 3
 		flex-shrink 3
 
@@ -88,22 +86,22 @@ RV-FlexRow__Item()
  */
 
 RV-FlexRow__Item--narrower()
-	+RV-Element__Modifier--name('narrower')
+	+RV-Element--modifier()
 		flex-grow 1
 		flex-shrink 5
 
 RV-FlexRow__Item--narrow()
-	+RV-Element__Modifier--name('narrow')
+	+RV-Element--modifier()
 		flex-grow 2
 		flex-shrink 4
 
 RV-FlexRow__Item--wide()
-	+RV-Element__Modifier--name('wide')
+	+RV-Element--modifier()
 		flex-grow 4
 		flex-shrink 2
 
 RV-FlexRow__Item--wider()
-	+RV-Element__Modifier--name('wider')
+	+RV-Element--modifier()
 		flex-grow 5
 		flex-shrink 1
 
@@ -111,32 +109,32 @@ RV-FlexRow__Item--wider()
  * Item has always the given width
  */
 RV-FlexRow__Item--fixedSize(width)
-	+RV-Element__Modifier--name('fixedSize')
+	+RV-Element--modifier()
 		RV-Sizes--fixedSize(width)
 
 /*
  * Item width relativ to the container
  */
 RV-FlexRow__Item--half()
-	+RV-Element__Modifier--name('half')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis 50%
 
 RV-FlexRow__Item--third()
-	+RV-Element__Modifier--name('third')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis (100/3)%		
 
 RV-FlexRow__Item--quarter()
-	+RV-Element__Modifier--name('quarter')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis 25%
 	
 RV-FlexRow__Item--content()
-	+RV-Element__Modifier--name('content')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis max-content
@@ -159,46 +157,19 @@ RV-FlexRow()
 	})
 	
 	+RV-Element()
+		RV-FlexRow__Item--narrower()
+		RV-FlexRow__Item--narrow()
+		RV-FlexRow__Item--wide()
+		RV-FlexRow__Item--wider()
+		RV-FlexRow__Item--fixedSize(--width)
+		RV-FlexRow__Item--narrower()
+		RV-FlexRow__Item--half()
+		RV-FlexRow__Item--third()
+		RV-FlexRow__Item--quarter()
+		RV-FlexRow__Item--content()
 		RV-FlexRow__Item()
-		
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--narrower()
 	
-		+RV-Element__Modifier()
+	RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
-			RV-FlexRow__Item--narrow()
+	RV-FlexRow--horizontal()
-			
+	RV-FlexRow--vertical()
-		+RV-Element__Modifier()
+	RV-FlexRow--auto()
-			RV-FlexRow__Item--wide()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--wider()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--fixedSize(--width)
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--narrower()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--half()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--third()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--quarter()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--content()
-	
-	+RV-Block__Modifier()
-		RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
-	
-	+RV-Block__Modifier()
-		RV-FlexRow--horizontal()
-		
-	+RV-Block__Modifier()
-		RV-FlexRow--vertical()
-		
-	+RV-Block__Modifier()
-		RV-FlexRow--auto()

components/01_Layouts/fullWidthContent/_fullWidthContent.styl

@@ -2,7 +2,7 @@ RV-FullWidthContent()
 	width 100%
 
 RV-FullWidthContent__Item()
-	+RV-Element--name('Item')
+	+RV-Element()
 		width 100%
 		RV-ContentCrop__Text()
 		RV-ContentCrop__Image()
@@ -11,5 +11,4 @@ RV-FullWidthContent__Item()
 +RV-Block('RV-FullWidthContent')
 	RV-FullWidthContent()
 	
-	+RV-Element()
+	RV-FullWidthContent__Item()
-		RV-FullWidthContent__Item()