Converting Layouts to new BEM-Generator

components/01_Layouts/alignment/_alignment.styl

@@ -1,55 +1,61 @@
 RV-Alignment--top()
+	+RV-Block__Modifier--name('top')
 		display grid
 		align-content start
 
 RV-Alignment--bottom()
+	+RV-Block__Modifier--name('bottom')
 		display grid
 		align-content end
 
 RV-Alignment--left()
+	+RV-Block__Modifier--name('left')
 		display grid
 		justify-content start
 
 RV-Alignment--right()
+	+RV-Block__Modifier--name('right')
 		display grid
 		justify-content: end
 
 RV-Alignment--horizontalCenter()
+	+RV-Block__Modifier--name('horizontalCenter')
 		display grid
 		justify-content center
 
 RV-Alignment--verticalCenter()
+	+RV-Block__Modifier--name('verticalCenter')
 		display grid
 		align-items center
 
 RV-Alignment--center()
+	+RV-Block__Modifier--name('center')
 		RV-Alignment--horizontalCenter()
 		RV-Alignment--verticalCenter()
 
-RV-Alignment(prefix='&')
+RV-Alignment()
 	display grid
 
-    {prefix}--top
++RV-Block('RV-Alignment')
+	RV-Alignment()
+	
+	+RV-Block__Modifier()
 		RV-Alignment--top()
 		
-    {prefix}--bottom
+	+RV-Block__Modifier()
 		RV-Alignment--bottom()
 		
-
+	+RV-Block__Modifier()
-    {prefix}--left
 		RV-Alignment--left()
 		
-    {prefix}--right
+	+RV-Block__Modifier()
 		RV-Alignment--right()
 	
-    {prefix}--horizontalCenter
+	+RV-Block__Modifier()
 		RV-Alignment--horizontalCenter()
 		
-    {prefix}--verticalCenter
+	+RV-Block__Modifier()
 		RV-Alignment--verticalCenter()
 		
-    {prefix}--center
+	+RV-Block__Modifier()
 		RV-Alignment--center()
-
-.RV-Alignment
-    RV-Alignment()

components/01_Layouts/contentCrop/_contentCrop.styl

@@ -1,24 +1,97 @@
 RV-ContentCrop--bottom()
+	+RV-Block__Modifier--name('bottom')
 		.RV-Image *
 			object-position bottom 
 		
 RV-ContentCrop--top()
+	+RV-Block__Modifier--name('top')
 		.RV-Image *
 			object-position top
 
 RV-ContentCrop--right()
+	+RV-Block__Modifier--name('right')
 		.RV-Image *
 			object-position right
 
 RV-ContentCrop--left()
+	+RV-Block__Modifier--name('left')
 		.RV-Image *
 			object-position left
 			
 RV-ContentCrop--center()
+	+RV-Block__Modifier--name('center')
 		.RV-Image *
 			object-position center
 
+RV-ContentCrop--square()
+	+RV-Block__Modifier--name('square')
+		width 100%
+		padding-top 100%
+		position relative
+
+		.RV-Image *,
+		div
+			position absolute
+			top 0
+			left 0
+			bottom 0
+			right 0
+		
+RV-ContentCrop--circle()
+	+RV-Block__Modifier--name('circle')
+		RV-ContentCrop__Square()
+		border-radius 50%
+
+RV-ContentCrop--XtoY(x=1, y=1)
+	RV-CSSParameter({
+		x: x,
+		y: y
+	})
+	
+	+RV-Block__Modifier--name('XtoY')
+		width 100%
+		padding-top 100% * (y / x)
+		position relative
+
+		.RV-Image *
+			object-fit cover
+			position absolute
+			top 0
+			left 0
+			bottom 0
+			right 0
+
+RV-ContentCrop--1to2()
+	+RV-Block__Modifier--name('1to2')
+		RV-ContentCrop__XtoY(1, 2)
+
+RV-ContentCrop--2to1()
+	+RV-Block__Modifier--name('2to1')
+		RV-ContentCrop__XtoY(2, 1)
+
+RV-ContentCrop--4to3()
+	+RV-Block__Modifier--name('4to3')
+		RV-ContentCrop__XtoY(4, 3)
+
+RV-ContentCrop--16to9()
+	+RV-Block__Modifier--name('16to9')
+		RV-ContentCrop__XtoY(16, 9)
+
+RV-ContentCrop--3to2()
+	+RV-Block__Modifier--name('3to2')
+		RV-ContentCrop__XtoY(3, 2)
+
+
+RV-ContentCrop__Image()
+	+RV-Element--name('Image')
+		.RV-Image *, .RV-Image
+			width 100%
+			height 100%
+			object-fit cover
+			display block
+
 RV-ContentCrop__Text--fade(background-color=white)
