Honsely, I don't know what happened here

components/00_ContentShape/_contentShape.styl

@@ -0,0 +1,4 @@
+@import 'aspectRatio/_aspectRatio'
+@import 'focalPoint/_focalPoint'
+@import 'shape/_shape'
+@import 'truncation/_truncation'

components/00_ContentShape/aspectRatio/_aspectRatio.styl

@@ -0,0 +1,61 @@
+RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
+	RV-CSSParameter({
+		aspectX: aspectX,
+		aspectY: aspectY
+	})
+	
+	padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
+	&:last-child
+		margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
+		
+	RV-Utils__ElementAmount(1, @(index, totale){
+		margin-bottom 0px
+	})
+
+RV-AspectRatio()
+	position relative
+	overflow hidden
+	height unset
+	width unset
+
+	*
+		object-fit cover
+		position absolute
+		top 0
+		left 0
+		bottom 0
+		right 0
+
+RV-AspectRatio--1to2()
+	RV-AspectRatio--XtoY(1, 2)
+		
+RV-AspectRatio--2to1()
+	RV-AspectRatio--XtoY(2, 1)
+	
+RV-AspectRatio--3to2()
+	RV-AspectRatio--XtoY(3, 2)
+		
+RV-AspectRatio--4to3()
+	RV-AspectRatio--XtoY(4, 3)
+		
+RV-AspectRatio--16to9()
+	RV-AspectRatio--XtoY(16, 9)
+
+
+.RV-AspectRatio
+	RV-AspectRatio()
+	
+	&--1to2
+		RV-AspectRatio--1to2()
+	
+	&--2to1
+		RV-AspectRatio--2to1()
+		
+	&--3to2
+		RV-AspectRatio--3to2()
+		
+	&--4to3
+		RV-AspectRatio--4to3()
+		
+	&--16to9
+		RV-AspectRatio--16to9()

components/00_ContentShape/aspectRatio/aspectRatio.config.json

@@ -0,0 +1,45 @@
+{
+	"name": "aspectRatio",
+	"title": "Aspect Ratio",
+	"context": {
+		"modifier_list": [
+			"RV-AspectRatio--1to2 RV-Dummy--orange",
+			"RV-AspectRatio--2to1 RV-Dummy--blue",
+			"RV-AspectRatio--3to2 RV-Dummy--green",
+			"RV-AspectRatio--4to3 RV-Dummy--red",
+			"RV-AspectRatio--16to9 RV-Dummy--yellow"
+		]
+	},
+	"variants": [
+		{
+			"name": "1 to 2",
+			"context": {
+				"modifier": "RV-AspectRatio--1to2"
+			}
+		},
+		{
+			"name": "2 to 1",
+			"context": {
+				"modifier": "RV-AspectRatio--2to1"
+			}
+		},
+		{
+			"name": "3 to 2",
+			"context": {
+				"modifier": "RV-AspectRatio--3to2"
+			}
+		},
+		{
+			"name": "4 to 3",
+			"context": {
+				"modifier": "RV-AspectRatio--4to3"
+			}
+		},
+		{
+			"name": "16 to 9",
+			"context": {
+				"modifier": "RV-AspectRatio--16to9"
+			}
+		}
+	]
+}

components/00_ContentShape/aspectRatio/aspectRatio.hbs

