diff --git a/components/01_Layouts/alignment/_alignment.styl b/components/01_Layouts/alignment/_alignment.styl index 8528000..4fbdb58 100644 --- a/components/01_Layouts/alignment/_alignment.styl +++ b/components/01_Layouts/alignment/_alignment.styl @@ -1,55 +1,61 @@ RV-Alignment--top() - display grid - align-content start + +RV-Block__Modifier--name('top') + display grid + align-content start RV-Alignment--bottom() - display grid - align-content end + +RV-Block__Modifier--name('bottom') + display grid + align-content end RV-Alignment--left() - display grid - justify-content start + +RV-Block__Modifier--name('left') + display grid + justify-content start RV-Alignment--right() - display grid - justify-content: end + +RV-Block__Modifier--name('right') + display grid + justify-content: end RV-Alignment--horizontalCenter() - display grid - justify-content center + +RV-Block__Modifier--name('horizontalCenter') + display grid + justify-content center RV-Alignment--verticalCenter() - display grid - align-items center + +RV-Block__Modifier--name('verticalCenter') + display grid + align-items center RV-Alignment--center() - RV-Alignment--horizontalCenter() - RV-Alignment--verticalCenter() + +RV-Block__Modifier--name('center') + RV-Alignment--horizontalCenter() + RV-Alignment--verticalCenter() -RV-Alignment(prefix='&') - display grid +RV-Alignment() + 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 ++RV-Block('RV-Alignment') + RV-Alignment() + + +RV-Block__Modifier() + RV-Alignment--top() + + +RV-Block__Modifier() + RV-Alignment--bottom() + + +RV-Block__Modifier() + RV-Alignment--left() + + +RV-Block__Modifier() + RV-Alignment--right() + + +RV-Block__Modifier() + RV-Alignment--horizontalCenter() + + +RV-Block__Modifier() + RV-Alignment--verticalCenter() + + +RV-Block__Modifier() + RV-Alignment--center() \ No newline at end of file diff --git a/components/01_Layouts/contentCrop/_contentCrop.styl b/components/01_Layouts/contentCrop/_contentCrop.styl index 304e25f..5379544 100644 --- a/components/01_Layouts/contentCrop/_contentCrop.styl +++ b/components/01_Layouts/contentCrop/_contentCrop.styl @@ -1,164 +1,196 @@ RV-ContentCrop--bottom() - .RV-Image * - object-position bottom + +RV-Block__Modifier--name('bottom') + .RV-Image * + object-position bottom RV-ContentCrop--top() - .RV-Image * - object-position top + +RV-Block__Modifier--name('top') + .RV-Image * + object-position top RV-ContentCrop--right() - .RV-Image * - object-position right + +RV-Block__Modifier--name('right') + .RV-Image * + object-position right RV-ContentCrop--left() - .RV-Image * - object-position left - + +RV-Block__Modifier--name('left') + .RV-Image * + object-position left + RV-ContentCrop--center() - .RV-Image * - object-position center + +RV-Block__Modifier--name('center') + .RV-Image * + 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% +RV-ContentCrop--square() + +RV-Block__Modifier--name('square') width 100% - height 25% - z-index 10 - -RV-ContentCrop__Text--ellipsis(background-color=white) - &:after + padding-top 100% 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) - .RV-Text - overflow hidden - display block - text-overflow ellipsis - // Determining the max line count and caclulating the height - line-height line-height + .RV-Image *, + div + position absolute + top 0 + left 0 + bottom 0 + right 0 + +RV-ContentCrop--circle() + +RV-Block__Modifier--name('circle') + RV-ContentCrop__Square() + border-radius 50% + +RV-ContentCrop--XtoY(x=1, y=1) + RV-CSSParameter({ + x: x, + y: y + }) + + +RV-Block__Modifier--name('XtoY') + width 100% + padding-top 100% * (y / x) position relative - background-color background-color - max-height floor(100% / line-height / 16) * line-height * 16 - - padding 0 - margin 0 - - * - margin 0 - padding-bottom line-height * 16px - - *:last-child - padding-bottom unset - &--fade - RV-ContentCrop__Text--fade(background-color) + .RV-Image * + object-fit cover + position absolute + top 0 + left 0 + bottom 0 + right 0 - &--ellipsis - RV-ContentCrop__Text--ellipsis(background-color) - -RV-ContentCrop__Shapes--square() - width 100% - padding-top 100% - position relative +RV-ContentCrop--1to2() + +RV-Block__Modifier--name('1to2') + RV-ContentCrop__XtoY(1, 2) - .RV-Image *, - div - position absolute - top 0 - left 0 - bottom 0 - right 0 - -RV_ContentCrop__Shapes--circle() - RV-ContentCrop__Shapes--square() - border-radius 50% +RV-ContentCrop--2to1() + +RV-Block__Modifier--name('2to1') + RV-ContentCrop__XtoY(2, 1) -RV-ContentCrop__Shapes--xtoy(-x, -y) - width 100% - padding-top 100% * (-y / -x) - position relative +RV-ContentCrop--4to3() + +RV-Block__Modifier--name('4to3') + RV-ContentCrop__XtoY(4, 3) - .RV-Image * - object-fit cover - position absolute - top 0 - left 0 - bottom 0 - right 0 - -RV-ContentCrop__Shapes() +RV-ContentCrop--16to9() + +RV-Block__Modifier--name('16to9') + RV-ContentCrop__XtoY(16, 9) - &--square - RV-ContentCrop__Shapes--square() +RV-ContentCrop--3to2() + +RV-Block__Modifier--name('3to2') + RV-ContentCrop__XtoY(3, 2) - &--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() - .RV-Image *, .RV-Image - width 100% - height 100% - object-fit cover - display block - -RV-ContentCrop--shorthands() - &--left - RV-ContentCrop--left() + +RV-Element--name('Image') + .RV-Image *, .RV-Image + width 100% + height 100% + object-fit cover + display block - &--center - RV-ContentCrop--center() +RV-ContentCrop__Text--fade(background-color=white) + +RV-Element__Modifier--name('fade') + &: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 - &--top - RV-ContentCrop--top() +RV-ContentCrop__Text--ellipsis(background-color=white) + +RV-Element__Modifier--name('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 - &--bottom - RV-ContentCrop--bottom() +RV-ContentCrop__Text(line-height=1.1, background-color=white) + +RV-Element--name('Text') + --cc 'text' + & .RV-Text + overflow hidden + display block + text-overflow ellipsis + // Determining the max line count and caclulating the height + line-height line-height + position relative + background-color background-color + max-height floor(100% / line-height / 16) * line-height * 16 + + padding 0 + margin 0 + + * + margin 0 + padding-bottom line-height * 16px + + *:last-child + padding-bottom unset - &--center - RV-ContentCrop--center() - - RV-ContentCrop__Shapes() - - -RV-ContentCrop(line-height=1.1, prefix='&') - // Heuristic, just to be safe - line-height = line-height * 1.1 + +RV-ContentCrop(line-height=1.1) + line-height = calc(line-height * 1.1) background-color = white display block overflow hidden - RV-ContentCrop__Image() - RV-ContentCrop__Text(line-height) - ++RV-Block('RV-ContentCrop') + line-height = 1.1 + RV-ContentCrop(line-height) + + +RV-Element() + RV-ContentCrop__Image() + + +RV-Element() + RV-ContentCrop__Text(line-height) -.RV-ContentCrop - RV-ContentCrop() - RV-ContentCrop--shorthands() \ No newline at end of file + +RV-Element__Modifier() + RV-ContentCrop__Text--ellipsis() + + +RV-Element__Modifier() + RV-ContentCrop__Text--fade() + + +RV-Block__Modifier() + RV-ContentCrop--bottom() + + +RV-Block__Modifier() + RV-ContentCrop--top() + + +RV-Block__Modifier() + RV-ContentCrop--right() + + +RV-Block__Modifier() + RV-ContentCrop--left() + + +RV-Block__Modifier() + RV-ContentCrop--center() + + +RV-Block__Modifier() + RV-ContentCrop--square() + + +RV-Block__Modifier() + RV-ContentCrop--1to2() + + +RV-Block__Modifier() + RV-ContentCrop--2to1() + + +RV-Block__Modifier() + RV-ContentCrop--4to3() + + +RV-Block__Modifier() + RV-ContentCrop--16to9() + + +RV-Block__Modifier() + RV-ContentCrop--3to2() \ No newline at end of file diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index bb20559..3774a16 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -15,7 +15,7 @@ * but will fill the parent's width */ RV-Fan--horizontal(base-height, base-width) - +RV-Block__Modifier('horizontal') + +RV-Block__Modifier--name('horizontal') flex-direction row +RV-Element('Surface') @@ -28,7 +28,7 @@ RV-Fan--horizontal(base-height, base-width) * minimal height is given height, will grow with content */ RV-Fan--vertical(base-height, base-width) - +RV-Block__Modifier('vertical') + +RV-Block__Modifier--name('vertical') flex-direction column width max-content @@ -42,7 +42,7 @@ RV-Fan--vertical(base-height, base-width) * Width of the base and surface in vertical are base-width */ RV-Fan--auto(base-height, base-width) - +RV-Block__Modifier('auto') + +RV-Block__Modifier--name('auto') flex-flow row wrap +RV-Element('Surface') @@ -57,7 +57,7 @@ RV-Fan--auto(base-height, base-width) * are 100% of the parent width */ RV-Fan--fullWidth(base-height, base-width) - +RV-Block__Modifier('fullWidth') + +RV-Block__Modifier--name('fullWidth') RV-Fan--auto(base-height, base-width) +RV-Element('Base') @@ -71,22 +71,24 @@ RV-Fan--fullWidth(base-height, base-width) * Element Mixins * ############### */ RV-Fan__Base(base-height, base-width) - +RV-Element('Base') + +RV-Element--name('Base') height base-height width base-width flex 0 0 auto RV-Fan__Surface--fixedHeight(height) - +RV-Element__Modifier('fixedHeight') + +RV-Element__Modifier--name('fixedHeight') height height RV-Fan__Surface--fixedWidth(width) - +RV-Element__Modifier('fixedWidth') + +RV-Element__Modifier--name('fixedWidth') max-width width RV-Fan__Surface() - +RV-Element('Surface') + +RV-Element--name('Surface') RV-ContentCrop() + RV-ContentCrop__Text() + RV-ContentCrop__Image() /* ############ * Block Mixin @@ -97,7 +99,6 @@ RV-Fan() /* ######### * CSS-Class * ######### */ - +RV-Block('RV-Fan') RV-CSSParameter({ base-height: 280px, @@ -105,14 +106,24 @@ RV-Fan() }) RV-Fan() + +RV-Element() + RV-Fan__Surface() + + +RV-Element__Modifier() + RV-Fan__Surface--fixedWidth(base-width) + + +RV-Element__Modifier() + RV-Fan__Surface--fixedHeight(base-height) - RV-Fan__Surface() - RV-Fan__Surface--fixedWidth(base-width) - RV-Fan__Surface--fixedHeight(base-height) - - RV-Fan__Base(base-height, base-width) + +RV-Element() + RV-Fan__Base(base-height, base-width) - RV-Fan--fullWidth(base-height, base-width) - RV-Fan--vertical(base-height, base-width) - RV-Fan--horizontal(base-height, base-width) - RV-Fan--auto(base-height, base-width) \ No newline at end of file + +RV-Block__Modifier() + RV-Fan--fullWidth(base-height, base-width) + +RV-Block__Modifier() + RV-Fan--vertical(base-height, base-width) + +RV-Block__Modifier() + RV-Fan--horizontal(base-height, base-width) + +RV-Block__Modifier() + RV-Fan--auto(base-height, base-width) + \ No newline at end of file diff --git a/components/01_Layouts/flexGrid/_flexGrid.styl b/components/01_Layouts/flexGrid/_flexGrid.styl index c4dd920..600615d 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.styl +++ b/components/01_Layouts/flexGrid/_flexGrid.styl @@ -1,51 +1,54 @@ -RV-FlexGrid__Container() + +RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px) + +RV-Block__Modifier--name('autoWidth') + 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--fixedSize(item-height=300px, item-width=300px) + +RV-Block__Modifier--name('fixedSize') + grid-template-rows repeat(auto-fill, minmax(item-height, 1fr)) + grid-auto-rows minmax(item-height, 1fr) + grid-template-columns repeat(auto-fill, item-width) + justify-content space-between + +RV-FlexGrid--masonry(item-width=300px) + +RV-Block__Modifier--name('masonry') + display unquote(block) + column-count auto + column-width item-width + gap 0 + + +RV-Element('Item') + margin-bottom: var(--inner-spacing); + + *{ + margin-bottom: unset; + } + +RV-FlexGrid__Item() + +RV-Element--name('Item') + pass + + +RV-FlexGrid() 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; - - *{ - margin-bottom: unset; - } - } - } - ) - - -RV-FlexGrid--shorthands(prefix='&') - {prefix}__Container - &--autoWidth - RV-FlexGrid__Container--autoWidth() - - &--fixedSize - RV-FlexGrid__Container--fixedSize() - - &--masonry - RV-FlexGrid__Container--masonry() - -RV-FlexGrid(prefix='&') - {prefix}__Container - RV-FlexGrid__Container() - - {prefix}__Item - RV-Alignment() - -.RV-FlexGrid ++RV-Block('RV-FlexGrid') + RV-CSSParameter({ + item-height: 300px, + item-width: 300px + }) RV-FlexGrid() - RV-FlexGrid--shorthands() \ No newline at end of file + + +RV-Element() + RV-FlexGrid__Item() + + +RV-Block__Modifier() + RV-FlexGrid--autoWidth(item-height, item-width) + + +RV-Block__Modifier() + RV-FlexGrid--fixedSize(item-height, item-width) + + +RV-Block__Modifier() + RV-FlexGrid--masonry(item-width) \ No newline at end of file diff --git a/components/01_Layouts/flexGrid/flexGrid.hbs b/components/01_Layouts/flexGrid/flexGrid.hbs index e8798bb..84b376b 100644 --- a/components/01_Layouts/flexGrid/flexGrid.hbs +++ b/components/01_Layouts/flexGrid/flexGrid.hbs @@ -1,4 +1,4 @@ -
+
Heres
some
totally
@@ -15,7 +15,7 @@

