Calc dimension including margin/padding

components/00_Tools/_alignment.styl

@@ -6,4 +6,6 @@ RV-Reset()
 	left 0
 	right 0
 	border none
-	gap 0
+	gap 0
+	--inner-spacing 0px
+	--outer-spacing 0px

components/00_Tools/_spacing.styl

@@ -0,0 +1,5 @@
+calc_height(base-height=100%)
+	'calc(%s - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing)))' % base-height
+	
+calc_width(base-width=100%)
+	'calc(%s - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing)))' % base-width

components/01_Layouts/fan/_fan.styl

@@ -19,8 +19,8 @@ RV-Fan--horizontal(base-height, base-width)
 		flex-direction row
 		
 		+RV-Element('Surface')
-			min-width base-width
+			min-width calc_width(base-width)
-			height base-height
+			height calc_height(base-height)
 
 /*
  * Base above, Surfce below
@@ -33,9 +33,10 @@ RV-Fan--vertical(base-height, base-width)
 		width max-content
 		
 		+RV-Element('Surface')
-			width base-width
+			width calc_width(base-width)
 			min-height base-height
 
+
 /*
  * Initialy horizontal, changes to vertical when
  * the width of the parent is less than 2 x base-width
@@ -46,9 +47,9 @@ RV-Fan--auto(base-height, base-width)
 		flex-flow row wrap
 
 		+RV-Element('Surface')
-			width 'calc(100% - %s)' % base-width
+			min-width calc_width('calc(%s)' % base-width)
-			min-width base-width
+			width calc_width('calc(100% - %s)' % base-width)
-			height base-height
+			height calc_height(base-height)
 
 /*
  * Also initialy horizontal, changes to vertical when
@@ -72,29 +73,35 @@ RV-Fan--fullWidth(base-height, base-width)
  * ############### */
 RV-Fan__Base(base-height, base-width)
 	+RV-Element--name('Base')
-		height base-height
+		height calc_height(base-height)
-		width base-width
+		width calc_width(base-width)
 		flex 0 0 auto
 
 RV-Fan__Surface--fixedHeight(height)
 	+RV-Element__Modifier--name('fixedHeight')
-		height height
+		height calc_height(height)
 
 RV-Fan__Surface--fixedWidth(width)
 	+RV-Element__Modifier--name('fixedWidth')
-		max-width width
+		max-width calc_width(width)
 
-RV-Fan__Surface()
+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()
 
 /* ############
  * Block Mixin
  * ############ */
 RV-Fan()
 	display flex
+	position relative
 
 /* #########
  * CSS-Class
@@ -104,10 +111,12 @@ RV-Fan()
 		base-height: 280px,
 		base-width: 320px
 	})
+	
+	--inner-spacing 0px
 
 	RV-Fan()
 	+RV-Element()
-		RV-Fan__Surface()
+		RV-Fan__Surface(base-height, base-width)
 		
 		+RV-Element__Modifier()
 			RV-Fan__Surface--fixedWidth(base-width)

components/01_Layouts/flexGrid/_flexGrid.styl

@@ -12,36 +12,43 @@ RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
 		grid-template-columns repeat(auto-fill, item-width)
 		justify-content space-between
 
-RV-FlexGrid--masonry(item-width=300px)
+RV-FlexGrid--masonry(item-height=300px,item-width=300px)
 	+RV-Block__Modifier--name('masonry')
 		display unquote(block)
 		column-count auto
 		column-width item-width
 		
 		+RV-Element('Item')
+			display inline-block
+			height unset
 			margin-bottom: var(--inner-spacing);
-			
+			& > *  {
-			*{
+				height auto
-				margin-bottom: unset;
 			}
 
-RV-FlexGrid__Item()
+RV-FlexGrid__Item(item-height, item-width)
 	+RV-Element--name('Item')
-		pass
+		height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
+		& > *  {
+			height 100%
+			width 100%
+		}
 
-
+RV-FlexGrid(item-height, item-width)
-RV-FlexGrid()
 	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()
+	RV-FlexGrid(item-height, item-width)
 	
 	+RV-Element()
-		RV-FlexGrid__Item()
+		RV-FlexGrid__Item(item-height, item-width)
 
 	+RV-Block__Modifier()
 		RV-FlexGrid--autoWidth(item-height, item-width)
@@ -50,4 +57,4 @@ RV-FlexGrid()
 		RV-FlexGrid--fixedSize(item-height, item-width)
 		
 	+RV-Block__Modifier()
-		RV-FlexGrid--masonry(item-width)
+		RV-FlexGrid--masonry(item-height,item-width)