diff --git a/components/01_Layouts/_layouts.styl b/components/01_Layouts/_layouts.styl index 31cd680..43a1bf1 100644 --- a/components/01_Layouts/_layouts.styl +++ b/components/01_Layouts/_layouts.styl @@ -1,6 +1,4 @@ -/*@import 'flexRow/_flexRow' +@import 'flexRow/_flexRow' @import 'flexGrid/_flexGrid' -*/ @import 'breakPoint/_breakPoint' - @import 'fan/_fan' \ No newline at end of file diff --git a/components/01_Layouts/breakPoint/_breakPoint.styl b/components/01_Layouts/breakPoint/_breakPoint.styl index 4b1b9c9..0ab4d13 100644 --- a/components/01_Layouts/breakPoint/_breakPoint.styl +++ b/components/01_Layouts/breakPoint/_breakPoint.styl @@ -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) + \ No newline at end of file diff --git a/components/01_Layouts/breakPoint/breakPoint.hbs b/components/01_Layouts/breakPoint/breakPoint.hbs index ff2f3b3..98865b8 100644 --- a/components/01_Layouts/breakPoint/breakPoint.hbs +++ b/components/01_Layouts/breakPoint/breakPoint.hbs @@ -6,13 +6,22 @@ }
+
+
ItemItem
+
Larger
+
+
Content
+
+
+
ItemItem
+
Smaller
-
-
Larger
+
+
ItemItem
\ No newline at end of file diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index 85bc3a4..a9715be 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -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() - \ No newline at end of file +RV-Fan(280px, 320px) \ No newline at end of file diff --git a/components/01_Layouts/flexGrid/_flexGrid.styl b/components/01_Layouts/flexGrid/_flexGrid.styl index 3344bae..d61900b 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.styl +++ b/components/01_Layouts/flexGrid/_flexGrid.styl @@ -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) \ No newline at end of file +RV-FlexGrid(300px, 300px) \ No newline at end of file diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/01_Layouts/flexRow/_flexRow.styl index d7990bf..2772ad7 100644 --- a/components/01_Layouts/flexRow/_flexRow.styl +++ b/components/01_Layouts/flexRow/_flexRow.styl @@ -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() \ No newline at end of file + +/* ########## + * 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() \ No newline at end of file diff --git a/components/03_Styles/_styles.styl b/components/03_Styles/_styles.styl index 0286003..37712e0 100644 --- a/components/03_Styles/_styles.styl +++ b/components/03_Styles/_styles.styl @@ -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' diff --git a/components/_components.styl b/components/_components.styl index 96fe44d..a019cd9 100644 --- a/components/_components.styl +++ b/components/_components.styl @@ -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'