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

Adapting Layouts to the new bem generator

Browse Source
This commit is contained in:
reverend 2021-03-07 18:47:44 +01:00
parent 0f4ca0c882
commit 7ae8569ff8
8 changed files with 125 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/01_Layouts/_layouts.styl
View File

@ -1,6 +1,6 @@
@import 'dummy/_dummy'
@import 'contentCrop/_contentCrop'
@import 'fullWidthContent/_fullWidthContent'
//@import 'fullWidthContent/_fullWidthContent'
@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
@import 'fan/_fan'

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

@ -2,55 +2,41 @@ RV-Alignment()
display grid
RV-Alignment--top()
+RV-Block__Modifier--name('top')
+RV-Block--modifier()
align-content start
RV-Alignment--bottom()
+RV-Block__Modifier--name('bottom')
+RV-Block--modifier()
align-content end
RV-Alignment--left()
+RV-Block__Modifier--name('left')
+RV-Block--modifier()
justify-content start
RV-Alignment--right()
+RV-Block__Modifier--name('right')
+RV-Block--modifier()
justify-content: end
RV-Alignment--horizontalCenter()
+RV-Block__Modifier--name('horizontalCenter')
+RV-Block--modifier()
justify-content center
RV-Alignment--verticalCenter()
+RV-Block__Modifier--name('verticalCenter')
+RV-Block--modifier()
align-items center
RV-Alignment--center()
+RV-Block__Modifier--name('center')
+RV-Block--modifier()
align-items center
justify-content center
+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()
RV-Alignment--top()
RV-Alignment--bottom()
RV-Alignment--left()
RV-Alignment--right()
RV-Alignment--horizontalCenter()
RV-Alignment--verticalCenter()
RV-Alignment--center()

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

@ -1,30 +1,30 @@
RV-ContentCrop--bottom()
+RV-Block__Modifier--name('bottom')
+RV-Block--modifier()
.RV-Image *
object-position bottom
RV-ContentCrop--top()
+RV-Block__Modifier--name('top')
+RV-Block--modifier()
.RV-Image *
object-position top
RV-ContentCrop--right()
+RV-Block__Modifier--name('right')
+RV-Block--modifier()
.RV-Image *
object-position right
RV-ContentCrop--left()
+RV-Block__Modifier--name('left')
+RV-Block--modifier()
.RV-Image *
object-position left
RV-ContentCrop--center()
+RV-Block__Modifier--name('center')
+RV-Block--modifier()
.RV-Image *
object-position center
RV-ContentCrop--square()
+RV-Block__Modifier--name('square')
+RV-Block--modifier()
width 100%
padding-top 100%
position relative
@ -38,7 +38,7 @@ RV-ContentCrop--square()
right 0
RV-ContentCrop--circle()
+RV-Block__Modifier--name('circle')
+RV-Block--modifier()
border-radius 50%
width 100%
padding-top 100%
@ -58,7 +58,7 @@ RV-ContentCrop--XtoY(x=1, y=1)
y: y
})
+RV-Block__Modifier--name('XtoY')
+RV-Block--modifier()
width 100%
padding-top 100% * (--y / --x)
position relative
@ -72,27 +72,27 @@ RV-ContentCrop--XtoY(x=1, y=1)
right 0
RV-ContentCrop--1to2()
+RV-Block__Modifier--name('1to2')
+RV-Block--modifier()
RV-ContentCrop__XtoY(1, 2)
RV-ContentCrop--2to1()
+RV-Block__Modifier--name('2to1')
+RV-Block--modifier()
RV-ContentCrop__XtoY(2, 1)
RV-ContentCrop--4to3()
+RV-Block__Modifier--name('4to3')
+RV-Block--modifier()
RV-ContentCrop__XtoY(4, 3)
RV-ContentCrop--16to9()
+RV-Block__Modifier--name('16to9')
+RV-Block--modifier()
RV-ContentCrop__XtoY(16, 9)
RV-ContentCrop--3to2()
+RV-Block__Modifier--name('3to2')
+RV-Block--modifier()
RV-ContentCrop__XtoY(3, 2)
RV-ContentCrop__Text--fade(background-color=white)
+RV-Element__Modifier--name('fade')
+RV-Element--modifier()
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
@ -106,7 +106,7 @@ RV-ContentCrop__Text--fade(background-color=white)
z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white)
+RV-Element__Modifier--name('ellipsis')
+RV-Element--modifier()
&:after
position relative
display block
@ -159,50 +159,21 @@ RV-ContentCrop(line-height=1.1, height=350px)
RV-ContentCrop(line-height, height)
+RV-Element()
RV-ContentCrop__Image()
RV-ContentCrop__Image()
+RV-Element()
RV-ContentCrop__Text(line-height)
+RV-Element('Text')
RV-ContentCrop__Text--ellipsis()
RV-ContentCrop__Text--fade()
+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--circle()
+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()
RV-ContentCrop--bottom()
RV-ContentCrop--top()
RV-ContentCrop--right()
RV-ContentCrop--left()
RV-ContentCrop--center()
RV-ContentCrop--square()
RV-ContentCrop--circle()
RV-ContentCrop--1to2()
RV-ContentCrop--2to1()
RV-ContentCrop--4to3()
RV-ContentCrop--16to9()
RV-ContentCrop--3to2()

