reverend
/
scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Converting Layouts to new BEM-Generator

This commit is contained in:
reverend 2021-01-17 19:31:19 +01:00
parent eca0624fd3
commit c990a740b0
9 changed files with 457 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/01_Layouts/alignment/_alignment.styl
View File

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

298
components/01_Layouts/contentCrop/_contentCrop.styl
View File

@ -1,164 +1,196 @@
RV-ContentCrop--bottom() RV-ContentCrop--bottom()
.RV-Image * +RV-Block__Modifier--name('bottom')
object-position bottom .RV-Image *
object-position bottom
RV-ContentCrop--top() RV-ContentCrop--top()
.RV-Image * +RV-Block__Modifier--name('top')
object-position top .RV-Image *
object-position top
RV-ContentCrop--right() RV-ContentCrop--right()
.RV-Image * +RV-Block__Modifier--name('right')
object-position right .RV-Image *
object-position right
RV-ContentCrop--left() RV-ContentCrop--left()
.RV-Image * +RV-Block__Modifier--name('left')
object-position left .RV-Image *
object-position left
RV-ContentCrop--center() RV-ContentCrop--center()
.RV-Image * +RV-Block__Modifier--name('center')
object-position center .RV-Image *
object-position center
RV-ContentCrop__Text--fade(background-color=white) RV-ContentCrop--square()
&:after +RV-Block__Modifier--name('square')
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content ' '
opacity 0.8
position relative
top -25%
width 100% width 100%
height 25% padding-top 100%
z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white)
&:after
position relative 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-Image *,
.RV-Text div
overflow hidden position absolute
display block top 0
text-overflow ellipsis left 0
// Determining the max line count and caclulating the height bottom 0
line-height line-height 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 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-Image *
RV-ContentCrop__Text--fade(background-color) object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
&--ellipsis RV-ContentCrop--1to2()
RV-ContentCrop__Text--ellipsis(background-color) +RV-Block__Modifier--name('1to2')
RV-ContentCrop__XtoY(1, 2)
RV-ContentCrop__Shapes--square()
width 100%
padding-top 100%
position relative
.RV-Image *, RV-ContentCrop--2to1()
div +RV-Block__Modifier--name('2to1')
position absolute RV-ContentCrop__XtoY(2, 1)
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) RV-ContentCrop--4to3()
width 100% +RV-Block__Modifier--name('4to3')
padding-top 100% * (-y / -x) RV-ContentCrop__XtoY(4, 3)
position relative
.RV-Image * RV-ContentCrop--16to9()
object-fit cover +RV-Block__Modifier--name('16to9')
position absolute RV-ContentCrop__XtoY(16, 9)
top 0
left 0
bottom 0
right 0
RV-ContentCrop__Shapes()
&--square RV-ContentCrop--3to2()
RV-ContentCrop__Shapes--square() +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-ContentCrop__Image()
.RV-Image *, .RV-Image +RV-Element--name('Image')
width 100% .RV-Image *, .RV-Image
height 100% width 100%
object-fit cover height 100%
display block object-fit cover
display block
RV-ContentCrop--shorthands()
&--left
RV-ContentCrop--left()
&--center RV-ContentCrop__Text--fade(background-color=white)
RV-ContentCrop--center() +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__Text--ellipsis(background-color=white)
RV-ContentCrop--top() +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__Text(line-height=1.1, background-color=white)
RV-ContentCrop--bottom() +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(line-height=1.1)
line-height = calc(line-height * 1.1)
RV-ContentCrop__Shapes()
RV-ContentCrop(line-height=1.1, prefix='&')
// Heuristic, just to be safe
line-height = line-height * 1.1
background-color = white background-color = white
display block display block
overflow hidden overflow hidden
RV-ContentCrop__Image() +RV-Block('RV-ContentCrop')
RV-ContentCrop__Text(line-height) line-height = 1.1
RV-ContentCrop(line-height)
+RV-Element()
RV-ContentCrop__Image()
+RV-Element()
RV-ContentCrop__Text(line-height)
.RV-ContentCrop +RV-Element__Modifier()
RV-ContentCrop() RV-ContentCrop__Text--ellipsis()
RV-ContentCrop--shorthands()
+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()

