Converting Layouts to Stylus

This commit is contained in:
reverend 2021-01-03 12:36:12 +01:00
parent 3f3874427c
commit 333aa9d1b5
36 changed files with 1088 additions and 1773 deletions

View File

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

View File

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

View File

@ -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);
}
}
}

View File

@ -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)

View File

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

View File

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

View File

@ -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);
}

View File

@ -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)

View File

@ -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';

View File

@ -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'

View File

@ -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;
}

View File

@ -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()

View File

@ -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;
}

View File

@ -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()

View File

@ -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);
}

View File

@ -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)

View File

@ -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;
}

View File

@ -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()

View File

@ -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;
}

View File

@ -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()

View File

@ -29,7 +29,7 @@
</div> </div>
<br><br> <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="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="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>

View File

@ -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;
}

View File

@ -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()

View File

@ -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;
}

View File

@ -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()

View File

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

View File

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

View File

@ -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;
}

View File

@ -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()

View File

@ -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';

View File

@ -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'

View File

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

10
components/rcss.styl Normal file
View File

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

View File

@ -12,7 +12,7 @@
"scripts": { "scripts": {
"sass": "sass components/rcss.scss public/rcss.css --watch", "sass": "sass components/rcss.scss public/rcss.css --watch",
"styleguide": "fractal start --sync", "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", "suite": "npm run sass & npm run styleguide",
"suiteStylus": "npm run stylus & npm run styleguide", "suiteStylus": "npm run stylus & npm run styleguide",
"bundle": "scss-bundel" "bundle": "scss-bundel"

View File

@ -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;
} }

File diff suppressed because it is too large Load Diff