-
+
Heres
some
totally
@@ -32,7 +32,7 @@

-
+
Heres
some
totally (right)
@@ -45,4 +45,4 @@
you
to
enjoy
-
+
\ No newline at end of file diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/01_Layouts/flexRow/_flexRow.styl index 61dc301..4f48b02 100644 --- a/components/01_Layouts/flexRow/_flexRow.styl +++ b/components/01_Layouts/flexRow/_flexRow.styl @@ -2,181 +2,165 @@ * 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--horizontal() + +RV-Block__Modifier--name('horizontal') + flex-direction row -RV-FlexRow__Container--vertical() - flex-direction column +RV-FlexRow--vertical() + +RV-Block__Modifier--name('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-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint) + +RV-Block__Modifier--name('breakPoint') + flex-wrap wrap + RV-Reset() + gap 0px + + RV-Utils__ElementAmount(@(index, total){ + min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index) + } + ) - 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 + +RV-Element('Item') + min-width initial + flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint + overflow hidden + @media(max-width mediaBreakPoint) - RV-FlexRow__Container--column() + flex-direction row /* - * Flexbox behavior, Row is horizontal, but item are wraped individualy + * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy */ -RV-FlexRow__Container--auto() - RV-FlexRow__Container--horizontal() - flex-wrap wrap +RV-FlexRow--auto() + +RV-Block__Modifier--name('auto') + RV-FlexRow--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() + +RV-Element--name('Item') + flex-basis max-content + flex-grow 3 + flex-shrink 3 /* * 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-Element__Modifier--name('narrower') + flex-grow 1 + flex-shrink 5 RV-FlexRow__Item--narrow() - flex-grow 2 - flex-shrink 4 + +RV-Element__Modifier--name('narrow') + flex-grow 2 + flex-shrink 4 RV-FlexRow__Item--wide() - flex-grow 4 - flex-shrink 2 + +RV-Element__Modifier--name('wide') + flex-grow 4 + flex-shrink 2 RV-FlexRow__Item--wider() - flex-grow 5 - flex-shrink 1 + +RV-Element__Modifier--name('wider') + flex-grow 5 + flex-shrink 1 /* * Item has always the given width */ -RV-FlexRow__Item--fixedSize(width=100px) - RV-Sizes--fixedSize(width) +RV-FlexRow__Item--fixedSize(width) + +RV-Element__Modifier--name('fixedSize') + RV-Sizes--fixedSize(width) /* * Item width relativ to the container */ RV-FlexRow__Item--half() - RV-Sizes--half() + +RV-Element__Modifier--name('half') + RV-Sizes--half() + RV-FlexRow__Item--third() - RV-Sizes--third() + +RV-Element__Modifier--name('third') + RV-Sizes--third() RV-FlexRow__Item--quarter() - RV-Sizes--quarter() + +RV-Element__Modifier--name('quarter') + RV-Sizes--quarter() RV-FlexRow__Item--content() - RV-Sizes--content() + +RV-Element__Modifier--name('content') + RV-Sizes--content() -/* - * Shorthand for the modifiers above - */ -RV-FlexRow__Item--shorthands() - RV-Alignment() +/* ########## + * Block + ########### */ +RV-FlexRow() + display flex + height 100% - &--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-Block('RV-FlexRow') RV-FlexRow() - RV-FlexRow--shorthands() \ No newline at end of file + + RV-CSSParameter({ + width: 100px + localBreakPoint: 500px, + mediaBreakPoint: 100vw + }) + + +RV-Element() + RV-FlexRow__Item() + + +RV-Element__Modifier() + RV-FlexRow__Item--narrower() + + +RV-Element__Modifier() + RV-FlexRow__Item--narrow() + + +RV-Element__Modifier() + RV-FlexRow__Item--wide() + + +RV-Element__Modifier() + RV-FlexRow__Item--wider() + + +RV-Element__Modifier() + RV-FlexRow__Item--fixedSize(width) + + +RV-Element__Modifier() + RV-FlexRow__Item--narrower() + + +RV-Element__Modifier() + RV-FlexRow__Item--half() + + +RV-Element__Modifier() + RV-FlexRow__Item--third() + + +RV-Element__Modifier() + RV-FlexRow__Item--quarter() + + +RV-Element__Modifier() + RV-FlexRow__Item--content() + + +RV-Block__Modifier() + RV-FlexRow--horizontal() + + +RV-Block__Modifier() + RV-FlexRow--vertical() + + +RV-Block__Modifier() + RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint) + + +RV-Block__Modifier() + RV-FlexRow--auto() \ No newline at end of file diff --git a/components/01_Layouts/flexRow/flexRow.hbs b/components/01_Layouts/flexRow/flexRow.hbs index a5b2409..36d6564 100644 --- a/components/01_Layouts/flexRow/flexRow.hbs +++ b/components/01_Layouts/flexRow/flexRow.hbs @@ -1,4 +1,4 @@ -
+
Im normal
Right
Center
@@ -6,12 +6,12 @@
Fixed


-
+
Im normal
Right


-
+
narrower
narrow
normal
@@ -20,7 +20,7 @@


-
+
.
.
.
@@ -29,7 +29,7 @@


-
+
sdfkjsakfjsdök
adfasfsd
asfsdfasd
diff --git a/components/01_Layouts/fullWidthContent/_fullWidthContent.styl b/components/01_Layouts/fullWidthContent/_fullWidthContent.styl index 419d619..e15e927 100644 --- a/components/01_Layouts/fullWidthContent/_fullWidthContent.styl +++ b/components/01_Layouts/fullWidthContent/_fullWidthContent.styl @@ -1,16 +1,15 @@ -RV-FullWidthContent__Container() - width 100% +RV-FullWidthContent() + width 100% RV-FullWidthContent__Item() - width 100% - RV-ContentCrop() + +RV-Element--name('Item') + width 100% + RV-ContentCrop__Text() + RV-ContentCrop__Image() -RV-FullWidthContent(prefix='&') - {prefix}__Container - RV-FullWidthContent__Container() - {prefix}__Item - RV-FullWidthContent__Item() - -.RV-FullWidthContent - RV-FullWidthContent() \ No newline at end of file ++RV-Block('RV-FullWidthContent') + RV-FullWidthContent() + + +RV-Element() + RV-FullWidthContent__Item() \ No newline at end of file diff --git a/components/01_Layouts/sizes/_sizes.styl b/components/01_Layouts/sizes/_sizes.styl index d4a602b..1643e0c 100644 --- a/components/01_Layouts/sizes/_sizes.styl +++ b/components/01_Layouts/sizes/_sizes.styl @@ -1,49 +1,51 @@ RV-Sizes--half() - flex-grow 0 - flex-shrink 0 - flex-basis 50% - width 50% + +RV-Block__Modifier--name('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-Block__Modifier--name('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-Block__Modifier--name('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-Block__Modifier--name('fixedSize') + 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-Block__Modifier--name('content') + flex-grow 0 + flex-shrink 0 + width max-content + flex-basis max-content -RV-Sizes(prefix='&') ++RV-Block('RV-Sizes') - {prefix}--half + +RV-Block__Modifier() RV-Sizes--half() - {prefix}--third + +RV-Block__Modifier() RV-Sizes--third() - {prefix}--quarter + +RV-Block__Modifier() RV-Sizes--quarter() - {prefix}--fixedSize - RV-Sizes--fixedSize + +RV-Block__Modifier() + RV-Sizes--fixedSize() - {prefix}--content - RV-Sizes--content - -.RV-Sizes - RV-Sizes() \ No newline at end of file + +RV-Block__Modifier() + RV-Sizes--content() \ No newline at end of file