Converting Layouts to Stylus

components/00_Global/_alignment.scss

@@ -1,9 +0,0 @@
-@mixin RV-Reset {
-	margin: 0;
-	padding: 0;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	border: none;
-}

components/00_Global/_alignment.styl

@@ -0,0 +1,8 @@
+RV-Reset()
+	margin 0
+	padding 0
+	top 0
+	bottom 0
+	left 0
+	right 0
+	border none

components/00_Global/_elementAmount.scss

@@ -1,9 +0,0 @@
-@mixin RV-Utils__ElementAmount($-up-to: 20) {
-    @for $i from 1 through $-up-to {
-
-        *:first-child:nth-last-child(#{$i}),
-        *:first-child:nth-last-child(#{$i})~* {
-            @content($i);
-        }
-    }
-}

components/00_Global/_elementAmount.styl

@@ -0,0 +1,6 @@
+RV-Utils__ElementAmount(callback, up-to=20) 
+	for i in (1..up-to)
+
+		*:first-child:nth-last-child({i}),
+		*:first-child:nth-last-child({i})~*
+			callback(i, up-to)

components/00_Global/_global.scss

@@ -1,4 +0,0 @@
-@import './selectorHook';
-@import './elementAmount';
-
-@import './alignment';

components/00_Global/_global.styl

@@ -0,0 +1,4 @@
+@import './_selectorHook'
+
+@import './_elementAmount'
+@import './_alignment'

components/00_Global/_selectorHook.scss

@@ -1,90 +0,0 @@
-$-hooks: ();
-@use "sass:meta";
-
-
-/*
- * A system to store a context for a CSS-Selector.
- * Can be used to apply speacial rules when mixins are combined
- */
-
-@function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
-
-    @if $index {
-        @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-
-    @return $string;
-}
-
-/*
- * Generates a key-safe version of the selector
- */
-@function _generate_selector_identifier() {
-    $-path: str-replace(#{&}, '.', '');
-    $-path: str-replace(#{$-path}, ' ', '');
-
-    @return $-path;
-}
-
-@function hook($-key, $-value) {
-
-    $-path: _generate_selector_identifier();
-
-    $-context: ();
-
-    @if map-has-key($-hooks, $-path) {
-        $-context: map-get($-hooks, $-path);
-    }
-
-    $-context: map-merge($-context, ($-key: $-value));
-
-    $-hooks: map-merge($-hooks, ($-path: $-context)) !global;
-
-    @return 'Creating Hook for '+#{&}+' with '+#{$-key}+': '+#{$-value};
-}
-
-@function append-hook($-kwargs) {
-    $-path: _generate_selector_identifier();
-
-    $-hooks: map-merge($-hooks, ($-path: map-merge(get-hook(), $-kwargs))) !global;
-    @return 'Added '+inspect($-kwargs)+' to the hook of '+#{&};
-}
-
-@function has-hook() {
-    @return map-has-key($-hooks, _generate_selector_identifier());
-}
-
-@function get-hook() {
-    $-map: map-get($-hooks, _generate_selector_identifier());
-
-    @if $-map !=null {
-        @return $-map;
-    }
-
-    @return ('selectors': ());
-}
-
-@function get-hook-value($-key) {
-
-    $-hook: get-hook();
-
-    @if $-hook !=null {
-        @if map-has-key($-hook, $-key) {
-            @return map-get($-hook, $-key);
-        }
-    }
-
-    @return null;
-}
-
-@mixin RV-Utils__Hook--catch {
-
-    @if has-hook() {
-        @content;
-    }
-}
-
-@mixin RV-Utils__Hook--throw($-kwargs, $-css-selectors...) {
-    @debug append-hook($-kwargs);
-}

components/00_Global/_selectorHook.styl

@@ -0,0 +1,32 @@
+_thrown_hooks = {}
+_caught_hooks = {}
+
+RV-Utils__Hook--throw(name, callback)
+	if name in _thrown_hooks
+		hook = _thrown_hooks[name]
+	else    
+		hook = {}
+	
+	hook[selector()] = callback
+	_thrown_hooks[name] = hook
+
+RV-Utils__Hook--catch(name, context)
+	if selector() in _caught_hooks
+		_catches = _caught_hooks[selector()]
+	else
+		_catches = {}
+	_catches[name] = context
+	_caught_hooks[selector()] = _catches
+	
+	for name, hook in _thrown_hooks
+		if selector() in hook
+			hook[selector()](context)
+
+_generate_hooks()
+	for catched_selector, catches in _caught_hooks
+		for name, context in catches
+			if name in _thrown_hooks
+				hook = _thrown_hooks[name]
+				for thrown_selector, callback in hook
+					{thrown_selector}{catched_selector}
+						callback(context)

components/01_Layouts/_layouts.scss

@@ -1,8 +0,0 @@
-@import 'alignment/alignment';
-
-@import 'flexRow/flexRow';
-@import 'flexGrid/flexGrid';
-@import 'contentCrop/contentCrop';
-@import 'fan/fan';
-@import 'fullWidthContent/fullWidthContent';
-@import 'sizes/sizes';

components/01_Layouts/_layouts.styl

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

components/01_Layouts/alignment/_alignment.scss

@@ -1,70 +0,0 @@
-@mixin RV-Alignment--top {
-    display: grid;
-    align-content: start;
-}
-
-@mixin RV-Alignment--bottom {
-    display: grid;
-    align-content: end;
-}
-
-@mixin RV-Alignment--left {
-    display: grid;
-    justify-content: start;
-}
-
-@mixin RV-Alignment--right {
-    display: grid;
-    justify-content: end;
-}
-
-@mixin RV-Alignment--horizontalCenter {
-    display: grid;
-    justify-content: center;
-}
-
-@mixin RV-Alignment--verticalCenter {
-    display: grid;
-    align-items: center;
-}
-
-@mixin RV-Alignment--center {
-    @include RV-Alignment--horizontalCenter;
-    @include RV-Alignment--verticalCenter;
-}
-
-@mixin RV-Alignment($-prefix: '&') {
-    display: grid;
-
-    #{$-prefix}--top {
-        @include RV-Alignment--top;
-    }
-
-    #{$-prefix}--bottom {
-        @include RV-Alignment--bottom;
-    }
-
-    #{$-prefix}--left {
-        @include RV-Alignment--left;
-    }
-
-    #{$-prefix}--right {
-        @include RV-Alignment--right;
-    }
-
-    #{$-prefix}--horizontalCenter {
-        @include RV-Alignment--horizontalCenter;
-    }
-
-    #{$-prefix}--verticalCenter {
-        @include RV-Alignment--verticalCenter;
-    }
-
-    #{$-prefix}--center {
-        @include RV-Alignment--center;
-    }
-}
-
-.RV-Alignment {
-    @include RV-Alignment;
-}