+	+RV-Element__Modifier--name('fade')
 		&:after
 			background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
 			display block
@@ -31,6 +104,7 @@ RV-ContentCrop__Text--fade(background-color=white)
 			z-index 10
 
 RV-ContentCrop__Text--ellipsis(background-color=white)
+	+RV-Element__Modifier--name('ellipsis')
 		&:after
 			position relative
 			display block
@@ -43,7 +117,9 @@ RV-ContentCrop__Text--ellipsis(background-color=white)
 			padding 0 2px
 
 RV-ContentCrop__Text(line-height=1.1, background-color=white)
-	.RV-Text
+	+RV-Element--name('Text')
+		--cc 'text'
+		& .RV-Text
 			overflow hidden
 			display block
 			text-overflow ellipsis
@@ -63,102 +139,58 @@ RV-ContentCrop__Text(line-height=1.1, background-color=white)
 			*:last-child
 				padding-bottom unset
 
-	&--fade
-		RV-ContentCrop__Text--fade(background-color)
 
-	&--ellipsis
+RV-ContentCrop(line-height=1.1)
-		RV-ContentCrop__Text--ellipsis(background-color)
+	line-height = calc(line-height * 1.1)
-		
-RV-ContentCrop__Shapes--square()
-	width 100%
-	padding-top 100%
-	position relative
-
-	.RV-Image *,
-	div
-		position absolute
-		top 0
-		left 0
-		bottom 0
-		right 0
-		
-RV_ContentCrop__Shapes--circle()
-	RV-ContentCrop__Shapes--square()
-	border-radius 50%
-
-RV-ContentCrop__Shapes--xtoy(-x, -y)
-	width 100%
-	padding-top 100% * (-y / -x)
-	position relative
-
-	.RV-Image *
-		object-fit cover
-		position absolute
-		top 0
-		left 0
-		bottom 0
-		right 0
-		
-RV-ContentCrop__Shapes()
-
-	&--square
-		RV-ContentCrop__Shapes--square()
-
-	&--circle
-		RV_ContentCrop__Shapes--circle()
-
-	&--1to2
-		RV-ContentCrop__Shapes--xtoy(1, 2)
-
-	&--2to1
-		RV-ContentCrop__Shapes--xtoy(2, 1)
-
-	&--4to3
-		RV-ContentCrop__Shapes--xtoy(4, 3)
-
-	&--16to9
-		RV-ContentCrop__Shapes--xtoy(16, 9)
-
-	&--3to2
-		RV-ContentCrop__Shapes--xtoy(3, 2)
-
-RV-ContentCrop__Image()
-	.RV-Image *, .RV-Image
-		width 100%
-		height 100%
-		object-fit cover
-		display block
-		
-RV-ContentCrop--shorthands()
-	&--left
-		RV-ContentCrop--left()
-
-	&--center
-		RV-ContentCrop--center()
-
-	&--top
-		RV-ContentCrop--top()
-
-	&--bottom
-		RV-ContentCrop--bottom()
-
-	&--center
-		RV-ContentCrop--center()
-		
-	RV-ContentCrop__Shapes()
-		
-		
-RV-ContentCrop(line-height=1.1, prefix='&')
-	// Heuristic, just to be safe
-	line-height = line-height * 1.1
 	background-color = white
 	display block
 	overflow hidden
 
++RV-Block('RV-ContentCrop')
+	line-height = 1.1
+	RV-ContentCrop(line-height)
+	
+	+RV-Element()
 		RV-ContentCrop__Image()
+	
+	+RV-Element()
 		RV-ContentCrop__Text(line-height)
 		
+		+RV-Element__Modifier()
+			RV-ContentCrop__Text--ellipsis()
 			
