diff --git a/components/00_Global/_alignment.scss b/components/00_Global/_alignment.scss
deleted file mode 100644
index 35c4582..0000000
--- a/components/00_Global/_alignment.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@mixin RV-Reset {
- margin: 0;
- padding: 0;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- border: none;
-}
\ No newline at end of file
diff --git a/components/00_Global/_alignment.styl b/components/00_Global/_alignment.styl
new file mode 100644
index 0000000..0b44b26
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/components/00_Global/_elementAmount.scss b/components/00_Global/_elementAmount.scss
deleted file mode 100644
index 962d614..0000000
--- a/components/00_Global/_elementAmount.scss
+++ /dev/null
@@ -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);
- }
- }
-}
\ No newline at end of file
diff --git a/components/00_Global/_elementAmount.styl b/components/00_Global/_elementAmount.styl
new file mode 100644
index 0000000..ca45280
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/components/00_Global/_global.scss b/components/00_Global/_global.scss
deleted file mode 100644
index 1a46fc7..0000000
--- a/components/00_Global/_global.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import './selectorHook';
-@import './elementAmount';
-
-@import './alignment';
\ No newline at end of file
diff --git a/components/00_Global/_global.styl b/components/00_Global/_global.styl
new file mode 100644
index 0000000..d22fabe
--- /dev/null
+++ b/components/00_Global/_global.styl
@@ -0,0 +1,4 @@
+@import './_selectorHook'
+
+@import './_elementAmount'
+@import './_alignment'
diff --git a/components/00_Global/_selectorHook.scss b/components/00_Global/_selectorHook.scss
deleted file mode 100644
index 0db3384..0000000
--- a/components/00_Global/_selectorHook.scss
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/components/00_Global/_selectorHook.styl b/components/00_Global/_selectorHook.styl
new file mode 100644
index 0000000..4c4e1ac
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/components/01_Layouts/_layouts.scss b/components/01_Layouts/_layouts.scss
deleted file mode 100644
index 96c0160..0000000
--- a/components/01_Layouts/_layouts.scss
+++ /dev/null
@@ -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';
\ No newline at end of file
diff --git a/components/01_Layouts/_layouts.styl b/components/01_Layouts/_layouts.styl
new file mode 100644
index 0000000..7773d31
--- /dev/null
+++ b/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'
\ No newline at end of file
diff --git a/components/01_Layouts/alignment/_alignment.scss b/components/01_Layouts/alignment/_alignment.scss
deleted file mode 100644
index c7ac18a..0000000
--- a/components/01_Layouts/alignment/_alignment.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/components/01_Layouts/alignment/_alignment.styl b/components/01_Layouts/alignment/_alignment.styl
new file mode 100644
index 0000000..8528000
--- /dev/null
+++ b/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()
\ No newline at end of file
diff --git a/components/01_Layouts/contentCrop/_contentCrop.scss b/components/01_Layouts/contentCrop/_contentCrop.scss
deleted file mode 100644
index 4cb7536..0000000
--- a/components/01_Layouts/contentCrop/_contentCrop.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/components/01_Layouts/contentCrop/_contentCrop.styl b/components/01_Layouts/contentCrop/_contentCrop.styl
new file mode 100644
index 0000000..74dd833
--- /dev/null
+++ b/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()
\ No newline at end of file
diff --git a/components/01_Layouts/fan/_fan.scss b/components/01_Layouts/fan/_fan.scss
deleted file mode 100644
index eeafdcb..0000000
--- a/components/01_Layouts/fan/_fan.scss
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl
new file mode 100644
index 0000000..f873a25
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/components/01_Layouts/flexGrid/_flexGrid.scss b/components/01_Layouts/flexGrid/_flexGrid.scss
deleted file mode 100644
index 21da689..0000000
--- a/components/01_Layouts/flexGrid/_flexGrid.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/components/01_Layouts/flexGrid/_flexGrid.styl b/components/01_Layouts/flexGrid/_flexGrid.styl
new file mode 100644
index 0000000..65588c8
--- /dev/null
+++ b/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()
\ No newline at end of file
diff --git a/components/01_Layouts/flexRow/_flexRow.scss b/components/01_Layouts/flexRow/_flexRow.scss
deleted file mode 100644
index 8d9ae18..0000000
--- a/components/01_Layouts/flexRow/_flexRow.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/01_Layouts/flexRow/_flexRow.styl
new file mode 100644
index 0000000..61dc301
--- /dev/null
+++ b/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()
\ No newline at end of file
diff --git a/components/01_Layouts/flexRow/flexRow.hbs b/components/01_Layouts/flexRow/flexRow.hbs
index 2afe90e..a5b2409 100644
--- a/components/01_Layouts/flexRow/flexRow.hbs
+++ b/components/01_Layouts/flexRow/flexRow.hbs
@@ -29,7 +29,7 @@
-