Adapting ContentShape to Mixinname based generator

components/02_ContentShape/alignment/_alignment.styl

@@ -1,38 +1,41 @@
-RV-Alignment()
-	display grid
-
 RV-Alignment--top()
 	+RV-Block--modifier()
+		display grid
 		align-content start
 
 RV-Alignment--bottom()
 	+RV-Block--modifier()
+		display grid
 		align-content end
 
 RV-Alignment--left()
 	+RV-Block--modifier()
+		display grid
 		justify-content start
 
 RV-Alignment--right()
 	+RV-Block--modifier()
-		justify-content: end
+		display grid
+		justify-content end
 
 RV-Alignment--horizontalCenter()
 	+RV-Block--modifier()
+		display grid	
 		justify-content center
 
 RV-Alignment--verticalCenter()
 	+RV-Block--modifier()
+		display grid
 		align-items center
 
 RV-Alignment--center()
 	+RV-Block--modifier()
+		display grid
 		align-items center
 		justify-content center
 
-+RV-Block--shorthand('RV-Alignment')
 RV-Alignment()
-	
+	+RV-Block()		
 		RV-Alignment--top()
 		RV-Alignment--bottom()
 		RV-Alignment--left()	
@@ -40,3 +43,5 @@ RV-Alignment--center()
 		RV-Alignment--horizontalCenter()
 		RV-Alignment--verticalCenter()
 		RV-Alignment--center()
+		
+RV-Alignment()

components/02_ContentShape/aspectRatio/_aspectRatio.styl

@@ -36,8 +36,8 @@ RV-AspectRatio--16to9()
 	+RV-Block--modifier()
 		RV-AspectRatio--XtoY(16, 9)
 
-
 RV-AspectRatio()
+	+RV-Block()
 		position relative
 		overflow hidden
 		height unset
@@ -51,11 +51,11 @@ RV-AspectRatio()
 			bottom 0
 			right 0
 			
-+RV-Block--shorthand('RV-AspectRatio')
-	RV-AspectRatio()
-	
 		RV-AspectRatio--1to2()
 		RV-AspectRatio--2to1()
 		RV-AspectRatio--3to2()
 		RV-AspectRatio--4to3()
 		RV-AspectRatio--16to9()
+
+RV-AspectRatio()
+	

components/02_ContentShape/focalPoint/_focalPoint.styl

@@ -33,6 +33,7 @@ RV-FocalPoint--rightHalf()
 		})
 
 RV-FocalPoint(focalX=50%, focalY=50%)
+	+RV-Block()
 		RV-CSSParameter({
 			focalX: focalX,
 			focalY: focalY
@@ -44,12 +45,13 @@ RV-FocalPoint(focalX=50%, focalY=50%)
 		object-fit cover
 		object-position --focalX --focalY
 		
-+RV-Block--shorthand('RV-FocalPoint')
-	RV-FocalPoint()
-	
 		RV-FocalPoint--upperHalf()
 		RV-FocalPoint--lowerHalf()
 		RV-FocalPoint--leftHalf()
 		RV-FocalPoint--rightHalf()	
 
+RV-FocalPoint()
+	
+
+
 	

components/02_ContentShape/shape/_shape.styl

@@ -37,6 +37,9 @@ RV-Shape--circle()
 			bottom 0
 			right 0
 
-+RV-Block--shorthand('RV-Shape')
+RV-Shape()
+	+RV-Block()
 		RV-Shape--square()
 		RV-Shape--circle()
+		
+RV-Shape()

components/02_ContentShape/truncation/_truncation.styl

@@ -3,10 +3,9 @@
  * Because this is actually realy messed up in native CSS, you have to specify the line-height
  * and container height manualy in Stylues. CSS-Variables can unfortunately not be used in this case.
  */
-RV-Truncation--fade(background-color=white)
-	+RV-Block--modifier()
  
-		+RV-Element('Content')
+RV-Truncation--fade__Content(background-color)
+	+RV-Element()
 		&:last-child:after
 			background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
 			display block
@@ -19,10 +18,12 @@ RV-Truncation--fade(background-color=white)
 			height calc(1.5 * var(--line-height))
 			z-index 10
 
-RV-Truncation--ellipsis(background-color=white)
+RV-Truncation--fade(background-color=white)
 	+RV-Block--modifier()
+		RV-Truncation--fade__Content(background-color)
 
-		+RV-Element('Cutter')
+RV-Truncation--ellipsis__Cutter(background-color)
+	+RV-Element()
 		&:after
 			position absolute
 			display block
@@ -35,7 +36,8 @@ RV-Truncation--ellipsis(background-color=white)
 			line-height --line-height
 			top calc(var(--height) - 38px)
 			
-		+RV-Element('Content')
+RV-Truncation--ellipsis__Content(background-color)
+	+RV-Element()
 		&:after
 			display block
 			background-color background-color
@@ -47,7 +49,13 @@ RV-Truncation--ellipsis(background-color=white)
 			bottom -100%
 			z-index 30
 
+RV-Truncation--ellipsis(background-color=white)
+	+RV-Block--modifier()
+		RV-Truncation--ellipsis__Cutter(background-color)
+		RV-Truncation--ellipsis__Content(background-color)
+				
 RV-Truncation(line-height=1.3em, height=100%, background-color=white)
+	+RV-Block()
 		RV-CSSParameter({
 			line-height: line-height,
 			height: height,
@@ -70,8 +78,7 @@ RV-Truncation(line-height=1.3em, height=100%, background-color=white)
 			background --background-color
 		line-height --line-height
 		
-+RV-Block--shorthand('RV-Truncation')
-	RV-Truncation()
-	
 		RV-Truncation--fade(--background-color)
 		RV-Truncation--ellipsis(--background-color)
+		
+RV-Truncation()

components/02_ContentShape/truncation/truncation.hbs

@@ -1,4 +1,4 @@
-<div class="{{#if modifier}}{{modifier}}{{/if}}" style="--height: 200px">
+<div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}" style="--height: 200px">
 	<div class="RV-Truncation__Cutter">
 		<p class="RV-Truncation__Content">
 			You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.