Adapting Teaser to generator

components/05_Molecules/_molecules.styl

@@ -1,3 +1,3 @@
-@import 'overlayButton/_overlayButton'
+//@import 'overlayButton/_overlayButton'
 @import 'teaser/_teaser'
-@import 'pagination/_pagination'
+//@import 'pagination/_pagination'

components/05_Molecules/teaser/_teaser.styl

@@ -1,4 +1,39 @@
-+RV-Block('RV-Teaser')
+RV-Teaser__Image(image-height, image-width)
+	+RV-Element()
+		RV-Fan__Base(image-height, image-width)
+
+RV-Teaser__Preview(image-height, image-width)
+	+RV-Element()
+		RV-FlexRow()
+		RV-FlexRow--vertical()
+		RV-Spacing__Inner--medium()
+		RV-Fan__Surface(image-height, image-width)
+		
+		> *
+			height unset
+	
+RV-Teaser__Text()
+	+RV-Element()
+		flex 1
+
+RV-Teaser__Headline()
+	+RV-Element()		
+		font-family sans-serif
+		color primary-color
+		justify-self center
+
+RV-Teaser__Buttons()
+	+RV-Element()
+		RV-FlexRow__Item()
+		RV-FlexRow()
+		RV-FlexRow__Item--content()
+		RV-Spacing__Inner--small()
+
+		RV-FlexRow--horizontal()
+		padding 0
+
+RV-Teaser()
+	+RV-Block()
 		RV-CSSParameter({
 			image-height: 300px,
 			image-width: 300px,
@@ -9,37 +44,13 @@
 		RV-Fan(--image-height, --image-width)
 		RV-BoxShadow()
 
-	+RV-Element('Image')
-		RV-Fan__Base(--image-height, --image-width)
+		RV-Teaser__Image(--image-height, --image-width)
+		RV-Teaser__Preview(--image-height, --image-width)
+		RV-Teaser__Text()
+		RV-Teaser__Headline()
+		RV-Teaser__Buttons()
 		
-	+RV-Element('Preview')
-		RV-Fan__Surface(--image-height, --image-width)
-		RV-FlexRow()
-		+RV-Squash()
-			RV-FlexRow--vertical()
-			RV-Spacing__Inner--medium()
-		
-		> *
-			height unset
-	
-	+RV-Element('Text')
-		flex 1
-
-	+RV-Element('Headline')		
-		font-family sans-serif
-		color primary-color
-		justify-self center
-
-	+RV-Element('Buttons')
-		RV-FlexRow__Item()
-		RV-FlexRow()
-		+RV-Squash()
-			RV-FlexRow__Item--content()
-			RV-Spacing__Inner--small()
-
-			RV-FlexRow--horizontal()
-		padding 0
-	
-	+RV-Block--modifier('')
 		RV-Fan--auto(--image-height, --image-width)
 		RV-BoxShadow--drop(--shadow-color)
+		
+RV-Teaser()

components/05_Molecules/teaser/teaser.hbs

@@ -7,7 +7,7 @@
 			<h2>This is a headline for a teaser it is indeed dear reader</h2>
 		</div>
 		<div class="RV-Teaser__Text">
-			<div class="RV-Truncation--fade">
+			<div class="RV-Truncation RV-Truncation--fade">
 				<div class="RV-Truncation__Cutter">
 					<p class="RV-Truncation__Content">
 					Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.

components/_components.styl

@@ -2,10 +2,10 @@ 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 '05_Molecules/_molecules'
+@import '04_Atoms/_atoms'
+@import '05_Molecules/_molecules'
 
 //@import '06_Organisms/_organisms'
 //@import '10_Examples/playground/_playground'