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

Converting Layouts to mixin name based generatort

This commit is contained in:
reverend 2021-03-19 12:29:17 +01:00
parent 61290fb71d
commit cb4e4a978f
8 changed files with 168 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/01_Layouts/_layouts.styl
View File

@ -1,6 +1,4 @@
/*@import 'flexRow/_flexRow'
@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
*/
@import 'breakPoint/_breakPoint'
@import 'fan/_fan'

114
components/01_Layouts/breakPoint/_breakPoint.styl
View File

@ -1,11 +1,3 @@
RV-BreakPoint__Item(breakPoint)
+RV-Element()
RV-FlexRow__Item()
flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
overflow: hidden;
--outer-spacing 0
--inner-spacing 0
RV-BreakPoint__Item--outside()
+RV-Element--modifier()
flex-shrink 999
@ -14,30 +6,56 @@ RV-BreakPoint__Item--inside()
+RV-Element--modifier()
flex-grow 0
RV-BreakPoint(breakPoint)
RV-FlexRow()
+RV-Squash()
RV-FlexRow--wrap()
overflow-y hidden
RV-Reset()
gap 0px
RV-BreakPoint__Item(breakPoint, fixedSize=var(--fixedSize))
+RV-Element()
RV-FlexRow__Item()
flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
overflow: hidden;
--outer-spacing 0
--inner-spacing 0
RV-BreakPoint__Item--outside()
RV-BreakPoint__Item--inside()
RV-BreakPoint__Item--fixedSize(fixedSize)
// Test skipping a level or two
RV-BreakPoint--wrap__Item--outside()
+RV-Element--modifier()
margin-bottom -100vh
RV-BreakPoint--wrap__Item()
+RV-Element()
RV-BreakPoint--wrap__Item--outside()
RV-BreakPoint--wrap()
+RV-Block--modifier()
+RV-Element('Item')
+RV-Element--modifier('outside')
margin-bottom -100vh
RV-BreakPoint--wrap__Item()
RV-BreakPoint--horizontal__Item--outside()
+RV-Element--modifier()
margin-bottom unset
height unset
RV-BreakPoint--horizontal__Item()
+RV-Element()
RV-BreakPoint--horizontal__Item--outside()
RV-BreakPoint--horizontal()
+RV-Block--modifier()
flex-wrap nowrap
flex-direction row
RV-BreakPoint--horizontal__Item()
RV-BreakPoint--vertical__Item--outside()
+RV-Element--modifier()
margin-bottom unset
height unset
+RV-Element('Item')
+RV-Element--modifier('outside')
margin-bottom unset
height unset
RV-BreakPoint--vertical__Item()
+RV-Element()
RV-BreakPoint--vertical__Item--outside()
RV-BreakPoint--vertical()
+RV-Block--modifier()
@ -45,31 +63,33 @@ RV-BreakPoint--vertical()
flex-wrap nowrap
height 100%
+RV-Element('Item')
+RV-Element--modifier('outside')
margin-bottom unset
height unset
RV-BreakPoint--vertical__Item()
+RV-Block('RV-BreakPoint')
RV-CSSParameter({
breakPoint: 500px
fixedSize: 100px
})
&&
--inner-spacing 0
RV-BreakPoint(--breakPoint)
+RV-Element()
RV-BreakPoint__Item(--breakPoint)
RV-BreakPoint__Item--outside()
RV-BreakPoint__Item--inside()
RV-BreakPoint__Item--fixedSize(--fixedSize)
RV-BreakPoint(breakPoint)
+RV-Block()
RV-CSSParameter({
breakPoint: breakPoint
fixedSize: 100px
})
RV-BreakPoint--wrap()
RV-BreakPoint--horizontal()
RV-BreakPoint--vertical()
&&
--inner-spacing 0
RV-FlexRow()
RV-FlexRow--wrap()
overflow-y hidden
RV-Reset()
gap 0px
RV-BreakPoint__Item(--breakPoint, --fixedSize)
RV-BreakPoint--wrap()
RV-BreakPoint--horizontal()
RV-BreakPoint--vertical()
RV-BreakPoint(500px)

13
components/01_Layouts/breakPoint/breakPoint.hbs
View File

@ -6,13 +6,22 @@
}
</style>
<div class="RV-BreakPoint RV-BreakPoint{{modifier}}">
<div class="RV-BreakPoint__Item RV-Dummy RV-Spacing__Inner--medium">
<div>ItemItem</div>
</div>
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
<div>Larger</div>
</div>
<div class="RV-BreakPoint__Item RV-Dummy">
<div>Content</div>
</div>
<div class="RV-BreakPoint__Item RV-Dummy">
<div>ItemItem</div>
</div>
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--inside RV-Dummy--yellow RV-Dummy">
<div style="margin: 15px;">Smaller</div>
</div>
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
<div>Larger</div>
<div class="RV-BreakPoint__Item RV-Dummy">
<div>ItemItem</div>
</div>
</div>

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