-.RV-ContentCrop
+		+RV-Element__Modifier()
-	RV-ContentCrop()
+			RV-ContentCrop__Text--fade()
-	RV-ContentCrop--shorthands()
+	
+	+RV-Block__Modifier()
+		RV-ContentCrop--bottom()
+		
+	+RV-Block__Modifier()
+		RV-ContentCrop--top()
+	
+	+RV-Block__Modifier()
+		RV-ContentCrop--right()
+	
+	+RV-Block__Modifier()
+		RV-ContentCrop--left()
+	
+	+RV-Block__Modifier()
+		RV-ContentCrop--center()
+	
+	+RV-Block__Modifier()
+		RV-ContentCrop--square()
+		
+	+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/fan/_fan.styl

@@ -15,7 +15,7 @@
  * but will fill the parent's width
  */
 RV-Fan--horizontal(base-height, base-width)
-	+RV-Block__Modifier('horizontal')
+	+RV-Block__Modifier--name('horizontal')
 		flex-direction row
 		
 		+RV-Element('Surface')
@@ -28,7 +28,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('vertical')
+	+RV-Block__Modifier--name('vertical')
 		flex-direction column
 		width max-content
 		
@@ -42,7 +42,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('auto')
+	+RV-Block__Modifier--name('auto')
 		flex-flow row wrap
 
 		+RV-Element('Surface')
@@ -57,7 +57,7 @@ RV-Fan--auto(base-height, base-width)
  * are 100% of the parent width
  */
 RV-Fan--fullWidth(base-height, base-width)
-	+RV-Block__Modifier('fullWidth')
+	+RV-Block__Modifier--name('fullWidth')
 		RV-Fan--auto(base-height, base-width)
 		
 		+RV-Element('Base')
@@ -71,22 +71,24 @@ RV-Fan--fullWidth(base-height, base-width)
  * Element Mixins
  * ############### */
 RV-Fan__Base(base-height, base-width)
-	+RV-Element('Base')
+	+RV-Element--name('Base')
 		height base-height
 		width base-width
 		flex 0 0 auto
 
 RV-Fan__Surface--fixedHeight(height)
-	+RV-Element__Modifier('fixedHeight')
+	+RV-Element__Modifier--name('fixedHeight')
 		height height
 
 RV-Fan__Surface--fixedWidth(width)
-	+RV-Element__Modifier('fixedWidth')
+	+RV-Element__Modifier--name('fixedWidth')
 		max-width width
 
 RV-Fan__Surface()
-	+RV-Element('Surface')
+	+RV-Element--name('Surface')
 		RV-ContentCrop()
+		RV-ContentCrop__Text()
+		RV-ContentCrop__Image()
 
 /* ############
  * Block Mixin
@@ -97,7 +99,6 @@ RV-Fan()
 /* #########
  * CSS-Class
  * ######### */
-
 +RV-Block('RV-Fan')
 	RV-CSSParameter({
 		base-height: 280px,
@@ -105,14 +106,24 @@ RV-Fan()
 	})
 
 	RV-Fan()
-
+	+RV-Element()
 		RV-Fan__Surface()
+		
+		+RV-Element__Modifier()
 			RV-Fan__Surface--fixedWidth(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,51 +1,54 @@
-RV-FlexGrid__Container()
-	display grid
 
-RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px)
+RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
+	+RV-Block__Modifier--name('autoWidth')
 		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__Container--fixedSize(item-height=300px, item-width=300px)
+RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
-	RV-FlexGrid__Container--autoWidth(item-height, item-width)
+	+RV-Block__Modifier--name('fixedSize')
+		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__Container--masonry(item-width=300px)
+RV-FlexGrid--masonry(item-width=300px)
+	+RV-Block__Modifier--name('masonry')
 		display unquote(block)
 		column-count auto
 		column-width item-width
+		gap 0
 		
