From a1d1f850851e5826800822d09f5b3b64e582c3b3 Mon Sep 17 00:00:00 2001 From: reverend Date: Tue, 9 Mar 2021 20:42:22 +0100 Subject: [PATCH] Outsource Breakpoint to its own component --- components/01_Layouts/_layouts.styl | 3 +- .../01_Layouts/breakPoint/_breakPoint.styl | 73 +++++++++++++++++++ .../breakPoint/breakPoint.config.json | 17 +++++ .../01_Layouts/breakPoint/breakPoint.hbs | 27 +++++++ components/01_Layouts/flexRow/_flexRow.styl | 61 +--------------- .../01_Layouts/flexRow/flexRow.config.json | 10 +-- 6 files changed, 125 insertions(+), 66 deletions(-) create mode 100644 components/01_Layouts/breakPoint/_breakPoint.styl create mode 100644 components/01_Layouts/breakPoint/breakPoint.config.json create mode 100644 components/01_Layouts/breakPoint/breakPoint.hbs diff --git a/components/01_Layouts/_layouts.styl b/components/01_Layouts/_layouts.styl index 3c35c29..1580d6e 100644 --- a/components/01_Layouts/_layouts.styl +++ b/components/01_Layouts/_layouts.styl @@ -1,3 +1,4 @@ @import 'flexRow/_flexRow' @import 'flexGrid/_flexGrid' -@import 'fan/_fan' \ No newline at end of file +@import 'fan/_fan' +@import 'breakPoint/_breakPoint' \ No newline at end of file diff --git a/components/01_Layouts/breakPoint/_breakPoint.styl b/components/01_Layouts/breakPoint/_breakPoint.styl new file mode 100644 index 0000000..4946bb1 --- /dev/null +++ b/components/01_Layouts/breakPoint/_breakPoint.styl @@ -0,0 +1,73 @@ +RV-BreakPoint__Item(localBreakPoint) + +RV-Element() + RV-FlexRow__Item() + flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint + overflow: hidden; + --outer-spacing 0 + --inner-spacing 0 + +RV-BreakPoint__Item--outside() + +RV-Element--modifier() + margin-bottom -100vh + flex-shrink 999 + +RV-BreakPoint__Item--inside() + +RV-Element--modifier() + flex-grow 0 + +RV-BreakPoint(localBreakPoint) + RV-FlexRow() + +RV-Squash() + RV-FlexRow--wrap() + + overflow-y hidden + + RV-Reset() + gap 0px + + RV-Utils__ElementAmount--range(0, 20, @(index, total){ + min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index) + } + ) + +RV-BreakPoint--horizontal() + +RV-Block--modifier() + flex-wrap nowrap + min-width max-content + + +RV-Element('Item') + +RV-Element--modifier('outside') + margin-bottom unset + height unset + +RV-BreakPoint--vertical() + +RV-Block--modifier() + flex-direction column + flex-wrap nowrap + height 100% + + +RV-Element('Item') + +RV-Element--modifier('outside') + margin-bottom unset + height unset + ++RV-Block('RV-BreakPoint') + RV-CSSParameter({ + localBreakPoint: 500px + }) + + && + --inner-spacing 0 + + RV-BreakPoint(--localBreakPoint) + + +RV-Element() + RV-BreakPoint__Item(--localBreakPoint) + RV-BreakPoint__Item--outside() + RV-BreakPoint__Item--inside() + + RV-BreakPoint--horizontal() + RV-BreakPoint--vertical() + + + \ No newline at end of file diff --git a/components/01_Layouts/breakPoint/breakPoint.config.json b/components/01_Layouts/breakPoint/breakPoint.config.json new file mode 100644 index 0000000..7219269 --- /dev/null +++ b/components/01_Layouts/breakPoint/breakPoint.config.json @@ -0,0 +1,17 @@ +{ + "title": "BreakPoint", + "variants": [ + { + "name": "Horizontal", + "context": { + "modifier": "--horizontal" + } + }, + { + "name": "Vertical", + "context": { + "modifier": "--vertical" + } + } + ] +} \ No newline at end of file diff --git a/components/01_Layouts/breakPoint/breakPoint.hbs b/components/01_Layouts/breakPoint/breakPoint.hbs new file mode 100644 index 0000000..2f4fe8c --- /dev/null +++ b/components/01_Layouts/breakPoint/breakPoint.hbs @@ -0,0 +1,27 @@ + + +
+
+
ItemItem
+
+
+
Larger
+
+
+
ItemItem
+
+
+
ItemItem
+
+
+
Smaller
+
+
+
ItemItem
+
+
\ No newline at end of file diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/01_Layouts/flexRow/_flexRow.styl index 1526ee4..0e11729 100644 --- a/components/01_Layouts/flexRow/_flexRow.styl +++ b/components/01_Layouts/flexRow/_flexRow.styl @@ -12,65 +12,14 @@ RV-FlexRow--horizontal() RV-FlexRow--vertical() +RV-Block--modifier() flex-direction column - - +RV-Element('Item') - margin-bottom unset - - -RV-FlexRow__Item--outsideBreakPoint() - +RV-Element--modifier() - margin-bottom -100vh - height max-content - flex-shrink 999 - -RV-FlexRow__Item--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() - RV-Reset() - gap 0px - - RV-Utils__ElementAmount--range(0, 20, @(index, total){ - min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index) - } - ) - - +RV-Element('Item') - min-width initial - flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint - overflow hidden - - RV-FlexRow__Item--outsideBreakPoint() - RV-FlexRow__Item--insideBreakPoint() - - margin 0 - padding 0 - --_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing)) - --height 100% - * - position relative - height calc(var(--height) - var(--_spacing-difference)) - width calc(var(--height) - var(--_spacing-difference)) - top calc(var(--_spacing-difference) / 2) - left calc(var(--_spacing-difference) / 2) - - @media(max-width mediaBreakPoint) - flex-direction row - /* * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy */ -RV-FlexRow--auto() +RV-FlexRow--wrap() +RV-Block--modifier() - +RV-Squash() - RV-FlexRow--horizontal() - flex-wrap wrap + flex-direction row + flex-wrap wrap /* ########## @@ -144,8 +93,6 @@ RV-FlexRow__Item--content() ########### */ RV-FlexRow() display flex - height 100% - overflow-y hidden +RV-Block('RV-FlexRow') RV-FlexRow() @@ -172,4 +119,4 @@ RV-FlexRow() RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint) RV-FlexRow--horizontal() RV-FlexRow--vertical() - RV-FlexRow--auto() \ No newline at end of file + RV-FlexRow--wrap() \ No newline at end of file diff --git a/components/01_Layouts/flexRow/flexRow.config.json b/components/01_Layouts/flexRow/flexRow.config.json index f5053bb..7f25ac4 100644 --- a/components/01_Layouts/flexRow/flexRow.config.json +++ b/components/01_Layouts/flexRow/flexRow.config.json @@ -17,15 +17,9 @@ } }, { - "name": "Breakpoint", + "name": "Wrap", "context": { - "modifier": "--breakPoint" - } - }, - { - "name": "Auto", - "context": { - "modifier": "--auto" + "modifier": "--wrap" } } ]