@@ -0,0 +1,12 @@
+
+{{#if modifier}}
+	<div class="RV-Dummy RV-AspectRatio {{modifier}}"></div>
+{{else}}
+	<div class="RV-FlexGrid RV-FlexGrid--masonry">
+	{{#each modifier_list}}
+		<div class="RV-FlexGrid__Item ">
+			<div class="RV-Dummy RV-AspectRatio {{this}}"></div>
+		</div>
+	{{/each}}
+	</div>
+{{/if}}

components/00_ContentShape/focalPoint/_focalPoint.styl

@@ -0,0 +1,48 @@
+// FocalPoint in percentage
+RV-FocalPoint(focalX=50%, focalY=50%)
+	RV-CSSParameter({
+		focalX: focalX,
+		focalY: focalY
+	})
+	
+	height 100%
+	width 100%
+	object-fit cover
+	object-position --focalX --focalY
+
+RV-FocalPoint--upperHalf()
+	RV-CSSParameter({
+		focalY: 25%
+	})
+
+RV-FocalPoint--lowerHalf()
+	RV-CSSParameter({
+		focalY: 75%
+	})
+
+RV-FocalPoint--leftHalf()
+	RV-CSSParameter({
+		focalX: 25%
+	})
+
+RV-FocalPoint--rightHalf()
+	RV-CSSParameter({
+		focalX: 75%
+	})
+
+.RV-FocalPoint
+	RV-FocalPoint()
+	
+	&--upperHalf
+		RV-FocalPoint--upperHalf()
+	
+	&--lowerHalf
+		RV-FocalPoint--lowerHalf()
+	
+	&--leftHalf	
+		RV-FocalPoint--leftHalf()
+	
+	&--rightHalf
+		RV-FocalPoint--rightHalf()	
+
+	

components/00_ContentShape/focalPoint/focalPoint.config.json

@@ -0,0 +1,4 @@
+{
+	"name": "focalPoint",
+	"title": "Focal Point"
+}

components/00_ContentShape/focalPoint/focalPoint.hbs

@@ -0,0 +1,22 @@
+
+<div>
+	<div class="RV-AspectRatio RV-AspectRatio--4to3">
+		<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%"  src="{{ path '/images/landscape.jpeg'}}"/>
+	</div>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%"  src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 47%"  src="{{ path '/images/hasi01.png'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--1to2">
+	<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
+</div>

components/00_ContentShape/shape/_shape.styl

@@ -0,0 +1,34 @@
+RV-Shape--square()
+	padding-top 100%
+	width 100%
+	position relative
+	
+	*
+		position absolute
+		top 0
+		left 0
+		bottom 0
+		right 0
+		
+RV-Shape--circle()
+	padding-top 100%
+	width 100%
+	position relative
+
+	&, *
+		border-radius 50%
+	
+	*
+		position absolute
+		top 0
+		left 0
+		bottom 0
+		right 0
+
+.RV-Shape
+	
+	&--square
+		RV-Shape--square()
+		
+	&--circle
+		RV-Shape--circle()

components/00_ContentShape/shape/shape.config.json

@@ -0,0 +1,17 @@
+{
+	"name": "Shape",
+	"variants": [
+		{
+			"name": "Square",
+			"context": {
+				"modifier": "RV-Shape--square"
+			}
+		},
+		{
+			"name": "Circle",
+			"context": {
+				"modifier": "RV-Shape--circle"
+			}
+		}
+	]
+}

components/00_ContentShape/shape/shape.hbs

@@ -0,0 +1,3 @@
+<div class="RV-Shape {{#if modifier}}{{modifier}}{{/if}}">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%"  src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>

components/00_ContentShape/truncation/_truncation.styl

@@ -0,0 +1,62 @@
+RV-Truncation--fade(background-color=white)
+	&:after
+		background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
+		display block
+		content '###'
+		color transparent
+		opacity 1
+		position absolute
+		top calc(var(--height) - 60px)
+		width 100%
+		height 50px
+		line-height var(--line-height)
+		z-index 10
+
+RV-Truncation--ellipsis(background-color=white)
+	&:after
+		position absolute
+		display block
+		right 0
+		content '...'
+		background-color background-color
+		padding-left 5px
+		padding-bottom 10px
+		box-shadow -10px 8px 6px 0px #fff;
+		line-height var(--line-height)
+		top calc(var(--height) - 40px)
+
+RV-Truncation(line-height=1.3, height=350px)
+	RV-CSSParameter({
+		line-height: line-height,
+		height: height
+	})
+	
+	background-color = white
+	display block
+	overflow hidden
+	position relative
+
+	height calc_height()
+	width calc_width()
+	
+	*
+		overflow hidden
+		display block
+		position relative
+		text-overflow ellipsis
+		background-color background-color
+		
+		line-height line-height
+		max-height floor(height / (line-height * 16)) * (line-height * 16)
+		
+		padding 0
+		margin 0
+		
+.RV-Truncation
+	RV-Truncation()
+	
+	&--fade
+		RV-Truncation--fade()
+	
+	&--ellipsis
+		RV-Truncation--ellipsis()

components/00_ContentShape/truncation/truncation.config.json

@@ -0,0 +1,17 @@
+{
+	"name": "Truncation",
+	"variants": [
+		{
+			"name": "Fade",
+			"context": {
+				"modifier": "RV-Truncation--fade"
+			}
+		},
+		{
+			"name": "Ellipsis",
+			"context": {
+				"modifier": "RV-Truncation--ellipsis"
+			}
+		}
+	]
+}

components/00_ContentShape/truncation/truncation.hbs

@@ -0,0 +1,5 @@
+<div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}">
+	<p>
+	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.
+	</p>
+</div>

components/00_Tools/_bemGenerator.styl

@@ -181,13 +181,13 @@ RV-Block__Modifier--name(name)
 
 RV-Block(block_name)
 	& .{block_name}
-		{block}
-		foreach(_block.block_modifiers, @(modifier){
-			render_block_modifier(modifier)
-		})
 		foreach(_block.elements, @(element){
 			render_element(element)
 		})
+		foreach(_block.block_modifiers, @(modifier){
+			render_block_modifier(modifier)
+		})
+		{block}
 		
 	reset_block()
 

components/00_Tools/_cssParameter.styl

@@ -41,4 +41,4 @@ RV-CSSParameter(block)
 	for name, value in block
 		css-var-name = '--%s' % unquote(name)
 		add-property(css-var-name, value)
-		define(name, unquote('var(--%s)' % (unquote(name))), true)
+		define('--'+name, unquote('var(--%s)' % (unquote(name))), true)

components/00_Tools/_elementAmount.styl

@@ -1,6 +1,12 @@
-RV-Utils__ElementAmount(callback, up-to=20) 
-	for i in (1..up-to)
-
+RV-Utils__ElementAmount(amount, callback)
+	if amount == 1
+		&:only-child
+			callback(i, amount)
+	else
 		*:first-child:nth-last-child({i}),
 		*:first-child:nth-last-child({i})~*
-			callback(i, up-to)
+			callback(i, up-to)
+
+RV-Utils__ElementAmount--range(from=1, to=20, callback)
+	for i in (from..to)
+		RV-Utils__ElementAmount(i, callback)

components/01_Layouts/_layouts.styl

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

components/01_Layouts/contentCrop/_contentCrop.styl

@@ -60,7 +60,7 @@ RV-ContentCrop--XtoY(x=1, y=1)
 	
 	+RV-Block__Modifier--name('XtoY')
 		width 100%
-		padding-top 100% * (y / x)
+		padding-top 100% * (--y / --x)
 		position relative
 
 		.RV-Image *
@@ -96,12 +96,13 @@ RV-ContentCrop__Text--fade(background-color=white)
 		&:after
 			background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
 			display block
-			content ' '
-			opacity 0.8
+			content '###'
+			color transparent
+			opacity 1
 			position relative
-			top -25%
+			top -30px
 			width 100%
-			height 25%
+			height 30px
 			z-index 10
 
 RV-ContentCrop__Text--ellipsis(background-color=white)

components/01_Layouts/dummy/_dummy.styl

@@ -1,4 +1,49 @@
 +RV-Block('RV-Dummy')
+	background-color #F4A460
+	&:nth-child(2n)
+		background-color #6495ED
+	
+	&:nth-child(3n)
+		background-color #90EE90
+	
+	&--oranage
+		background-color #F4A460
+		
+	&--blue
+		background-color #6495ED
+		
+	&--green
+		background-color #90EE90
+		
+	&--red
+		background-color #ce6d6d
+		
+	&--yellow
+		background-color #eae144
+	
+	+RV-Element('Landscape')
+		min-width 200px
+		width 100%
+		min-height 130px
+		
+	+RV-Element('Portrait')
+		min-width 130px
+		width 100%
+		min-height 200px
+	
+	+RV-Element('Square')
+		min-width 300px
+		width 100%
+		min-height 300px
+		
+		+RV-Element__Modifier('large')
+			height 500px
+			width 500px
+			
+		+RV-Element__Modifier('small')
+			height 100px
+			width 100px
+
 	+RV-Block__Modifier('square')
 		height 350px
 		width 350px
@@ -10,6 +55,6 @@
 	+RV-Block__Modifier('landscape')
 		width 350px
 		height 150px
-		
+	
 	+RV-Block__Modifier('red')
 		background-color #d8583e

components/01_Layouts/fan/_fan.styl

@@ -19,7 +19,7 @@ RV-Fan--horizontal(base-height, base-width)
 		flex-direction row
 		
 		+RV-Element('Surface')
-			min-width calc_width(base-width)
+			min-width calc_width('calc(%s * 1.5)' % base-width)
 			height calc_height(base-height)
 
 /*
@@ -35,6 +35,7 @@ RV-Fan--vertical(base-height, base-width)
 		
 		+RV-Element('Surface')
 			width calc_width(base-width)
+			min-width initial
 			min-height base-height
 
 
@@ -71,6 +72,7 @@ RV-Fan--fullWidth(base-height, base-width)
 			
 		+RV-Element('Surface')
 			flex-grow 1
+			min-width calc_width('calc(%s * 1.5)' % base-width)
 
 
 /* ###############
@@ -94,14 +96,10 @@ RV-Fan__Surface--fixedWidth(width)
 
 RV-Fan__Surface(base-height, base-width)
 	+RV-Element--name('Surface')
-	
-		RV-ContentCrop()
-		RV-ContentCrop__Text()
-		RV-ContentCrop__Image()
-		
 		overflow hidden
 		height calc_height(base-height)
 		width calc_width()
+		min-width calc_width('calc(%s * 1.5)' % base-width)
 		
 		flex-grow 20
 		flex-shrink 0
@@ -113,7 +111,7 @@ RV-Fan__Surface(base-height, base-width)
 RV-Fan()
 	display flex
 	position relative
-	min-width calc(2 * var(--base-width))
+	min-width min-content
 
 /* #########
  * CSS-Class
@@ -128,23 +126,23 @@ RV-Fan()
 
 	RV-Fan()
 	+RV-Element()
-		RV-Fan__Surface(base-height, base-width)
+		RV-Fan__Surface(--base-height, --base-width)
 		
 		+RV-Element__Modifier()
-			RV-Fan__Surface--fixedWidth(base-width)
+			RV-Fan__Surface--fixedWidth(--base-width)
 			
 		+RV-Element__Modifier()
-			RV-Fan__Surface--fixedHeight(base-height)
+			RV-Fan__Surface--fixedHeight(--base-height)
 
 	+RV-Element()
-		RV-Fan__Base(base-height, base-width)
+		RV-Fan__Base(--base-height, --base-width)
 
 	+RV-Block__Modifier()
-		RV-Fan--fullWidth(base-height, base-width)
+		RV-Fan--fullWidth(--base-height, --base-width)
 	+RV-Block__Modifier()
-		RV-Fan--vertical(base-height, base-width)
+		RV-Fan--vertical(--base-height, --base-width)
 	+RV-Block__Modifier()
-		RV-Fan--horizontal(base-height, base-width)
+		RV-Fan--horizontal(--base-height, --base-width)
 	+RV-Block__Modifier()
-		RV-Fan--auto(base-height, base-width)
+		RV-Fan--auto(--base-height, --base-width)
 				

components/01_Layouts/fan/fan.hbs

@@ -1,4 +1,12 @@
-<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop RV-Spacing__Outer--large">
+<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow">
+	<div class="RV-Fan__Base RV-Dummy"></div>
+	<div class="RV-Fan__Surface RV-Dummy"></div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop">
 	<div class="RV-Fan__Base RV-Spacing__Inner--small">
 		<div class="RV-ContentCrop">
 			<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
@@ -17,7 +25,4 @@
 			</p>
 		</div>
 	</div>
-</div>
-
-
-
+</div>

components/01_Layouts/flexGrid/_flexGrid.styl

@@ -20,6 +20,7 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
 		
 		+RV-Element('Item')
 			display inline-block
+			width 100%
 			height unset
 			margin-bottom: var(--inner-spacing);
 			& > *  {
@@ -63,29 +64,28 @@ RV-FlexGrid(item-height, item-width)
 	display grid
 	
 	grid-template-columns: repeat(auto-fill, var(--item-width));
-	
 
 +RV-Block('RV-FlexGrid')
 	RV-CSSParameter({
 		item-height: 300px,
 		item-width: 300px
 	})
-	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-Block__Modifier()
-		RV-FlexGrid--autoWidth(item-height, item-width)
+		RV-FlexGrid--autoWidth(--item-height, --item-width)
 		
 	+RV-Block__Modifier()
-		RV-FlexGrid--fixedSize(item-height, item-width)
+		RV-FlexGrid--fixedSize(--item-height, --item-width)
 		
 	+RV-Block__Modifier()
-		RV-FlexGrid--masonry(item-height,item-width)
+		RV-FlexGrid--masonry(--item-height, --item-width)
 		
 	+RV-Block__Modifier()
-		RV-FlexGrid--verticalMasonry(item-height,item-width)
+		RV-FlexGrid--verticalMasonry(--item-height, --item-width)
 	
 	+RV-Block__Modifier()
-		RV-FlexGrid--horizontalMasonry(item-height,item-width)		
+		RV-FlexGrid--horizontalMasonry(--item-height, --item-width)		

components/01_Layouts/flexGrid/flexGrid.hbs

@@ -1,3 +1,33 @@
+<div class="RV-FlexGrid RV-FlexGrid{{modifier}}">
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Landscape"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Landscape"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Landscape"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Portrait"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Portrait"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Landscape"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Landscape"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Landscape"></div>
+	</div>
+	<div class="RV-FlexGrid__Item RV-Dummy">
+		<div class="RV-Dummy__Portrait"></div>
+	</div>
+</div>
+
 <div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
 	<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
 		<div class="RV-ContentCrop">

components/01_Layouts/flexRow/_flexRow.styl

@@ -23,7 +23,7 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
 		RV-Reset()
 		gap 0px
 		
-		RV-Utils__ElementAmount(@(index, total){
+		RV-Utils__ElementAmount--range(0, 20, @(index, total){
 				min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
 			}
 		)
@@ -144,7 +144,7 @@ RV-FlexRow()
 			RV-FlexRow__Item--wider()
 			
 		+RV-Element__Modifier()
-			RV-FlexRow__Item--fixedSize(width)
+			RV-FlexRow__Item--fixedSize(--width)
 			
 		+RV-Element__Modifier()
 			RV-FlexRow__Item--narrower()
@@ -168,7 +168,7 @@ RV-FlexRow()
 		RV-FlexRow--vertical()
 		
 	+RV-Block__Modifier()
-		RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
+		RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
 		
 	+RV-Block__Modifier()
 		RV-FlexRow--auto()

components/01_Layouts/flexRow/flexRow.config.json

@@ -1 +1,32 @@
-{}
+{
+	"title": "FlexRow",
+	"context": {
+		"item-shadow" : "drop"
+	},
+	"variants": [
+		{
+			"name": "Horizontal",
+			"context": {
+				"modifier": "--horizontal"
+			}
+		},
+		{
+			"name": "Vertical",
+			"context": {
+				"modifier": "--vertical"
+			}
+		},
+		{
+			"name": "Breakpoint",
+			"context": {
+				"modifier": "--breakPoint"
+			}
+		},
+		{
+			"name": "Auto",
+			"context": {
+				"modifier": "--auto"
+			}
+		}
+	]
+}

components/01_Layouts/flexRow/flexRow.hbs

@@ -1,38 +1,17 @@
-<div class="RV-FlexRow">
-	<div class="red RV-FlexRow__Item">Im normal</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--left"><span>wrapped content left</span></div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
-</div>
-<br></br>
-<div class="RV-FlexRow">
-	<div class="red RV-FlexRow__Item">Im normal</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div>
-</div>
-<br><br>
-<div class="RV-FlexRow RV-FlexRow--multiRow">
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">wide</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">wider</div>
-</div>
-
-<br><br>
-<div class="RV-FlexRow RV-Spacing__Inner--small">
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
-</div>
-
-<br><br>
-<div class="RV-FlexRow RV-FlexRow--breakPoint">
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>
-	<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">blubbber</div>
-	<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
+<div class="RV-FlexRow RV-FlexRow{{modifier}}">
+	<div class="RV-FlexRow__Item RV-Dummy">
+		<div class="RV-Dummy__Square--small"></div>
+	</div>
+	<div class="RV-FlexRow__Item RV-FlexRow__Item--right RV-Dummy">
+		<div class="RV-Dummy__Square--small"></div>
+	</div>
+	<div class="RV-FlexRow__Item RV-FlexRow__Item--center RV-Dummy">
+		<div class="RV-Dummy__Square--small"></div>
+	</div>
+	<div class="RV-FlexRow__Item RV-FlexRow__Item--left RV-Dummy">
+		<div class="RV-Dummy__Square--small"></div>
+	</div>
+	<div class="RV-FlexRow__Item RV-FlexRow__Item--fixedSize RV-Dummy">
+		<div class="RV-Dummy__Square--small"></div>
+	</div>
 </div>

components/02_Styles/_styles.styl

@@ -1,4 +1,4 @@
 @import 'spacing/_spacing'
-
+@import 'elementList/_elementList'
 @import 'boxShadow/_boxShadow'
 @import 'iconized/_iconized'

components/02_Styles/boxShadow/_boxShadow.styl

@@ -93,19 +93,19 @@ RV-BoxShadow()
 	RV-BoxShadow()
 	
 	+RV-Block__Modifier()
-		RV-BoxShadow--simple(color)
+		RV-BoxShadow--simple(--color)
 		
 	+RV-Block__Modifier()
-		RV-BoxShadow--liftedCorners(color)
+		RV-BoxShadow--liftedCorners(--color)
 	
 	+RV-Block__Modifier()
-		RV-BoxShadow--levitating(color)
+		RV-BoxShadow--levitating(--color)
 		
 	+RV-Block__Modifier()
-		RV-BoxShadow--stacked(color)
+		RV-BoxShadow--stacked(--color)
 		
 	+RV-Block__Modifier()
-		RV-BoxShadow--drop(color)
+		RV-BoxShadow--drop(--color)
 		
 	+RV-Block__Modifier()
-		RV-BoxShadow--solid(color)
+		RV-BoxShadow--solid(--color)

components/02_Styles/elementList/_elementList.styl

@@ -0,0 +1,15 @@
+RV-ElementList__Item()
+	+RV-Element--name('Item')
+		RV-FlexRow__Item()
+
+RV-ElementList(break_width=500px)
+	RV-FlexRow()
+	RV-Reset()
+
+	list-style-type none
+
++RV-Block('RV-ElementList')
+	RV-ElementList()
+
+	+RV-Element()
+		RV-ElementList__Item()

components/02_Styles/spacing/_spacing.styl

@@ -1,5 +1,5 @@
 RV-Spacing__Outer--small()
-	+RV-Element__Modifier('small')
+	+RV-Element__Modifier--name('small')
 		--outer-spacing spacing-small
 		margin var(--outer-spacing)
 		* > {
@@ -7,7 +7,7 @@ RV-Spacing__Outer--small()
 		}
 
 RV-Spacing__Outer--medium()
-	+RV-Element__Modifier('medium')
+	+RV-Element__Modifier--name('medium')
 		--outer-spacing spacing-medium
 		margin var(--outer-spacing)
 		* > {
@@ -15,14 +15,14 @@ RV-Spacing__Outer--medium()
 		}
 
 RV-Spacing__Outer--large()
-	+RV-Element__Modifier('large')		
+	+RV-Element__Modifier--name('large')		
 		--outer-spacing spacing-large
 		margin var(--outer-spacing)
 		* > {
 			--outer-spacing 0
 		}
 RV-Spacing__Inner--small()
-	+RV-Element__Modifier('small')
+	+RV-Element__Modifier--name('small')
 		--inner-spacing spacing-small
 		padding var(--inner-spacing)
 		gap var(--inner-spacing)
@@ -32,7 +32,7 @@ RV-Spacing__Inner--small()
 		}
 
 RV-Spacing__Inner--medium()
-	+RV-Element__Modifier('medium')
+	+RV-Element__Modifier--name('medium')
 		--inner-spacing spacing-medium
 		padding var(--inner-spacing)
 		gap var(--inner-spacing)
@@ -42,7 +42,7 @@ RV-Spacing__Inner--medium()
 		}
 
 RV-Spacing__Inner--large()
-	+RV-Element__Modifier('large')
+	+RV-Element__Modifier--name('large')
 		--inner-spacing spacing-large
 		padding var(--inner-spacing)
 		gap var(--inner-spacing)
@@ -53,11 +53,17 @@ RV-Spacing__Inner--large()
 
 +RV-Block('RV-Spacing')
 	+RV-Element('Outer')
-		RV-Spacing__Outer--small()
-		RV-Spacing__Outer--medium()
-		RV-Spacing__Outer--large()
+		+RV-Element__Modifier()
+			RV-Spacing__Outer--small()
+		+RV-Element__Modifier()
+			RV-Spacing__Outer--medium()
+		+RV-Element__Modifier()	
+			RV-Spacing__Outer--large()
 
 	+RV-Element('Inner')
-		RV-Spacing__Inner--small()
-		RV-Spacing__Inner--medium()
-		RV-Spacing__Inner--large()
+		+RV-Element__Modifier()
+			RV-Spacing__Inner--small()
+		+RV-Element__Modifier()
+			RV-Spacing__Inner--medium()
+		+RV-Element__Modifier()		
+			RV-Spacing__Inner--large()

components/03_Atoms/_atoms.styl

@@ -0,0 +1 @@
+@import 'button/_button'

components/03_Atoms/button/_button.styl

@@ -0,0 +1,191 @@
+RV-Button--pill()
+	+RV-Block__Modifier--name('pill')
+		border-radius calc(var(--size) + var(--line-height) * 16px)
+		padding-left calc(1.5 * var(--size))
+		padding-right calc(1.5 * var(--size))
+
+RV-Button--border(color)
+	+RV-Block__Modifier--name('border')
+		border 3px solid color
+		color color
+		border-radius 0px
+		
+		&, *
+			background-color transparent
+			
+		+RV-Element('Icon')
+			background-color secondary-color
+
+RV-Button--small()
+	+RV-Block__Modifier--name('small')
+		--size spacing-small
+		
+		+RV-Element('Icon')
+			.RV-Image
+				height calc(var(--size) * 1.8)
+
+RV-Button--medium()
+	+RV-Block__Modifier--name('medium')
+		--size spacing-medium * .6
+
+RV-Button--large()
+	+RV-Block__Modifier--name('large')
+		--size spacing-large * .5
+
+RV-Button--link()
+	+RV-Block__Modifier--name('link')
+		border none
+		border-radius 0px
+		color primary-color
+		&, *
+			background-color transparent
+			margin 0
+			
+		+RV-Element('Icon')
+			padding-right calc(var(--size) / 4)
+			padding-left calc(var(--size) / 4)
+
+_RV-Button__Icon--shape()
+	margin-right calc(var(--size) * 1.2)
+	&, *
+		z-index 10
+		position relative
+		
+	&:after, &:before
+		content ''
+		width 50%
+		height 110%
+		z-index 5
+		background-color inherit
+		position absolute
+
+
+RV-Button__Icon--inwardsArrow()
+	+RV-Element__Modifier--name('inwardsArrow')
+		_RV-Button__Icon--shape()
+		
+		.RV-Image
+			left calc(var(--size) * .5)
+		&:after
+			transform rotate(-35deg)
+			left 70%
+			top 25%
+			
+		&:before
+			transform rotate(35deg)
+			left 70%
+			top -35%
+			
+RV-Button__Icon--outwardsArrow()
+	+RV-Element__Modifier--name('outwardsArrow')
+		_RV-Button__Icon--shape()
+		margin-right calc(var(--size) * 2)
+		
+		.RV-Image
+			left calc(var(--size) * .7)
+		
+		&:after
+			transform rotate(35deg)
+			left 70%
+			top 25%
+			
+		&:before
+			transform rotate(-35deg)
+			left 70%
+			top -37%
+
+RV-Button__Icon--forwardSlope()
+	_RV-Button__Icon--shape()
+	+RV-Element__Modifier--name('forwardSlope')
+		margin-right calc(var(--size) * 2)
+		
+		.RV-Image
+			left calc(var(--size) * .7)
+
+		&:after
+			transform rotate(-15deg)
+			top 0%
+			
+RV-Button__Icon--backwardSlope()
+	_RV-Button__Icon--shape()
+	+RV-Element__Modifier--name('backwardSlope')
+		margin-right calc(var(--size) * 2)
+		
+		.RV-Image
+			left calc(var(--size) * .7)
+	
+		&:after
+			transform rotate(15deg)
+			top -10%
+
+RV-Button__Icon()
+	+RV-Element--name('Icon')
+		width min-content
+		background-color primary-color
+		padding var(--size)
+		
+		.RV-Image
+			height calc(var(--size) * 2.5)
+
+
+RV-Button__Text()
+	+RV-Element--name('Text')
+		font-size calc(var(--size) * 1.65)
+		background-color secondary-color
+		padding var(--size)
+
+RV-Button()
+	background-color #f00
+	line-height 1
+	overflow hidden
+	font-family sans-serif
+	background-color secondary-color
+	color accent-color
+	text-decoration none
+	
+	RV-Alignment--verticalCenter()
+	display inline-flex
+	border-radius 6px
+	
++RV-Block('RV-Button')
+	RV-CSSParameter({
+		size: spacing-medium
+	})
+	RV-Reset()
+	RV-Button(height)
+	
+	+RV-Element()
+		RV-Button__Icon()
+		
+		+RV-Element__Modifier()
+			RV-Button__Icon--outwardsArrow()
+		
+		+RV-Element__Modifier()
+			RV-Button__Icon--inwardsArrow()
+			
+		+RV-Element__Modifier()
+			RV-Button__Icon--forwardSlope()
+			
+		+RV-Element__Modifier()
+			RV-Button__Icon--backwardSlope()	
+		
+	+RV-Element()
+		RV-Button__Text()
+	
+	+RV-Block__Modifier()
+		RV-Button--pill()
+		
+	+RV-Block__Modifier()
+		RV-Button--link()
+		
+	+RV-Block__Modifier()
+		RV-Button--small()
+		
+	+RV-Block__Modifier()
+		RV-Button--medium()
+		
+	+RV-Block__Modifier()
+		RV-Button--large()
+		
+	+RV-Block__Modifier()
+		RV-Button--border(primary-color)

components/03_Atoms/button/button.config.json

@@ -0,0 +1 @@
+{}

components/03_Atoms/button/button.hbs

@@ -0,0 +1,39 @@
+<button class="RV-Button RV-Button--large RV-Button--border">
+	<div class="RV-Button__Icon RV-Button__Icon--outwardsArrow">
+		<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
+	</div>
+	<div class="RV-Button__Text">
+		Button Text
+	</div>
+</button>
+<br>
+<br>
+<br>
+<button class="RV-Button RV-Button--medium RV-Button--link">
+	<div class="RV-Button__Icon RV-Button__Icon--forwardSlope">
+		<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
+	</div>
+	<div class="RV-Button__Text">
+		Button Text
+	</div>
+</button>
+<br>
+<br>
+<br>
+<button class="RV-Button RV-Button--small RV-Button">
+	<div class="RV-Button__Icon">
+		<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
+	</div>
+	<div class="RV-Button__Text">
+		Button Text
+	</div>
+</button>
+
+<br>
+<br>
+<br>
+<button class="RV-Button RV-Button--small RV-Button--border">
+	<div class="RV-Button__Text">
+		Button Text
+	</div>
+</button>

components/04_Molecules/_molecules.styl

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

components/04_Molecules/elementList/_elementList.styl

@@ -1,15 +0,0 @@
-RV-ElementList__Item()
-	@include RV-FlexRow__Item
-
-RV-ElementList(break_width=500px, prefix='&')
-	RV-FlexRow__Container()
-	RV-FlexRow__Container--shorthands()
-	RV-Reset()
-
-	list-style-type none
-
-	{prefix}__Item
-		RV-ElementList__Item()
-
-.RV-ElementList
-	RV-ElementList()

components/04_Molecules/overlayButton/pagination/_pagination.styl

@@ -0,0 +1,15 @@
+RV-Pagination__Item()
+	+RV-Element--name('Item')
+		RV-ElementList__Item()
+
++RV-Block('RV-Pagination')
+	max-width 600px
+	RV-ElementList()
+	RV-FlexRow--horizontal()
+	justify-content space-between
+	overflow hidden
+	height 2em
+	
+	+RV-Element('Item')
+		RV-Pagination__Item()
+

components/04_Molecules/overlayButton/pagination/pagination.config.json

@@ -0,0 +1,3 @@
+{
+    "title": "Pagnination"
+}

components/04_Molecules/overlayButton/pagination/pagination.hbs

@@ -0,0 +1,77 @@
+<ul class="RV-Pagination">
+	<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--first">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+			<div class="RV-Button__Icon">
+				⟪
+			</div>
+			<div class="RV-Button__Text">
+				First
+			</div>
+		</a>
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--disabled RV-Pagination__Item--previous">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+			<div class="RV-Button__Icon">
+				⟨
+			</div>
+			<div class="RV-Button__Text">
+				Prev
+			</div>
+		</a>
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+			<div class="RV-Button__Text">
+				1
+			</div>
+		</a>
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+			<div class="RV-Button__Text">
+				2
+			</div>
+		</a>
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+			<div class="RV-Button__Text">
+				3
+			</div>
+		</a>
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+			<div class="RV-Button__Text">
+				4
+			</div>
+		</a>
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+			<div class="RV-Button__Text">
+				5
+			</div>
+		</a>
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--next">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">			
+			<div class="RV-Button__Text">
+				Next
+			</div>
+			<div class="RV-Button__Icon">
+				⟩
+			</div>
+		</a>		
+	</li>
+	<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--last">
+		<a href="#" class="RV-Button RV-Button--small RV-Button--link">	
+			<div class="RV-Button__Text">
+				Last
+			</div>
+			<div class="RV-Button__Icon">
+				⟫
+			</div>		
+		</a>
+	</li>
+</ul>

components/04_Molecules/teaser/_teaser.styl

@@ -0,0 +1,47 @@
++RV-Block('RV-Teaser')
+	RV-CSSParameter({
+		image-height: 300px,
+		image-width: 300px,
+		shadow-color: #6b5690
+		
+	})
+
+	RV-Fan()
+	RV-BoxShadow()
+	RV-BoxShadow--drop(--shadow-color)
+	
+	+RV-Element('Image')
+		RV-Fan__Base(--image-height, --image-width)
+		
+	+RV-Element('Preview')
+		RV-Fan__Surface(--image-height, --image-width)
+		RV-Spacing__Inner--medium()
+		RV-FlexRow()
+		RV-FlexRow--vertical()
+	
+	+RV-Element('Text')
+		color text-color
+		flex 1
+		RV-ContentCrop()
+		RV-ContentCrop__Text()
+		RV-ContentCrop__Text--fade()
+		
+		.RV-Text
+			height 100%
+			
+
+	+RV-Element('Headline')		
+		font-family sans-serif
+		color primary-color
+		justify-self center
+
+	+RV-Element('Buttons')
+		RV-FlexRow__Item()
+		RV-FlexRow__Item--content()
+		RV-Spacing__Inner--small()
+
+		RV-FlexRow()
+		RV-FlexRow--horizontal()
+		padding 0
+		
+	RV-Fan--fullWidth(--image-height, --image-width)

components/04_Molecules/teaser/teaser.config.json

@@ -0,0 +1 @@
+{}

components/04_Molecules/teaser/teaser.hbs

@@ -0,0 +1,46 @@
+<div class="RV-Teaser">
+	<div class="RV-Teaser__Image">
+		<div class="RV-ContentCrop">
+			<img class="RV-Image" src="{{ path '/images/landscape.jpeg' }}"/>
+		</div>
+
+	</div>
+	<div class="RV-Teaser__Preview">
+		<div class="RV-Teaser__Headline">
+			<h2>This is a headline for a teaser it is indeed dear reader</h2>
+		</div>
+		<div class="RV-Teaser__Text">
+			<div class="RV-Text">
+				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.
+				
+				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.
+			</div>
+		</div>
+		<div class="RV-Teaser__Buttons">
+			<a href="#"class="RV-Button RV-Button--small RV-Button--link">
+				<div class="RV-Button__Icon">
+					<img class="RV-Image" src="{{path '/icons/plus.svg'}}"/>
+				</div>
+				<div class="RV-Button__Text">
+					More
+				</div>
+			</a>
+			<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+				<div class="RV-Button__Icon">
+					<img class="RV-Image" src="{{path '/icons/favourite.svg'}}"/>
+				</div>
+				<div class="RV-Button__Text">
+					Favorite
+				</div>
+			</a>
+			<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+				<div class="RV-Button__Icon">
+					<img class="RV-Image" src="{{path '/icons/information.svg'}}"/>
+				</div>
+				<div class="RV-Button__Text">
+					Details
+				</div>
+			</a>
+		</div>
+	</div>
+</div>

components/_components.styl

@@ -1,8 +1,11 @@
 @import '00_Tools/_tools'
+
 @import '01_Layouts/_layouts'
 @import '02_Styles/_styles'
-//@import '03_Atoms/_atoms'
-//@import '04_Molecules/_molecules'
+@import '03_Atoms/_atoms'
+@import '04_Molecules/_molecules'
+
+@import '00_ContentShape/_contentShape'
 //@import '05_Organisms/_organisms'
 
 

components/_preview.hbs

@@ -41,6 +41,8 @@
 		</style>
     </head>
     <body>
-        {{{ yield }}}
+		<div class="RV-Spacing__Outer--large">
+        	{{{ yield }}}
+		</div>
     </body>
 </html>

components/colors.styl

@@ -0,0 +1,9 @@
+primary-color = #457B9D
+secondary-color = #AAC7DA
+text-color = #1F271B
+accent-color = #FBD974
+striking-color = #ED6A5A
+background-color = #FFFFFA
+
+text-emphasize-color = primary-color
+text-emphasize-interaction-color = accent-color

components/rcss.styl

@@ -4,4 +4,5 @@ spacing-small = 10px
 spacing-medium = 25px
 spacing-large = 35px
 
+@import './colors'
 @import './_components'