-	RV-Utils__Hook--throw('masonry_grid', @(gap){
+		+RV-Element('Item')
-			*{
+			margin-bottom: var(--inner-spacing);
-				margin-bottom: gap;
 			
 			*{
 				margin-bottom: unset;
 			}
-			}
+
-		}
+RV-FlexGrid__Item()
-	)
+	+RV-Element--name('Item')
+		pass
 
 
-RV-FlexGrid--shorthands(prefix='&')
-	{prefix}__Container
-		&--autoWidth
-			RV-FlexGrid__Container--autoWidth()
-
-		&--fixedSize
-			RV-FlexGrid__Container--fixedSize()
-
-		&--masonry
-			RV-FlexGrid__Container--masonry()
-
-RV-FlexGrid(prefix='&')
-	{prefix}__Container
-		RV-FlexGrid__Container()
-
-	{prefix}__Item
-		RV-Alignment()
-
-.RV-FlexGrid
 RV-FlexGrid()
-	RV-FlexGrid--shorthands()
+	display grid
+
++RV-Block('RV-FlexGrid')
+	RV-CSSParameter({
+		item-height: 300px,
+		item-width: 300px
+	})
+	RV-FlexGrid()
+	
+	+RV-Element()
+		RV-FlexGrid__Item()
+
+	+RV-Block__Modifier()
+		RV-FlexGrid--autoWidth(item-height, item-width)
+		
+	+RV-Block__Modifier()
+		RV-FlexGrid--fixedSize(item-height, item-width)
+		
+	+RV-Block__Modifier()
+		RV-FlexGrid--masonry(item-width)

components/01_Layouts/flexGrid/flexGrid.hbs

@@ -1,4 +1,4 @@
-<div class="RV-FlexGrid__Container RV-FlexGrid__Container--autoWidth">
+<div class="RV-FlexGrid RV-FlexGrid--autoWidth">
 	<div class="red RV-FlexGrid__Item">Heres</div>
 	<div class="green RV-FlexGrid__Item">some</div>
 	<div class="red RV-FlexGrid__Item">totally</div>
@@ -15,7 +15,7 @@
 
 <br><br>
 
-<div class="RV-FlexGrid__Container RV-FlexGrid__Container--fixedSize">
+<div class="RV-FlexGrid RV-FlexGrid--fixedSize">
 	<div class="red RV-FlexGrid__Item">Heres</div>
 	<div class="green RV-FlexGrid__Item">some</div>
 	<div class="red RV-FlexGrid__Item">totally</div>
@@ -32,7 +32,7 @@
 
 <br><br>
 
-<div class="RV-FlexGrid__Container RV-FlexGrid__Container--masonry RV-Spacing__Inner--small">
+<div class="RV-FlexGrid RV-FlexGrid--masonry">
 	<div class="red RV-FlexGrid__Item">Heres</div>
 	<div class="green RV-FlexGrid__Item">some</div>
 	<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div>

components/01_Layouts/flexRow/_flexRow.styl

@@ -2,181 +2,165 @@
  * Classes for easy flexrow usage
  */
 
-
-/* ##########
- * Container class
-  ########### */
-RV-FlexRow__Container(prefix='&')
-	display flex
-	height 100%
-
 /*
  * Orientation
  */
-RV-FlexRow__Container--horizontal()
+RV-FlexRow--horizontal()
+	+RV-Block__Modifier--name('horizontal')
 		flex-direction row
 
-RV-FlexRow__Container--vertical()
+RV-FlexRow--vertical()
+	+RV-Block__Modifier--name('vertical')
 		flex-direction column
 	
 /*
  * 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__Container--breakPoint(localBreakPoint=500px, mediaBreakPoint=null)
+RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
+	+RV-Block__Modifier--name('breakPoint')
 		flex-wrap wrap
 		RV-Reset()
 		gap 0px
 		
-	RV-Utils__Hook--throw('flexrow_breakpoint_gap', @(gap){
 		RV-Utils__ElementAmount(@(index, total){
-					min-width "calc((%s - (%s * (%s - 1))) / %s - (2 * %s))" % (localBreakPoint gap index index gap)
+				min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
+			}
+		)
 
-					*{
+		+RV-Element('Item')
 			min-width initial
-					}
-				}
-			)
-		}
-	)
-
-	*{
 			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
-	}
+			overflow hidden
 		
-	if mediaBreakPoint !=null
 		@media(max-width mediaBreakPoint)
-			RV-FlexRow__Container--column()
+			flex-direction row
 
 /*
- * Flexbox behavior, Row is horizontal, but item are wraped individualy
+ * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
  */