components/01_Layouts/alignment/_alignment.styl

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

components/01_Layouts/contentCrop/_contentCrop.scss

@@ -1,200 +0,0 @@
-@mixin RV-ContentCrop--bottom {
-    img {
-        object-position: bottom;
-    }
-}
-
-@mixin RV-ContentCrop--top {
-    img {
-        object-position: top;
-    }
-}
-
-@mixin RV-ContentCrop--right {
-    img {
-        object-position: right;
-    }
-}
-
-@mixin RV-ContentCrop--left {
-    img {
-        object-position: left;
-    }
-}
-
-@mixin RV-ContentCrop--center {
-    img {
-        object-position: center;
-    }
-}
-
-@mixin RV-ContentCrop__Text--fade($-background-color: white) {
-    &--fade {
-        &:after {
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
-            display: block;
-            content: ' ';
-            opacity: 0.8;
-            position: relative;
-            top: -25%;
-            width: 100%;
-            height: 25%;
-            z-index: -10;
-        }
-    }
-}
-
-@mixin RV-ContentCrop__Text--ellipsis($-background-color: white) {
-    &--ellipsis {
-        &:after {
-            position: relative;
-            display: block;
-            bottom: 1.2em;
-            left: calc(100% - 3ch);
-            content: '...';
-            font-size: 1.2em;
-            min-width: 2em;
-            background-color: $-background-color;
-            padding: 0 2px;
-        }
-    }
-}
-
-@mixin RV-ContentCrop__Text($-line-height: 1.1, $-background-color: white) {
-
-    p {
-        overflow: hidden;
-        display: block;
-        text-overflow: ellipsis;
-        padding: 0;
-        margin: 0;
-        line-height: #{$-line-height};
-        // Determining the max line count and caclulating the height
-        z-index: -20;
-        position: relative;
-        background-color: #{$-background-color};
-        height: floor(100% / $-line-height / 16) * $-line-height * 16;
-    }
-
-    &--fade {
-        @include RV-ContentCrop__Text--fade($-background-color);
-    }
-
-    &--ellipsis {
-        @include RV-ContentCrop__Text--ellipsis($-background-color);
-    }
-}
-
-@mixin RV-ContentCrop__Shapes--square {
-    width: 100%;
-    padding-top: 100%;
-    position: relative;
-
-    img,
-    div {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-    }
-}
-
-@mixin RV-ContentCrop__Shapes--circle {
-    @include RV-ContentCrop__Shapes--square;
-    border-radius: 50%;
-}
-
-@mixin RV-ContentCrop__Shapes--xtoy($-x, $-y) {
-    width: 100%;
-    padding-top: 100% * ($-y / $-x);
-    position: relative;
-
-    img {
-        object-fit: cover;
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-    }
-}
-
-@mixin RV-ContentCrop__Shapes {
-
-    &--square {
-        @include RV-ContentCrop__Shapes--square;
-    }
-
-    &--circle {
-        @include RV_ContentCrop__Shapes--circle;
-    }
-
-    &--1to2 {
-        @include RV-ContentCrop__Shapes--xtoy(1, 2);
-    }
-
-    &--2to1 {
-        @include RV-ContentCrop__Shapes--xtoy(2, 1);
-    }
-
-    &--4to3 {
-        @include RV-ContentCrop__Shapes--xtoy(4, 3);
-    }
-
-    &--16to9 {
-        @include RV-ContentCrop__Shapes--xtoy(16, 9);
-    }
-
-    &--3to2 {
-        @include RV-ContentCrop__Shapes--xtoy(3, 2);
-    }
-}
-
-@mixin RV-ContentCrop__Image {
-    img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
-    }
-
-}
-
-@mixin 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;
-
-    @include RV-ContentCrop__Image;
-    @include RV-ContentCrop__Text($-line-height);
-
-    @include RV-ContentCrop__Shapes;
-
-    &--left {
-        @include RV-ContentCrop--left;
-    }
-
-    &--center {
-        @include RV-ContentCrop--center;
-    }
-
-    &--top {
-        @include RV-ContentCrop--top;
-    }
-
-    &--bottom {
-        @include RV-ContentCrop--bottom;
-    }
-
-    &--center {
-        @include RV-ContentCrop--center;
-    }
-}
-
-.RV-ContentCrop {
-    @include RV-ContentCrop;
-}