22
components/01_Layouts/dummy/_dummy.styl
View File

@ -1,18 +1,18 @@
+RV-Block('RV-Dummy')
&--oranage
+RV-Block--modifier('orange')
background-color #F4A460 !important
&--blue
+RV-Block--modifier('blue')
background-color #6495ED !important
&--green
+RV-Block--modifier('green')
background-color #90EE90 !important
&--red
+RV-Block--modifier('red')
background-color #ce6d6d !important
&--yellow
+RV-Block--modifier('yellow')
background-color #eae144 !important
background-color #F4A460
@ -40,25 +40,25 @@
height var(--height)
width var(--width)
+RV-Element__Modifier('large')
+RV-Element--modifier('large')
--height 500px
--width 500px
+RV-Element__Modifier('small')
+RV-Element--modifier('small')
--height 100px
--width 100px
+RV-Block__Modifier('square')
+RV-Block--modifier('square')
height 350px
width 350px
+RV-Block__Modifier('portrait')
+RV-Block--modifier('portrait')
height 350px
width 150px
+RV-Block__Modifier('landscape')
+RV-Block--modifier('landscape')
width 350px
height 150px
+RV-Block__Modifier('red')
+RV-Block--modifier('red')
background-color #d8583e

46
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--name('horizontal')
+RV-Block--modifier()
flex-direction row
+RV-Element('Base')
@ -46,7 +46,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--name('vertical')
+RV-Block--modifier()
flex-direction column
width base-width
min-width initial
@ -57,6 +57,9 @@ RV-Fan--vertical(base-height, base-width)
min-width initial
min-height base-height
+RV-Element--modifier('fixedHeight')
--wurst wasserererer
/*
* Initialy horizontal, changes to vertical when
@ -64,7 +67,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--name('auto')
+RV-Block--modifier()
flex-flow row wrap
+RV-Element('Base')
@ -80,24 +83,24 @@ RV-Fan--auto(base-height, base-width)
* Element Mixins
* ############### */
RV-Fan__Base(base-height, base-width)
+RV-Element--name('Base')
+RV-Element()
box-sizing border-box
flex-basis base-width
flex-shrink 0
flex-grow 0
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight')
+RV-Element--modifier()
height height
box-sizing border-box
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier--name('fixedWidth')
+RV-Element--modifier()
max-width width
box-sizing border-box
RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface')
+RV-Element()
overflow hidden
box-sizing border-box
height base-height
@ -112,36 +115,21 @@ RV-Fan(base-height, base-width)
position relative
min-width base-width
/* #########
* CSS-Class
* ######### */
+RV-Block('RV-Fan')
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
--inner-spacing 0px
RV-Fan(--base-height, --base-width)
RV-Fan__Base(--base-height, --base-width)
+RV-Element()
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan__Surface(--base-height, --base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(--base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedHeight(--base-height)
+RV-Element()
RV-Fan__Base(--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)
RV-Fan--auto(--base-height, --base-width)
RV-Fan--vertical(--base-height, --base-width)
RV-Fan--horizontal(--base-height, --base-width)

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

@ -1,19 +1,19 @@
RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
+RV-Block__Modifier--name('autoWidth')
+RV-Block--modifier()
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')
+RV-Block--modifier()
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-height=300px,item-width=300px)
+RV-Block__Modifier--name('masonry')
+RV-Block--modifier()
display unquote(block)
column-count auto
column-width item-width
@ -28,7 +28,7 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
}
RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
+RV-Block__Modifier--name('verticalMasonry')
+RV-Block--modifier()
display unquote(block)
column-count auto
column-width item-width
@ -42,7 +42,7 @@ RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
}
RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
+RV-Block__Modifier--name('horizontalMasonry')
+RV-Block--modifier()
display flex
flex-direction row
flex-wrap wrap
@ -53,7 +53,7 @@ RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
RV-FlexGrid__Item(item-height, item-width)
+RV-Element--name('Item')
+RV-Element()
height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
& > * {
height 100%
@ -72,20 +72,9 @@ RV-FlexGrid(item-height, item-width)
})
RV-FlexGrid(--item-height, --item-width)
+RV-Element()
RV-FlexGrid__Item(--item-height, --item-width)
+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-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--verticalMasonry(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--horizontalMasonry(--item-height, --item-width)
RV-FlexGrid__Item(--item-height, --item-width)
RV-FlexGrid--autoWidth(--item-height, --item-width)
RV-FlexGrid--fixedSize(--item-height, --item-width)
RV-FlexGrid--masonry(--item-height, --item-width)
RV-FlexGrid--verticalMasonry(--item-height, --item-width)
RV-FlexGrid--horizontalMasonry(--item-height, --item-width)

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

@ -6,11 +6,11 @@
* Orientation
*/
RV-FlexRow--horizontal()
+RV-Block__Modifier--name('horizontal')
+RV-Block--modifier()
flex-direction row
RV-FlexRow--vertical()
+RV-Block__Modifier--name('vertical')
+RV-Block--modifier()
flex-direction column
+RV-Element('Item')
@ -18,20 +18,20 @@ RV-FlexRow--vertical()
RV-FlexRow__Item--outsideBreakPoint()
+RV-Element__Modifier--name('outsideBreakPoint')
+RV-Element--modifier()
margin-bottom -100vh
height max-content
flex-shrink 999
RV-FlexRow__Item--insideBreakPoint()
+RV-Element__Modifier--name('insideBreakPoint')
+RV-Element--modifier()
flex-grow 0
/*
* 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--breakPoint(localBreakPoint, mediaBreakPoint=0)
+RV-Block__Modifier--name('breakPoint')
+RV-Block--modifier()
RV-Reset()
gap 0px
@ -45,11 +45,8 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
overflow hidden
+RV-Element__Modifier()
RV-FlexRow__Item--outsideBreakPoint()
+RV-Element__Modifier()
RV-FlexRow__Item--insideBreakPoint()
RV-FlexRow__Item--outsideBreakPoint()
RV-FlexRow__Item--insideBreakPoint()
margin 0
padding 0
@ -70,16 +67,17 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
RV-FlexRow--auto()
+RV-Block__Modifier--name('auto')
RV-FlexRow--horizontal()
flex-wrap wrap
+RV-Block--modifier()
+RV-Squash()
RV-FlexRow--horizontal()
flex-wrap wrap
/* ##########
* Item class
########### */
RV-FlexRow__Item()
+RV-Element--name('Item')
+RV-Element()
flex-grow 3
flex-shrink 3
@ -88,22 +86,22 @@ RV-FlexRow__Item()
*/
RV-FlexRow__Item--narrower()
+RV-Element__Modifier--name('narrower')
+RV-Element--modifier()
flex-grow 1
flex-shrink 5
RV-FlexRow__Item--narrow()
+RV-Element__Modifier--name('narrow')
+RV-Element--modifier()
flex-grow 2
flex-shrink 4
RV-FlexRow__Item--wide()
+RV-Element__Modifier--name('wide')
+RV-Element--modifier()
flex-grow 4
flex-shrink 2
RV-FlexRow__Item--wider()
+RV-Element__Modifier--name('wider')
+RV-Element--modifier()
flex-grow 5
flex-shrink 1
@ -111,32 +109,32 @@ RV-FlexRow__Item--wider()
* Item has always the given width
*/
RV-FlexRow__Item--fixedSize(width)
+RV-Element__Modifier--name('fixedSize')
+RV-Element--modifier()
RV-Sizes--fixedSize(width)
/*
* Item width relativ to the container
*/
RV-FlexRow__Item--half()
+RV-Element__Modifier--name('half')
+RV-Element--modifier()
flex-grow 0
flex-shrink 0
flex-basis 50%
RV-FlexRow__Item--third()
+RV-Element__Modifier--name('third')
+RV-Element--modifier()
flex-grow 0
flex-shrink 0
flex-basis (100/3)%
RV-FlexRow__Item--quarter()
+RV-Element__Modifier--name('quarter')
+RV-Element--modifier()
flex-grow 0
flex-shrink 0
flex-basis 25%
RV-FlexRow__Item--content()
+RV-Element__Modifier--name('content')
+RV-Element--modifier()
flex-grow 0
flex-shrink 0
flex-basis max-content
@ -159,46 +157,19 @@ RV-FlexRow()
})
+RV-Element()
RV-FlexRow__Item--narrower()
RV-FlexRow__Item--narrow()
RV-FlexRow__Item--wide()
RV-FlexRow__Item--wider()
RV-FlexRow__Item--fixedSize(--width)
RV-FlexRow__Item--narrower()
RV-FlexRow__Item--half()
RV-FlexRow__Item--third()
RV-FlexRow__Item--quarter()
RV-FlexRow__Item--content()
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--breakPoint(--localBreakPoint, --mediaBreakPoint)
+RV-Block__Modifier()
RV-FlexRow--horizontal()
+RV-Block__Modifier()
RV-FlexRow--vertical()
+RV-Block__Modifier()
RV-FlexRow--auto()
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
RV-FlexRow--horizontal()
RV-FlexRow--vertical()
RV-FlexRow--auto()

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

@ -2,7 +2,7 @@ RV-FullWidthContent()
width 100%
RV-FullWidthContent__Item()
+RV-Element--name('Item')
+RV-Element()
width 100%
RV-ContentCrop__Text()
RV-ContentCrop__Image()
@ -11,5 +11,4 @@ RV-FullWidthContent__Item()
+RV-Block('RV-FullWidthContent')
RV-FullWidthContent()
+RV-Element()
RV-FullWidthContent__Item()
RV-FullWidthContent__Item()