47
components/01_Layouts/fan/_fan.styl
View File

@ -15,7 +15,7 @@
* but will fill the parent's width * but will fill the parent's width
*/ */
RV-Fan--horizontal(base-height, base-width) RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier('horizontal') +RV-Block__Modifier--name('horizontal')
flex-direction row flex-direction row
+RV-Element('Surface') +RV-Element('Surface')
@ -28,7 +28,7 @@ RV-Fan--horizontal(base-height, base-width)
* minimal height is given height, will grow with content * minimal height is given height, will grow with content
*/ */
RV-Fan--vertical(base-height, base-width) RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier('vertical') +RV-Block__Modifier--name('vertical')
flex-direction column flex-direction column
width max-content 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 * Width of the base and surface in vertical are base-width
*/ */
RV-Fan--auto(base-height, base-width) RV-Fan--auto(base-height, base-width)
+RV-Block__Modifier('auto') +RV-Block__Modifier--name('auto')
flex-flow row wrap flex-flow row wrap
+RV-Element('Surface') +RV-Element('Surface')
@ -57,7 +57,7 @@ RV-Fan--auto(base-height, base-width)
* are 100% of the parent width * are 100% of the parent width
*/ */
RV-Fan--fullWidth(base-height, base-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-Fan--auto(base-height, base-width)
+RV-Element('Base') +RV-Element('Base')
@ -71,22 +71,24 @@ RV-Fan--fullWidth(base-height, base-width)
* Element Mixins * Element Mixins
* ############### */ * ############### */
RV-Fan__Base(base-height, base-width) RV-Fan__Base(base-height, base-width)
+RV-Element('Base') +RV-Element--name('Base')
height base-height height base-height
width base-width width base-width
flex 0 0 auto flex 0 0 auto
RV-Fan__Surface--fixedHeight(height) RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier('fixedHeight') +RV-Element__Modifier--name('fixedHeight')
height height height height
RV-Fan__Surface--fixedWidth(width) RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier('fixedWidth') +RV-Element__Modifier--name('fixedWidth')
max-width width max-width width
RV-Fan__Surface() RV-Fan__Surface()
+RV-Element('Surface') +RV-Element--name('Surface')
RV-ContentCrop() RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Image()
/* ############ /* ############
* Block Mixin * Block Mixin
@ -97,7 +99,6 @@ RV-Fan()
/* ######### /* #########
* CSS-Class * CSS-Class
* ######### */ * ######### */
+RV-Block('RV-Fan') +RV-Block('RV-Fan')
RV-CSSParameter({ RV-CSSParameter({
base-height: 280px, base-height: 280px,
@ -105,14 +106,24 @@ RV-Fan()
}) })
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-Element()
RV-Fan__Surface--fixedWidth(base-width) RV-Fan__Base(base-height, base-width)
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Base(base-height, base-width)
RV-Fan--fullWidth(base-height, base-width) +RV-Block__Modifier()
RV-Fan--vertical(base-height, base-width) RV-Fan--fullWidth(base-height, base-width)
RV-Fan--horizontal(base-height, base-width) +RV-Block__Modifier()
RV-Fan--auto(base-height, base-width) 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)

99
components/01_Layouts/flexGrid/_flexGrid.styl
View File

@ -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 display grid
RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px) +RV-Block('RV-FlexGrid')
grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr)) RV-CSSParameter({
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr)) item-height: 300px,
grid-auto-rows minmax(item-height, 1fr) item-width: 300px
})
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-FlexGrid() RV-FlexGrid()
RV-FlexGrid--shorthands()
+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)

