Converting Layouts to mixin name based generatort
This commit is contained in:
parent
61290fb71d
commit
cb4e4a978f
@ -1,6 +1,4 @@
|
||||
/*@import 'flexRow/_flexRow'
|
||||
@import 'flexRow/_flexRow'
|
||||
@import 'flexGrid/_flexGrid'
|
||||
*/
|
||||
@import 'breakPoint/_breakPoint'
|
||||
|
||||
@import 'fan/_fan'
|
@ -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)
|
||||
|
||||
|
||||
|
||||
|
@ -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>
|
@ -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)
|
@ -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)
|
@ -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()
|
@ -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'
|
||||
|
@ -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'
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user