@ -1,3 +1,4 @@
/*
* A Fan is a layout that consists of two parts:
* The base and the surface, named after a hand fan.
@ -18,12 +19,8 @@ RV-Fan--horizontal__Base()
RV-BreakPoint__Item(--localBreakPoint)
RV-BreakPoint__Item--outside()
flex-basis base-width
flex-basis --base-width
flex-grow 0
RV-Fan--horizontal__Base--wurst()
+RV-Element--modifier()
--wurst wasser
/*
* Base on the left, Surface on the right
@ -37,9 +34,7 @@ RV-Fan--horizontal(base-height, base-width)
})
RV-BreakPoint(--localBreakPoint)
RV-Fan--horizontal__Surface()
+RV-Element()
RV-Fan--horizontal__Base()
RV-Fan--horizontal__Base--wurst()
RV-Fan--horizontal__Base()
RV-BreakPoint--horizontal()
min-width base-width
@ -124,6 +119,9 @@ RV-Fan__Surface(base-height, base-width)
> *
height calc_height(100%)
width calc_width(100%)
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Surface--fixedWidth(base-width)
/* ############
* Block Mixin
@ -138,43 +136,11 @@ RV-Fan(base-height, base-width)
position relative
min-width min-content
+RV-Generate()
RV-Fan(280px, 320px)
RV-Fan__Base(--base-height, --base-width)
+RV-Element()
RV-Fan__Base(--base-height, --base-width)
RV-Fan__Surface(--base-height, --base-width)
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan--auto(--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-Fan--vertical(--base-height, --base-width)
RV-Fan--horizontal(--base-height, --base-width)
RV-Fan--horizontal__Surface()
+RV-BEM()
--peter bernd
RV-Fan--horizontal__Base--wurst()
+RV-BEM()
--fan wurst
RV-Fan--horizontal__Base()
+RV-BEM()
RV-Fan--horizontal__Base--wurst()
RV-Fan--horizontal__Surface()
--wurst wasser
RV-Fan--horizontal()
+RV-BEM()
RV-Fan--horizontal__Base()
--kaka pipi
RV-Fan()
+RV-BEM()
RV-Fan--horizontal()
--blubb bernd
RV-Fan()
RV-Fan(280px, 320px)

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

@ -12,44 +12,54 @@ RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid--masonry__Item()
+RV-Element()
display inline-block
width 100%
height unset
margin-bottom: var(--inner-spacing);
& > * {
height auto
}
RV-FlexGrid--masonry(item-height=300px,item-width=300px)
+RV-Block--modifier()
display unquote(block)
column-count auto
column-width item-width
+RV-Element('Item')
display inline-block
width 100%
height unset
margin-bottom: var(--inner-spacing);
& > * {
height auto
}
RV-FlexGrid--masonry__Item()
RV-FlexGrid--verticalMasonry__Item()
+RV-Element()
display inline-block
height unset
margin-bottom: var(--inner-spacing);
& > * {
height auto
}
RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
+RV-Block--modifier()
display unquote(block)
column-count auto
column-width item-width
+RV-Element('Item')
display inline-block
height unset
margin-bottom: var(--inner-spacing);
& > * {
height auto
}
RV-FlexGrid--verticalMasonry__Item()
RV-FlexGrid--horizontalMasonry__Item()
+RV-Element()
height calc_height(item-height)
width calc_width(max-content)
RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
+RV-Block--modifier()
display flex
flex-direction row
flex-wrap wrap
+RV-Element('Item')
height calc_height(item-height)
width calc_width(max-content)
RV-FlexGrid--horizontalMasonry__Item()
RV-FlexGrid__Item(item-height, item-width)
@ -61,20 +71,21 @@ RV-FlexGrid__Item(item-height, item-width)
}
RV-FlexGrid(item-height, item-width)
display grid
grid-template-columns: repeat(auto-fill, var(--item-width));
+RV-Block()
RV-CSSParameter({
item-height: item-height,
item-width: item-width
})
display grid
grid-template-columns: repeat(auto-fill, var(--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)
+RV-Block('RV-FlexGrid')
RV-CSSParameter({
item-height: 300px,
item-width: 300px
})
RV-FlexGrid(--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)
RV-FlexGrid(300px, 300px)

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

@ -21,14 +21,6 @@ RV-FlexRow--wrap()
flex-direction row
flex-wrap wrap
/* ##########
* Item class
########### */
RV-FlexRow__Item()
+RV-Element()
flex-grow 3
/*
* Varios relative width of items to each other
*/
@ -87,20 +79,12 @@ RV-FlexRow__Item--content()
flex-basis max-content
/* ##########
* Block
* Item class
########### */
RV-FlexRow()
display flex
+RV-Block('RV-FlexRow')
RV-FlexRow()
RV-CSSParameter({
width: 100px
})
RV-FlexRow__Item()
+RV-Element()
RV-FlexRow__Item()
flex-grow 3
RV-FlexRow__Item--narrower()
RV-FlexRow__Item--narrow()
RV-FlexRow__Item--wide()
@ -110,8 +94,22 @@ RV-FlexRow()
RV-FlexRow__Item--third()
RV-FlexRow__Item--quarter()
RV-FlexRow__Item--content()
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
RV-FlexRow--horizontal()
RV-FlexRow--vertical()
RV-FlexRow--wrap()
/* ##########
* Block
########### */
RV-FlexRow()
+RV-Block()
RV-CSSParameter({
width: 100px
})
display flex
RV-FlexRow__Item()
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
RV-FlexRow--horizontal()
RV-FlexRow--vertical()
RV-FlexRow--wrap()
RV-FlexRow()

6
components/03_Styles/_styles.styl
View File

@ -1,4 +1,4 @@
@import 'dummy/_dummy'
@import 'elementList/_elementList'
@import 'boxShadow/_boxShadow'
@import 'iconized/_iconized'
//@import 'elementList/_elementList'
//@import 'boxShadow/_boxShadow'
//@import 'iconized/_iconized'

10
components/_components.styl
View File

@ -1,11 +1,13 @@
bem_debug = true
@import '00_Tools/_tools'
@import '01_Layouts/_layouts'
/*@import '02_ContentShape/_contentShape'
//@import '02_ContentShape/_contentShape'
@import '03_Styles/_styles'
@import '04_Atoms/_atoms'
@import '05_Molecules/_molecules'
//@import '04_Atoms/_atoms'
//@import '05_Molecules/_molecules'
@import '06_Organisms/_organisms'
//@import '06_Organisms/_organisms'
//@import '10_Examples/playground/_playground'