8
components/01_Layouts/flexGrid/flexGrid.hbs
View File

@ -1,4 +1,4 @@
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--autoWidth"> <div class="RV-FlexGrid RV-FlexGrid--autoWidth">
<div class="red RV-FlexGrid__Item">Heres</div> <div class="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div> <div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item">totally</div> <div class="red RV-FlexGrid__Item">totally</div>
@ -15,7 +15,7 @@
<br><br> <br><br>
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--fixedSize"> <div class="RV-FlexGrid RV-FlexGrid--fixedSize">
<div class="red RV-FlexGrid__Item">Heres</div> <div class="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div> <div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item">totally</div> <div class="red RV-FlexGrid__Item">totally</div>
@ -32,7 +32,7 @@
<br><br> <br><br>
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--masonry RV-Spacing__Inner--small"> <div class="RV-FlexGrid RV-FlexGrid--masonry">
<div class="red RV-FlexGrid__Item">Heres</div> <div class="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div> <div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div> <div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div>
@ -45,4 +45,4 @@
<div class="green RV-FlexGrid__Item">you</div> <div class="green RV-FlexGrid__Item">you</div>
<div class="red RV-FlexGrid__Item">to</div> <div class="red RV-FlexGrid__Item">to</div>
<div class="green RV-FlexGrid__Item">enjoy</div> <div class="green RV-FlexGrid__Item">enjoy</div>
</div> </div>

242
components/01_Layouts/flexRow/_flexRow.styl
View File

@ -2,181 +2,165 @@
* Classes for easy flexrow usage * Classes for easy flexrow usage
*/ */
/* ##########
* Container class
########### */
RV-FlexRow__Container(prefix='&')
display flex
height 100%
/* /*
* Orientation * Orientation
*/ */
RV-FlexRow__Container--horizontal() RV-FlexRow--horizontal()
flex-direction row +RV-Block__Modifier--name('horizontal')
flex-direction row
RV-FlexRow__Container--vertical() RV-FlexRow--vertical()
flex-direction column +RV-Block__Modifier--name('vertical')
flex-direction column
/* /*
* Breaks from row to column orientation at the given breakpoint * 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. * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
*/ */
RV-FlexRow__Container--breakPoint(localBreakPoint=500px, mediaBreakPoint=null) RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
flex-wrap wrap +RV-Block__Modifier--name('breakPoint')
RV-Reset() flex-wrap wrap
gap 0px 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-Element('Item')
RV-Utils__ElementAmount(@(index, total){ min-width initial
min-width "calc((%s - (%s * (%s - 1))) / %s - (2 * %s))" % (localBreakPoint gap index index gap) flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
overflow hidden
*{
min-width initial
}
}
)
}
)
*{
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
}
if mediaBreakPoint !=null
@media(max-width mediaBreakPoint) @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--auto()
RV-FlexRow__Container--horizontal() +RV-Block__Modifier--name('auto')
flex-wrap wrap 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 * Item class
########### */ ########### */
RV-FlexRow__Item() RV-FlexRow__Item()
flex-basis max-content +RV-Element--name('Item')
RV-FlexRow__Item--normal() flex-basis max-content
flex-grow 3
flex-shrink 3
/* /*
* Varios relative width of items to each other * Varios relative width of items to each other
*/ */
RV-FlexRow__Item--normal()
flex-grow 3
flex-shrink 3
RV-FlexRow__Item--narrower() RV-FlexRow__Item--narrower()
flex-grow 1 +RV-Element__Modifier--name('narrower')
flex-shrink 5 flex-grow 1
flex-shrink 5
RV-FlexRow__Item--narrow() RV-FlexRow__Item--narrow()
flex-grow 2 +RV-Element__Modifier--name('narrow')
flex-shrink 4 flex-grow 2
flex-shrink 4
RV-FlexRow__Item--wide() RV-FlexRow__Item--wide()
flex-grow 4 +RV-Element__Modifier--name('wide')
flex-shrink 2 flex-grow 4
flex-shrink 2
RV-FlexRow__Item--wider() RV-FlexRow__Item--wider()
flex-grow 5 +RV-Element__Modifier--name('wider')
flex-shrink 1 flex-grow 5
flex-shrink 1
/* /*
* Item has always the given width * Item has always the given width
*/ */
RV-FlexRow__Item--fixedSize(width=100px) RV-FlexRow__Item--fixedSize(width)
RV-Sizes--fixedSize(width) +RV-Element__Modifier--name('fixedSize')
RV-Sizes--fixedSize(width)
/* /*
* Item width relativ to the container * Item width relativ to the container
*/ */
RV-FlexRow__Item--half() RV-FlexRow__Item--half()
RV-Sizes--half() +RV-Element__Modifier--name('half')
RV-Sizes--half()
RV-FlexRow__Item--third() RV-FlexRow__Item--third()
RV-Sizes--third() +RV-Element__Modifier--name('third')
RV-Sizes--third()
RV-FlexRow__Item--quarter() RV-FlexRow__Item--quarter()
RV-Sizes--quarter() +RV-Element__Modifier--name('quarter')
RV-Sizes--quarter()
RV-FlexRow__Item--content() RV-FlexRow__Item--content()
RV-Sizes--content() +RV-Element__Modifier--name('content')
RV-Sizes--content()
/* /* ##########
* Shorthand for the modifiers above * Block
*/ ########### */
RV-FlexRow__Item--shorthands() RV-FlexRow()
RV-Alignment() display flex
height 100%
&--narrower +RV-Block('RV-FlexRow')
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()
RV-FlexRow--shorthands()
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()