-RV-FlexRow__Container--auto()
+RV-FlexRow--auto()
-	RV-FlexRow__Container--horizontal()
+	+RV-Block__Modifier--name('auto')
+		RV-FlexRow--horizontal()
 		flex-wrap wrap
 
-/*
- * Shorthand for the modifiers above
- */
-RV-FlexRow__Container--shorthands(break_width=500px)
-	&--breakPoint
-		RV-FlexRow__Container--breakPoint(break_width)
-
-	&--horizontal
-		RV-FlexRow__Container--horizontal()
-
-	&--vertical
-		RV-FlexRow__Container--vertical()
-
-	&--auto
-		RV-FlexRow__Container--auto()
 
 /* ##########
  * Item class
   ########### */
 RV-FlexRow__Item()
+	+RV-Element--name('Item')
 		flex-basis max-content
-	RV-FlexRow__Item--normal()
+		flex-grow 3
+		flex-shrink 3
 
 /*
  * Varios relative width of items to each other
  */
-RV-FlexRow__Item--normal()
-	flex-grow 3
-	flex-shrink 3
 
 RV-FlexRow__Item--narrower()
+	+RV-Element__Modifier--name('narrower')
 		flex-grow 1
 		flex-shrink 5
 
 RV-FlexRow__Item--narrow()
+	+RV-Element__Modifier--name('narrow')
 		flex-grow 2
 		flex-shrink 4
 
 RV-FlexRow__Item--wide()
+	+RV-Element__Modifier--name('wide')
 		flex-grow 4
 		flex-shrink 2
 
 RV-FlexRow__Item--wider()
+	+RV-Element__Modifier--name('wider')
 		flex-grow 5
 		flex-shrink 1
 
 /*
  * Item has always the given width
  */
-RV-FlexRow__Item--fixedSize(width=100px)
+RV-FlexRow__Item--fixedSize(width)
+	+RV-Element__Modifier--name('fixedSize')
 		RV-Sizes--fixedSize(width)
 
 /*
  * Item width relativ to the container
  */
 RV-FlexRow__Item--half()
+	+RV-Element__Modifier--name('half')
 		RV-Sizes--half()
+
 RV-FlexRow__Item--third()
+	+RV-Element__Modifier--name('third')
 		RV-Sizes--third()
 
 RV-FlexRow__Item--quarter()
+	+RV-Element__Modifier--name('quarter')
 		RV-Sizes--quarter()
 	
 RV-FlexRow__Item--content()
+	+RV-Element__Modifier--name('content')
 		RV-Sizes--content()
 
-/*
+/* ##########
- * Shorthand for the modifiers above
+ * Block
- */
+  ########### */
-RV-FlexRow__Item--shorthands()
+RV-FlexRow()
-	RV-Alignment()
+	display flex
+	height 100%
 
-	&--narrower
++RV-Block('RV-FlexRow')
-		RV-FlexRow__Item--narrower()
+	RV-FlexRow()
 	
-	&--narrow
+	RV-CSSParameter({
-		RV-FlexRow__Item--narrow()
+		width: 100px
+		localBreakPoint: 500px,
+		mediaBreakPoint: 100vw
+	})
 	
-	&--wide()
+	+RV-Element()
-		RV-FlexRow__Item--wide()
-
-	&--wider
-		RV-FlexRow__Item--wider()
-
-	&--fixedSize
-		RV-FlexRow__Item--fixedSize()
-
-	&--half
-		RV-FlexRow__Item--half()
-
-	&--third
-		RV-FlexRow__Item--third()
-
-	&--quarter
-		RV-FlexRow__Item--quarter()
-
-	&--content
-		RV-FlexRow__Item--content()
-
-/*
- * Combining basic classes
- */
-RV-FlexRow(prefix='&')
-	{prefix}__Container
-		RV-FlexRow__Container(prefix=prefix)
-
-	{prefix}__Item
 		RV-FlexRow__Item()
 		
-/*
+		+RV-Element__Modifier()
- * Combining shorthands
+			RV-FlexRow__Item--narrower()
- */
-RV-FlexRow--shorthands(break_width=500px, prefix='&')
-	{prefix}__Container 
-		RV-FlexRow__Container--shorthands(break_width)
 	