components/01_Layouts/contentCrop/_contentCrop.styl

@@ -0,0 +1,154 @@
+RV-ContentCrop--bottom()
+	img
+		object-position bottom 
+		
+RV-ContentCrop--top()
+	img
+		object-position top
+
+RV-ContentCrop--right()
+	img
+		object-position right
+
+RV-ContentCrop--left()
+	img
+		object-position left
+		
+RV-ContentCrop--center()
+	img
+		object-position center
+
+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
+		position relative
+		top -25%
+		width 100%
+		height 25%
+		z-index -10
+
+RV-ContentCrop__Text--ellipsis(background-color=white)
+	&:after
+		position relative
+		display block
+		bottom 1.2em
+		left calc(100% - 3ch)
+		content '...'
+		font-size 1.2em
+		min-width 2em
+		background-color background-color
+		padding 0 2px
+
+RV-ContentCrop__Text(line-height=1.1, background-color=white)
+	p
+		overflow hidden
+		display block
+		text-overflow ellipsis
+		padding 0
+		margin 0
+		line-height line-height
+		// Determining the max line count and caclulating the height
+		z-index -20
+		position relative
+		background-color background-color
+		height floor(100% / line-height / 16) * line-height * 16
+
+	&--fade
+		RV-ContentCrop__Text--fade(background-color)
+
+	&--ellipsis
+		RV-ContentCrop__Text--ellipsis(background-color)
+		
+RV-ContentCrop__Shapes--square()
+	width 100%
+	padding-top 100%
+	position relative
+
+	img,
+	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
+
+	img
+		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()
+	img
+		width 100%
+		height 100%
+		object-fit cover
+		display block
+		
+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-ContentCrop__Image()
+	RV-ContentCrop__Text(line-height)
+
+	RV-ContentCrop__Shapes()
+
+	&--left
+		RV-ContentCrop--left()
+
+	&--center
+		RV-ContentCrop--center()
+
+	&--top
+		RV-ContentCrop--top()
+
+	&--bottom
+		RV-ContentCrop--bottom()
+
+	&--center
+		RV-ContentCrop--center()
+		
+.RV-ContentCrop
+	RV-ContentCrop()

components/01_Layouts/fan/_fan.scss

@@ -1,69 +0,0 @@
-@mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
-
-    #{$-prefix}__Container#{$-suffix} {
-        flex-direction: row;
-    }
-
-    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
-        min-width: $-base_width;
-        height: $-base_height;
-    }
-}
-
-@mixin RV-Fan--vertical($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
-    #{$-prefix}__Container#{$-suffix} {
-        flex-direction: column;
-        width: max-content;
-    }
-
-    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
-        width: $-base_width;
-        min-height: $-base_height;
-    }
-}
-
-@mixin RV-Fan--auto($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
-
-    #{$-prefix}__Container#{$-suffix} {
-        flex-flow: row wrap;
-    }
-
-    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
-        width: calc(100% - #{$-base_width});
-        min-width: $-base-width;
-        height: $-base_height;
-    }
-}
-
-@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
-
-    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Base,
-    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
-        flex-grow: 1;
-    }
-}
-
-@mixin RV-Fan ($-base_height, $-base_width, $-prefix: '&') {
-    @include RV-Fan--vertical($-base_height, $-base_width, $-prefix, '--vertical');
-    @include RV-Fan--horizontal($-base_height, $-base_width, $-prefix, '--horizontal');
-    @include RV-Fan--auto($-base_height, $-base_width, $-prefix, '--auto');
-    @include RV-Fan--fullWidth($-base_height, $-base_width, $-prefix, '--fullWidth');
-
-    #{$-prefix}__Container {
-        display: flex;
-    }
-
-    #{$-prefix}__Base {
-        height: $-base_height;
-        width: $-base_width;
-        flex: 0 0 auto;
-    }
-
-    #{$-prefix}__Surface {
-        @include RV-ContentCrop;
-    }
-}
-
-.RV-Fan {
-    @include RV-Fan(280px, 320px);
-}

components/01_Layouts/fan/_fan.styl