10
components/01_Layouts/flexRow/flexRow.hbs
View File

@ -1,4 +1,4 @@
<div class="RV-FlexRow__Container"> <div class="RV-FlexRow">
<div class="red RV-FlexRow__Item">Im normal</div> <div class="red RV-FlexRow__Item">Im normal</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div> <div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div>
@ -6,12 +6,12 @@
<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div> <div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
</div> </div>
<br></br> <br></br>
<div class="RV-FlexRow__Container"> <div class="RV-FlexRow">
<div class="red RV-FlexRow__Item">Im normal</div> <div class="red RV-FlexRow__Item">Im normal</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div>
</div> </div>
<br><br> <br><br>
<div class="RV-FlexRow__Container RV-FlexRow__Container--multiRow"> <div class="RV-FlexRow RV-FlexRow--multiRow">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div> <div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
@ -20,7 +20,7 @@
</div> </div>
<br><br> <br><br>
<div class="RV-FlexRow__Container RV-Spacing__Inner--small"> <div class="RV-FlexRow RV-Spacing__Inner--small">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div> <div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
@ -29,7 +29,7 @@
</div> </div>
<br><br> <br><br>
<div class="RV-FlexRow__Container RV-FlexRow__Container--breakPoint"> <div class="RV-FlexRow RV-FlexRow--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>

23
components/01_Layouts/fullWidthContent/_fullWidthContent.styl
View File

@ -1,16 +1,15 @@
RV-FullWidthContent__Container() RV-FullWidthContent()
width 100% width 100%
RV-FullWidthContent__Item() RV-FullWidthContent__Item()
width 100% +RV-Element--name('Item')
RV-ContentCrop() width 100%
RV-ContentCrop__Text()
RV-ContentCrop__Image()
RV-FullWidthContent(prefix='&')
{prefix}__Container
RV-FullWidthContent__Container()
{prefix}__Item +RV-Block('RV-FullWidthContent')
RV-FullWidthContent__Item() RV-FullWidthContent()
.RV-FullWidthContent +RV-Element()
RV-FullWidthContent() RV-FullWidthContent__Item()

64
components/01_Layouts/sizes/_sizes.styl
View File

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