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

Converting Layouts to new BEM-Generator

Browse Source
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()
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()
+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()

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

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

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

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

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
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()
+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="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item">totally</div>
@ -15,7 +15,7 @@
<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="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item">totally</div>
@ -32,7 +32,7 @@
<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="green RV-FlexGrid__Item">some</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="red RV-FlexGrid__Item">to</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
*/
/* ##########
* 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()
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="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</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>
<br></br>
<div class="RV-FlexRow__Container">
<div class="RV-FlexRow">
<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>
<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="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
@ -20,7 +20,7 @@
</div>
<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="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
@ -29,7 +29,7 @@
</div>
<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="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</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()
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()
+RV-Block('RV-FullWidthContent')
RV-FullWidthContent()
+RV-Element()
RV-FullWidthContent__Item()

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

@ -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()
+RV-Block__Modifier()
RV-Sizes--content()