@@ -0,0 +1,53 @@
+RV-Fan--horizontal(base_height, base_width, prefix='&', suffix= '')
+
+    {prefix}__Container{suffix}
+        flex-direction row
+
+    {prefix}__Container{suffix} {prefix}__Surface
+        min-width base_width
+        height base_height
+
+RV-Fan--vertical(base_height, base_width, prefix='&', suffix='')
+    {prefix}__Container{suffix}
+        flex-direction column
+        width max-content
+
+    {prefix}__Container{suffix} {prefix}__Surface
+        width base_width
+        min-height base_height
+		
+RV-Fan--auto(base_height, base_width, prefix='&', suffix='')
+
+	{prefix}__Container{suffix}
+        flex-flow row wrap
+
+    {prefix}__Container{suffix} {prefix}__Surface
+        width 'calc(100% - %s)' % base_width
+        min-width base_width
+        height base_height
+
+RV-Fan--fullWidth(base_height, base_width, prefix='&', suffix='')
+
+    {prefix}__Container{suffix} {prefix}__Base,
+    {prefix}__Container{suffix} {prefix}__Surface
+        flex-grow 1
+
+RV-Fan(base_height, base_width, prefix='&')
+    RV-Fan--vertical(base_height, base_width, prefix, '--vertical')
+    RV-Fan--horizontal(base_height, base_width, prefix, '--horizontal')
+    RV-Fan--auto(base_height, base_width, prefix, '--auto')
+    RV-Fan--fullWidth(base_height, base_width, prefix, '--fullWidth')
+
+    {prefix}__Container
+        display flex
+
+    {prefix}__Base
+        height base_height
+        width base_width
+        flex 0 0 auto
+
+    {prefix}__Surface
+        RV-ContentCrop()
+
+.RV-Fan
+    RV-Fan(280px, 320px)

components/01_Layouts/flexGrid/_flexGrid.scss

@@ -1,49 +0,0 @@
-@mixin RV-FlexGrid__Container {
-    display: grid;
-}
-
-@mixin RV-FlexGrid__Container--autoWidth($-item-height: 300px, $-item-min-width: 300px) {
-    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);
-}
-
-@mixin RV-FlexGrid__Container--fixedSize($-item-height: 300px, $-item-width: 300px) {
-    @include RV-FlexGrid__Container--autoWidth($-item-height, $-item-width);
-    grid-template-columns: repeat(auto-fill, $-item-width);
-    justify-content: space-between;
-}
-
-@mixin RV-FlexGrid__Container--masonry($-item-width: 300px) {
-    display: block;
-    column-count: auto;
-    column-width: $-item-width;
-
-    @include RV-Utils__Hook--throw(());
-}
-
-@mixin RV-FlexGrid($-prefix: '&') {
-    #{$-prefix}__Container {
-        @include RV-FlexGrid__Container;
-
-        &--autoWidth {
-            @include RV-FlexGrid__Container--autoWidth;
-        }
-
-        &--fixedSize {
-            @include RV-FlexGrid__Container--fixedSize;
-        }
-
-        &--masonry {
-            @include RV-FlexGrid__Container--masonry;
-        }
-    }
-
-    #{$-prefix}__Item {
-        @include RV-Alignment;
-    }
-}
-
-.RV-FlexGrid {
-    @include RV-FlexGrid;
-}

components/01_Layouts/flexGrid/_flexGrid.styl

@@ -0,0 +1,44 @@
+RV-FlexGrid__Container()
+	display grid
+
+RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px)
+	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__Container--autoWidth(item-height, item-width)
+	grid-template-columns repeat(auto-fill, item-width)
+	justify-content space-between
+
+RV-FlexGrid__Container--masonry(item-width=300px)
+	display unquote(block)
+	column-count auto
+	column-width item-width
+	
+	RV-Utils__Hook--throw('masonry_grid', @(gap){
+			*{
+				margin-bottom: gap;
+			}
+		}
+	)
+
+
+RV-FlexGrid(prefix='&')
+	{prefix}__Container
+		RV-FlexGrid__Container()
+
+		&--autoWidth
+			RV-FlexGrid__Container--autoWidth()
+
+		&--fixedSize
+			RV-FlexGrid__Container--fixedSize()
+
+		&--masonry
+			RV-FlexGrid__Container--masonry()
+
+	{prefix}__Item
+		RV-Alignment()
+
+.RV-FlexGrid
+	RV-FlexGrid()

components/01_Layouts/flexRow/_flexRow.scss