-	{prefix}__Item
+		+RV-Element__Modifier()
-		RV-FlexRow__Item--shorthands()
+			RV-FlexRow__Item--narrow()
 			
-/*
+		+RV-Element__Modifier()
- * Final CSS Class
+			RV-FlexRow__Item--wide()
- */
+			
-.RV-FlexRow
+		+RV-Element__Modifier()
-	RV-FlexRow()
+			RV-FlexRow__Item--wider()
-	RV-FlexRow--shorthands()
+			
+		+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--horizontal()
+		
+	+RV-Block__Modifier()
+		RV-FlexRow--vertical()
+		
+	+RV-Block__Modifier()
+		RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
+		
+	+RV-Block__Modifier()
+		RV-FlexRow--auto()

components/01_Layouts/flexRow/flexRow.hbs

@@ -1,4 +1,4 @@
-<div class="RV-FlexRow__Container">
+<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>
@@ -6,12 +6,12 @@
 	<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
 </div>
 <br></br>
-<div class="RV-FlexRow__Container">
+<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__Container RV-FlexRow__Container--multiRow">
+<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>
@@ -20,7 +20,7 @@
 </div>
 
 <br><br>
-<div class="RV-FlexRow__Container RV-Spacing__Inner--small">
+<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>
@@ -29,7 +29,7 @@
 </div>
 
 <br><br>
-<div class="RV-FlexRow__Container RV-FlexRow__Container--breakPoint">
+<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>

components/01_Layouts/fullWidthContent/_fullWidthContent.styl

@@ -1,16 +1,15 @@
-RV-FullWidthContent__Container()
-    width 100%
-
-RV-FullWidthContent__Item()
-    width 100%
-    RV-ContentCrop()
-
-RV-FullWidthContent(prefix='&')
-    {prefix}__Container
-        RV-FullWidthContent__Container()
-
-    {prefix}__Item
-        RV-FullWidthContent__Item()
-
-.RV-FullWidthContent
 RV-FullWidthContent()
+	width 100%
+
+RV-FullWidthContent__Item()
+	+RV-Element--name('Item')
+		width 100%
+		RV-ContentCrop__Text()
+		RV-ContentCrop__Image()
+
+
++RV-Block('RV-FullWidthContent')
+	RV-FullWidthContent()
+	
+	+RV-Element()
+		RV-FullWidthContent__Item()

components/01_Layouts/sizes/_sizes.styl

@@ -1,49 +1,51 @@
 RV-Sizes--half()
+	+RV-Block__Modifier--name('half')
 		flex-grow 0
 		flex-shrink 0
 		flex-basis 50%
 		width 50%
 	
 RV-Sizes--third()
+	+RV-Block__Modifier--name('third')
 		flex-grow 0
 		flex-shrink 0
 		flex-basis (100/3)%
 		width (100/3)%
 	
 RV-Sizes--quarter()
+	+RV-Block__Modifier--name('quarter')
 		flex-grow 0
 		flex-shrink 0
 		flex-basis 25%
 		width 25%
 	
 RV-Sizes--fixedSize(width=100px)
+	+RV-Block__Modifier--name('fixedSize')
 		flex-grow 0
 		flex-shrink 0
 		width min-content
 		flex-basis width
 	
 RV-Sizes--content()
+	+RV-Block__Modifier--name('content')
 		flex-grow 0
 		flex-shrink 0
 		width max-content
 		flex-basis max-content
 
-RV-Sizes(prefix='&')
++RV-Block('RV-Sizes')
 
-	{prefix}--half
+	+RV-Block__Modifier()
 		RV-Sizes--half()
 
-	{prefix}--third
+	+RV-Block__Modifier()
 		RV-Sizes--third()
 
-	{prefix}--quarter
+	+RV-Block__Modifier()
 		RV-Sizes--quarter()
 
-	{prefix}--fixedSize
+	+RV-Block__Modifier()
-		RV-Sizes--fixedSize
+		RV-Sizes--fixedSize()
 
-	{prefix}--content
+	+RV-Block__Modifier()
-		RV-Sizes--content
+		RV-Sizes--content()
-		
-.RV-Sizes
-	RV-Sizes()