From 333aa9d1b5e9dd8eed7189bc1f08b42d1ae26ef3 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 3 Jan 2021 12:36:12 +0100 Subject: [PATCH] Converting Layouts to Stylus --- components/00_Global/_alignment.scss | 9 - components/00_Global/_alignment.styl | 8 + components/00_Global/_elementAmount.scss | 9 - components/00_Global/_elementAmount.styl | 6 + components/00_Global/_global.scss | 4 - components/00_Global/_global.styl | 4 + components/00_Global/_selectorHook.scss | 90 -- components/00_Global/_selectorHook.styl | 32 + components/01_Layouts/_layouts.scss | 8 - components/01_Layouts/_layouts.styl | 7 + .../01_Layouts/alignment/_alignment.scss | 70 -- .../01_Layouts/alignment/_alignment.styl | 55 + .../01_Layouts/contentCrop/_contentCrop.scss | 200 ---- .../01_Layouts/contentCrop/_contentCrop.styl | 154 +++ components/01_Layouts/fan/_fan.scss | 69 -- components/01_Layouts/fan/_fan.styl | 53 + components/01_Layouts/flexGrid/_flexGrid.scss | 49 - components/01_Layouts/flexGrid/_flexGrid.styl | 44 + components/01_Layouts/flexRow/_flexRow.scss | 232 ---- components/01_Layouts/flexRow/_flexRow.styl | 182 +++ components/01_Layouts/flexRow/flexRow.hbs | 2 +- .../fullWidthContent/_fullWidthContent.scss | 22 - .../fullWidthContent/_fullWidthContent.styl | 16 + components/01_Layouts/sizes/_sizes.scss | 39 - components/01_Layouts/sizes/_sizes.styl | 49 + components/02_Styles/_styles.scss | 3 - components/02_Styles/_styles.styl | 6 + components/02_Styles/spacing/_spacing.scss | 99 -- components/02_Styles/spacing/_spacing.styl | 56 + components/_components.scss | 9 - components/_components.styl | 9 + components/_preview.hbs | 5 +- components/rcss.styl | 10 + package.json | 2 +- public/playground.css | 206 +++- public/rcss.css | 1043 ++++------------- 36 files changed, 1088 insertions(+), 1773 deletions(-) delete mode 100644 components/00_Global/_alignment.scss create mode 100644 components/00_Global/_alignment.styl delete mode 100644 components/00_Global/_elementAmount.scss create mode 100644 components/00_Global/_elementAmount.styl delete mode 100644 components/00_Global/_global.scss create mode 100644 components/00_Global/_global.styl delete mode 100644 components/00_Global/_selectorHook.scss create mode 100644 components/00_Global/_selectorHook.styl delete mode 100644 components/01_Layouts/_layouts.scss create mode 100644 components/01_Layouts/_layouts.styl delete mode 100644 components/01_Layouts/alignment/_alignment.scss create mode 100644 components/01_Layouts/alignment/_alignment.styl delete mode 100644 components/01_Layouts/contentCrop/_contentCrop.scss create mode 100644 components/01_Layouts/contentCrop/_contentCrop.styl delete mode 100644 components/01_Layouts/fan/_fan.scss create mode 100644 components/01_Layouts/fan/_fan.styl delete mode 100644 components/01_Layouts/flexGrid/_flexGrid.scss create mode 100644 components/01_Layouts/flexGrid/_flexGrid.styl delete mode 100644 components/01_Layouts/flexRow/_flexRow.scss create mode 100644 components/01_Layouts/flexRow/_flexRow.styl delete mode 100644 components/01_Layouts/fullWidthContent/_fullWidthContent.scss create mode 100644 components/01_Layouts/fullWidthContent/_fullWidthContent.styl delete mode 100644 components/01_Layouts/sizes/_sizes.scss create mode 100644 components/01_Layouts/sizes/_sizes.styl delete mode 100644 components/02_Styles/_styles.scss create mode 100644 components/02_Styles/_styles.styl delete mode 100644 components/02_Styles/spacing/_spacing.scss create mode 100644 components/02_Styles/spacing/_spacing.styl delete mode 100644 components/_components.scss create mode 100644 components/_components.styl create mode 100644 components/rcss.styl 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 @@

-
+
sdfkjsakfjsdök
adfasfsd
asfsdfasd
diff --git a/components/01_Layouts/fullWidthContent/_fullWidthContent.scss b/components/01_Layouts/fullWidthContent/_fullWidthContent.scss deleted file mode 100644 index 7f346d5..0000000 --- a/components/01_Layouts/fullWidthContent/_fullWidthContent.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/components/01_Layouts/fullWidthContent/_fullWidthContent.styl b/components/01_Layouts/fullWidthContent/_fullWidthContent.styl new file mode 100644 index 0000000..419d619 --- /dev/null +++ b/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() \ No newline at end of file diff --git a/components/01_Layouts/sizes/_sizes.scss b/components/01_Layouts/sizes/_sizes.scss deleted file mode 100644 index 15fc474..0000000 --- a/components/01_Layouts/sizes/_sizes.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/components/01_Layouts/sizes/_sizes.styl b/components/01_Layouts/sizes/_sizes.styl new file mode 100644 index 0000000..d4a602b --- /dev/null +++ b/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() \ No newline at end of file diff --git a/components/02_Styles/_styles.scss b/components/02_Styles/_styles.scss deleted file mode 100644 index c785a5e..0000000 --- a/components/02_Styles/_styles.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'boxShadow/boxShadow'; -@import 'spacing/spacing'; -@import 'iconized/iconized'; \ No newline at end of file diff --git a/components/02_Styles/_styles.styl b/components/02_Styles/_styles.styl new file mode 100644 index 0000000..842c0ed --- /dev/null +++ b/components/02_Styles/_styles.styl @@ -0,0 +1,6 @@ +@import 'spacing/_spacing' + +/* +@import 'boxShadow/boxShadow'; +@import 'iconized/iconized'; +*/ \ No newline at end of file diff --git a/components/02_Styles/spacing/_spacing.scss b/components/02_Styles/spacing/_spacing.scss deleted file mode 100644 index 96eb270..0000000 --- a/components/02_Styles/spacing/_spacing.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/components/02_Styles/spacing/_spacing.styl b/components/02_Styles/spacing/_spacing.styl new file mode 100644 index 0000000..f151790 --- /dev/null +++ b/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() \ No newline at end of file diff --git a/components/_components.scss b/components/_components.scss deleted file mode 100644 index a991e35..0000000 --- a/components/_components.scss +++ /dev/null @@ -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'; \ No newline at end of file diff --git a/components/_components.styl b/components/_components.styl new file mode 100644 index 0000000..55666df --- /dev/null +++ b/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' \ No newline at end of file diff --git a/components/_preview.hbs b/components/_preview.hbs index 8070e2e..2338b66 100644 --- a/components/_preview.hbs +++ b/components/_preview.hbs @@ -3,19 +3,18 @@ - Preview