@@ -1,232 +0,0 @@
-/*
- * Classes for easy flexrow usage
- */
-
-
-/* ##########
- * Container class
-  ########### */
-@mixin RV-FlexRow__Container($-prefix: '&') {
-    display: flex;
-    height: 100%;
-}
-
-/*
- * Orientation
- */
-@mixin RV-FlexRow__Container--horizontal {
-    flex-direction: row;
-}
-
-@mixin RV-FlexRow__Container--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.
- */
-@mixin RV-FlexRow__Container--breakPoint($-localBreakPoint: 500px, $-mediaBreakPoint: null) {
-    flex-wrap: wrap;
-    @include RV-Reset;
-    gap: 0px;
-
-    @include RV-Utils__Hook--throw(('breakPoint': $-localBreakPoint),
-        'RV-Spacing__Inner--small',
-        'RV-Spacing__Inner--medium',
-        'RV-Spacing__Inner--large'
-    );
-
-    * {
-        flex-basis: calc(#{$-localBreakPoint} * 999 - 100% * 999);
-    }
-
-    @if ($-mediaBreakPoint !=null) {
-        @media(max-width: $-mediaBreakPoint) {
-            @include RV-FlexRow__Container--column;
-        }
-    }
-}
-
-/*
- * Flexbox behavior, Row is horizontal, but item are wraped individualy
- */
-@mixin RV-FlexRow__Container--auto {
-    @include RV-FlexRow__Container--horizontal;
-    flex-wrap: wrap;
-}
-
-/*
- * Shorthand for the modifiers above
- */
-@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
-    &--breakPoint {
-        @include RV-FlexRow__Container--breakPoint(#{$-break_width});
-    }
-
-    &--horizontal {
-        @include RV-FlexRow__Container--horizontal;
-    }
-
-    &--vertical {
-        @include RV-FlexRow__Container--vertical;
-    }
-
-    &--auto {
-        @include RV-FlexRow__Container--auto;
-    }
-}
-
-/* ##########
- * Item class
-  ########### */
-@mixin RV-FlexRow__Item {
-    flex-basis: max-content;
-    @include RV-FlexRow__Item--normal;
-}
-
-/*
- * Varios relative width of items to each other
- */
-@mixin RV-FlexRow__Item--normal {
-    flex-grow: 3;
-    flex-shrink: 3;
-}
-
-@mixin RV-FlexRow__Item--narrower {
-    flex-grow: 1;
-    flex-shrink: 5;
-}
-
-@mixin RV-FlexRow__Item--narrow {
-    flex-grow: 2;
-    flex-shrink: 4;
-}
-
-@mixin RV-FlexRow__Item--wide {
-    flex-grow: 4;
-    flex-shrink: 2;
-}
-
-@mixin RV-FlexRow__Item--wider {
-    flex-grow: 5;
-    flex-shrink: 1;
-}
-
-/*
- * Item has always the given width
- */
-@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: min-content;
-    flex-basis: $-width;
-}
-
-/*
- * Item width relativ to the container
- */
-@mixin RV-FlexRow__Item--half {
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 50%;
-    width: 50%;
-}
-
-@mixin RV-FlexRow__Item--third {
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 33.33%;
-    width: 33.33%;
-}
-
-@mixin RV-FlexRow__Item--quarter {
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 25%;
-    width: 25%;
-}
-
-@mixin RV-FlexRow__Item--content {
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: max-content;
-    flex-basis: max-content;
-}
-
-/*
- * Shorthand for the modifiers above
- */
-@mixin RV-FlexRow__Item--shorthands() {
-    @include RV-Alignment;
-
-    &--narrower {
-        @include RV-FlexRow__Item--narrower;
-    }
-
-    &--narrow {
-        @include RV-FlexRow__Item--narrow;
-    }
-
-    &--wide {
-        @include RV-FlexRow__Item--wide;
-    }
-
-    &--wider {
-        @include RV-FlexRow__Item--wider;
-    }
-
-    &--fixedSize {
-        @include RV-FlexRow__Item--fixedSize;
-    }
-
-    &--half {
-        @include RV-FlexRow__Item--half;
-    }
-
-    &--third {
-        @include RV-FlexRow__Item--third;
-    }
-
-    &--quarter {
-        @include RV-FlexRow__Item--quarter;
-    }
-
-    &--content {
-        @include RV-FlexRow__Item--content;
-    }
-}
-
-/*
- * Combining basic classes
- */
-@mixin RV-FlexRow($-prefix: '&') {
-    #{$-prefix}__Container {
-        @include RV-FlexRow__Container($-prefix: $-prefix);
-    }
-
-    #{$-prefix}__Item {
-        @include RV-FlexRow__Item;
-    }
-}
-
-/*
- * Combining shorthands
- */
-@mixin RV-FlexRow--shorthands($-break_width: 500px, $-prefix: '&') {
-    #{$-prefix}__Container {
-        @include RV-FlexRow__Container--shorthands($-break_width);
-    }
-
-    #{$-prefix}__Item {
-        @include RV-FlexRow__Item--shorthands;
-    }
-}
-
-/*
- * Final CSS Class
- */
-.RV-FlexRow {
-    @include RV-FlexRow;
-    @include RV-FlexRow--shorthands;
-}

components/01_Layouts/flexRow/_flexRow.styl

@@ -0,0 +1,182 @@
+/*
+ * Classes for easy flexrow usage
+ */
+
+
+/* ##########
+ * Container class
+  ########### */
+RV-FlexRow__Container(prefix='&')
+	display flex
+	height 100%
+
+/*
+ * Orientation
+ */
+RV-FlexRow__Container--horizontal()
+	flex-direction row
+
+RV-FlexRow__Container--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)
+	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 initial
+					}
+				}
+			)
+		}
+	)
+
+	*{
+		flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
+	}
+	
+	if mediaBreakPoint !=null
+		@media(max-width mediaBreakPoint)
+			RV-FlexRow__Container--column()
+
+/*
+ * Flexbox behavior, Row is horizontal, but item are wraped individualy
+ */
+RV-FlexRow__Container--auto()
+	RV-FlexRow__Container--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()
+	flex-basis max-content
+	RV-FlexRow__Item--normal()
+
+/*
+ * Varios relative width of items to each other
+ */
+RV-FlexRow__Item--normal()
+	flex-grow 3
+	flex-shrink 3
+
+RV-FlexRow__Item--narrower()
+	flex-grow 1
+	flex-shrink 5
+
+RV-FlexRow__Item--narrow()
+	flex-grow 2
+	flex-shrink 4
+
+RV-FlexRow__Item--wide()
+	flex-grow 4
+	flex-shrink 2
+
+RV-FlexRow__Item--wider()
+	flex-grow 5
+	flex-shrink 1
+
+/*
+ * Item has always the given width
+ */
+RV-FlexRow__Item--fixedSize(width=100px)
+	RV-Sizes--fixedSize(width)
+
+/*
+ * Item width relativ to the container
+ */
+RV-FlexRow__Item--half()
+	RV-Sizes--half()
+RV-FlexRow__Item--third()
+	RV-Sizes--third()
+
+RV-FlexRow__Item--quarter()
+	RV-Sizes--quarter()
+	
+RV-FlexRow__Item--content()
+	RV-Sizes--content()
+
+/*
+ * Shorthand for the modifiers above
+ */
+RV-FlexRow__Item--shorthands()
+	RV-Alignment()
+
+	&--narrower
+		RV-FlexRow__Item--narrower()
+
+	&--narrow
+		RV-FlexRow__Item--narrow()
+
+	&--wide()
+		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()
+
+/*
+ * Combining shorthands
+ */
+RV-FlexRow--shorthands(break_width=500px, prefix='&')
+	{prefix}__Container 
+		RV-FlexRow__Container--shorthands(break_width)
+
+	{prefix}__Item
+		RV-FlexRow__Item--shorthands()
+
+/*
+ * Final CSS Class
+ */
+.RV-FlexRow
+	RV-FlexRow()
+	RV-FlexRow--shorthands()

components/01_Layouts/flexRow/flexRow.hbs

@@ -29,7 +29,7 @@
 </div>
 
 <br><br>
-<div class="RV-FlexRow__Container RV-FlexRow__Container--auto">
+<div class="RV-FlexRow__Container RV-FlexRow__Container--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.scss

@@ -1,22 +0,0 @@
-@mixin RV-FullWidthContent__Container {
-    width: 100%;
-}
-
-@mixin RV-FullWidthContent__Item {
-    width: 100%;
-    @include RV-ContentCrop;
-}
-
-@mixin RV-FullWidthContent($-prefix: '&') {
-    #{$-prefix}__Container {
-        @include RV-FullWidthContent__Container;
-    }
-
-    #{$-prefix}__Item {
-        @include RV-FullWidthContent__Item;
-    }
-}
-
-.RV-FullWidthContent {
-    @include RV-FullWidthContent;
-}

components/01_Layouts/fullWidthContent/_fullWidthContent.styl

@@ -0,0 +1,16 @@
+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()

components/01_Layouts/sizes/_sizes.scss

@@ -1,39 +0,0 @@
-@mixin RV-Sizes($-prefix: '&') {
-
-    #{$-prefix}--half {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: 50%;
-        width: 50%;
-    }
-
-    #{$-prefix}--third {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: 33.33%;
-        width: 33.33%;
-    }
-
-    #{$-prefix}--quarter {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: 25%;
-        width: 25%;
-    }
-
-    #{$-prefix}--fixedSize {
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-
-    #{$-prefix}--content {
-        flex-grow: 0;
-        flex-shrink: 0;
-        width: max-content;
-        flex-basis: max-content;
-    }
-}
-
-.RV-Sizes {
-    @include RV-Sizes;
-}

components/01_Layouts/sizes/_sizes.styl

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

components/02_Styles/_styles.scss

@@ -1,3 +0,0 @@
-@import 'boxShadow/boxShadow';
-@import 'spacing/spacing';
-@import 'iconized/iconized';

components/02_Styles/_styles.styl

@@ -0,0 +1,6 @@
+@import 'spacing/_spacing'
+
+/*
+@import 'boxShadow/boxShadow';
+@import 'iconized/iconized';
+*/

components/02_Styles/spacing/_spacing.scss

@@ -1,99 +0,0 @@
-@use "sass:meta";
-
-@mixin RV-Spacing__Outer--small {
-    margin: $-spacing-small;
-}
-
-@mixin RV-Spacing__Outer--medium {
-    margin: $-spacing-medium;
-}
-
-@mixin RV-Spacing__Outer--large {
-    margin: $-spacing-large;
-}
-
-@mixin _flexrow_breakpoint_min_width($-gap) {
-
-    @include RV-Utils__Hook--catch {
-        $-breakpoint: get-hook-value('breakPoint');
-
-        @include RV-Utils__ElementAmount using($-index) {
-            min-width: calc((#{$-breakpoint} - (#{$-gap} * (#{$-index} - 1))) / #{$-index} - (2 * #{$-gap}));
-
-            * {
-                min-width: initial;
-            }
-        }
-    }
-}
-
-@mixin _flexgrid_masonry_column_gap($-gap) {
-
-    @include RV-Utils__Hook--catch {
-        * {
-            margin: $-gap/2 0;
-        }
-    }
-}
-
-
-@mixin RV-Spacing__Inner--small() {
-    padding: $-spacing-small;
-    gap: $-spacing-small;
-    column-gap: $-spacing-small;
-
-    @include _flexrow_breakpoint_min_width($-spacing-small);
-    @include _flexgrid_masonry_column_gap($-spacing-small);
-}
-
-@mixin RV-Spacing__Inner--medium() {
-    padding: $-spacing-medium;
-    gap: $-spacing-medium;
-    column-gap: $-spacing-medium;
-
-    @include _flexrow_breakpoint_min_width($-spacing-medium);
-    @include _flexgrid_masonry_column_gap($-spacing-medium);
-}
-
-@mixin RV-Spacing__Inner--large() {
-    padding: $-spacing-large;
-    gap: $-spacing-large;
-    column-gap: $-spacing-large;
-
-    @include _flexrow_breakpoint_min_width($-spacing-large);
-    @include _flexgrid_masonry_column_gap($-spacing-medium);
-}
-
-@mixin RV-Spacing {
-    &__Outer {
-        &--small {
-            @include RV-Spacing__Outer--small;
-        }
-
-        &--medium {
-            @include RV-Spacing__Outer--medium;
-        }
-
-        &--large {
-            @include RV-Spacing__Outer--large;
-        }
-    }
-
-    &__Inner {
-        &--small {
-            @include RV-Spacing__Inner--small;
-        }
-
-        &--medium {
-            @include RV-Spacing__Inner--medium;
-        }
-
-        &--large {
-            @include RV-Spacing__Inner--large;
-        }
-    }
-}
-
-.RV-Spacing {
-    @include RV-Spacing;
-}

components/02_Styles/spacing/_spacing.styl

@@ -0,0 +1,56 @@
+
+RV-Spacing__Outer--small()
+	margin spacing-small
+
+RV-Spacing__Outer--medium()
+	margin spacing-medium
+
+RV-Spacing__Outer--large()
+	margin spacing-large
+
+
+RV-Spacing__Inner--small()
+	padding spacing-small
+	gap spacing-small
+	column-gap spacing-small
+	
+	RV-Utils__Hook--catch('masonry_grid', spacing-small)
+
+RV-Spacing__Inner--medium()
+	padding spacing-medium
+	gap spacing-medium
+	column-gap spacing-medium
+	
+	RV-Utils__Hook--catch('masonry_grid', spacing-medium)
+
+RV-Spacing__Inner--large()
+	padding spacing-large
+	gap spacing-large
+	column-gap spacing-large
+
+	RV-Utils__Hook--catch('masonry_grid', spacing-large)
+
+RV-Spacing(prefix='&')
+	{prefix}__Outer
+		&--small
+			RV-Spacing__Outer--small()
+
+		&--medium
+			RV-Spacing__Outer--medium()
+
+		&--large
+			RV-Spacing__Outer--large()
+
+	{prefix}__Inner 
+		&--small
+			RV-Spacing__Inner--small()
+
+		&--medium
+			RV-Spacing__Inner--medium()
+
+		&--large
+			RV-Spacing__Inner--large()
+			
+.RV-Spacing
+	RV-Spacing()
+	test()

components/_components.scss

@@ -1,9 +0,0 @@
-@use "sass:map";
-
-@import '00_Global/global';
-@import '01_Layouts/layouts';
-@import '02_Styles/styles';
-@import '04_Molecules/molecules';
-@import '05_Components/components';
-
-@import '10_Examples/examples';

components/_components.styl

@@ -0,0 +1,9 @@
+@import '00_Global/_global'
+
+@import '02_Styles/_styles'
+
+@import '01_Layouts/_layouts'
+//@import '04_Molecules/_molecules'
+//@import '05_Components/_components'
+
+//@import '10_Examples/_examples'

components/_preview.hbs

@@ -3,19 +3,18 @@
     <head>
         <meta contentType="text/html; charset=UTF-8"/>
         <link rel="stylesheet" href="{{ path '/rcss.css' }}">
-		<link rel="stylesheet" href="{{ path '/playground.css' }}">
         <title>Preview</title>
 
 		<style>
 			.red{
 				background-color: firebrick;
-				margin: -2px;
+				padding: -2px;
 				border: 1px black solid;
 			}
 
 			.green {
 				background-color: forestgreen;
-				margin: -2px;
+				padding: -2px;
 				border: 1px black solid;
 			}
 

components/rcss.styl

@@ -0,0 +1,10 @@
+// Padding and Margin sizes
+
+spacing-small = 10px
+spacing-medium = 25px
+spacing-large = 35px
+
+@import './pink.css'
+@import './_components'
+
+_generate_hooks()

package.json

@@ -12,7 +12,7 @@
     "scripts": {
         "sass": "sass components/rcss.scss public/rcss.css --watch",
 		"styleguide": "fractal start --sync",
-		"stylus": "stylus -w components/* -o public/playground.css",
+		"stylus": "stylus -w components/rcss.styl -o public/rcss.css",
 		"suite": "npm run sass & npm run styleguide",
 		"suiteStylus": "npm run stylus & npm run styleguide",
         "bundle": "scss-bundel"

public/playground.css

@@ -1,73 +1,169 @@
-.bluebutton {
+@import './pink.css';
-  color: red;
+.RV-Alignment displaygrid,
-  padding: 5px;
+.RV-Alignment .RV-Alignment--top {
-  background-color: #ffa500;
+  display: grid;
-  border: 1px solid #000;
+  align-content: start;
-  display: inline;
 }
-.button {
+.RV-Alignment .RV-Alignment--bottom {
-  padding: 5px;
+  display: grid;
-  background-color: #ffa500;
+  align-content: end;
-  border: 1px solid #000;
-  display: inline;
 }
-.wred {
+.RV-Alignment .RV-Alignment--left {
-  color: red;
+  display: grid;
+  justify-content: start;
 }
-.field {
+.RV-Alignment .RV-Alignment--right {
-  display: inline;
+  display: grid;
-  padding: 10px;
+  justify-content: end;
-  border-bottom: 2px solid #00f;
 }
-.wurst .field {
+.RV-Alignment .RV-Alignment--horizontalCenter {
-  display: inline;
+  display: grid;
-  padding: 10px;
+  justify-content: center;
-  border-bottom: 2px solid #00f;
-  color: red;
 }
-.debug {
+.RV-Alignment .RV-Alignment--verticalCenter {
-  --one: {"button":"({\".bluebutton\":\"(anonymous(c))\",\".button\":\"(anonymous(c))\"})","field":"({\".field\":\"(anonymous())\",\".wurst .field\":\"(anonymous())\"})"};
+  display: grid;
-  --two: {".bluebutton":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wred":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wurst .field":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})"};
+  align-items: center;
 }
-.bluebutton.bluebutton {
+.RV-Alignment .RV-Alignment--center {
-  color: #008000;
+  display: grid;
+  justify-content: center;
+  display: grid;
+  align-items: center;
 }
-.button.bluebutton {
+.RV-ContentCrop {
-  color: #008000;
+  display: block;
+  overflow: hidden;
 }
-.field.bluebutton {
+.RV-ContentCrop img {
-  border-bottom: 2px solid red;
+  width: 100%;
-  color: #00f;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
-.wurst .field.bluebutton {
+.RV-ContentCrop p {
-  border-bottom: 2px solid red;
+  overflow: hidden;
-  color: #00f;
+  display: block;
+  text-overflow: ellipsis;
+  padding: 0;
+  margin: 0;
+  line-height: 1.21;
+  z-index: -20;
+  position: relative;
+  background-color: #fff;
+  height: 96.80000000000001%;
 }
-.bluebutton.wred {
+.RV-ContentCrop--fade--fade:after {
-  color: #008000;
+  background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
+  display: block;
+  content: ' ';
+  opacity: 0.8;
+  position: relative;
+  top: -25%;
+  width: 100%;
+  height: 25%;
+  z-index: -10;
 }
-.button.wred {
+.RV-ContentCrop--ellipsis--ellipsis:after {
-  color: #008000;
+  position: relative;
+  display: block;
+  bottom: 1.2em;
+  left: calc(100% - 3ch);
+  content: '...';
+  font-size: 1.2em;
+  min-width: 2em;
+  background-color: #fff;
+  padding: 0 2px;
 }
-.field.wred {
+.RV-ContentCrop--square {
-  border-bottom: 2px solid red;
+  width: 100%;
-  color: #00f;
+  padding-top: 100%;
+  position: relative;
 }
-.wurst .field.wred {
+.RV-ContentCrop--square img,
-  border-bottom: 2px solid red;
+.RV-ContentCrop--square div {
-  color: #00f;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
-.bluebutton.wurst .field {
+.RV-ContentCrop--1to2 {
-  color: #008000;
+  width: 100%;
+  padding-top: 200%;
+  position: relative;
 }
-.button.wurst .field {
+.RV-ContentCrop--1to2 img {
-  color: #008000;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
-.field.wurst .field {
+.RV-ContentCrop--2to1 {
-  border-bottom: 2px solid red;
+  width: 100%;
-  color: #00f;
+  padding-top: 50%;
+  position: relative;
 }
-.wurst .field.wurst .field {
+.RV-ContentCrop--2to1 img {
-  border-bottom: 2px solid red;
+  object-fit: cover;
-  color: #00f;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--4to3 {
+  width: 100%;
+  padding-top: 75%;
+  position: relative;
+}
+.RV-ContentCrop--4to3 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--16to9 {
+  width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+}
+.RV-ContentCrop--16to9 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--3to2 {
+  width: 100%;
+  padding-top: 66.66666666666666%;
+  position: relative;
+}
+.RV-ContentCrop--3to2 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--left img {
+  object-position: left;
+}
+.RV-ContentCrop--center img {
+  object-position: center;
+}
+.RV-ContentCrop--top img {
+  object-position: top;
+}
+.RV-ContentCrop--bottom img {
+  object-position: bottom;
+}
+.RV-ContentCrop--center img {
+  object-position: center;
 }