Reordering, Layouts now No 1

components/01_Layouts/flexRow/_flexRow.styl

@@ -0,0 +1,166 @@
+/*
+ * Classes for easy flexrow usage
+ */
+
+/*
+ * Orientation
+ */
+RV-FlexRow--horizontal()
+	+RV-Block__Modifier--name('horizontal')
+		flex-direction row
+
+RV-FlexRow--vertical()
+	+RV-Block__Modifier--name('vertical')
+		flex-direction column
+	
+/*
+ * 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)
+	+RV-Block__Modifier--name('breakPoint')
+		flex-wrap wrap
+		RV-Reset()
+		gap 0px
+		
+		RV-Utils__ElementAmount(@(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
+		
+		@media(max-width mediaBreakPoint)
+			flex-direction row
+
+/*
+ * 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
+
+
+/* ##########
+ * Item class
+  ########### */
+RV-FlexRow__Item()
+	+RV-Element--name('Item')
+		flex-basis max-content
+		flex-grow 3
+		flex-shrink 3
+
+/*
+ * Varios relative width of items to each other
+ */
+
+RV-FlexRow__Item--narrower()
+	+RV-Element__Modifier--name('narrower')
+		flex-grow 1
+		flex-shrink 5
+
+RV-FlexRow__Item--narrow()
+	+RV-Element__Modifier--name('narrow')
+		flex-grow 2
+		flex-shrink 4
+
+RV-FlexRow__Item--wide()
+	+RV-Element__Modifier--name('wide')
+		flex-grow 4
+		flex-shrink 2
+
+RV-FlexRow__Item--wider()
+	+RV-Element__Modifier--name('wider')
+		flex-grow 5
+		flex-shrink 1
+
+/*
+ * Item has always the given width
+ */
+RV-FlexRow__Item--fixedSize(width)
+	+RV-Element__Modifier--name('fixedSize')
+		RV-Sizes--fixedSize(width)
+
+/*
+ * Item width relativ to the container
+ */
+RV-FlexRow__Item--half()
+	+RV-Element__Modifier--name('half')
+		RV-Sizes--half()
+
+RV-FlexRow__Item--third()
+	+RV-Element__Modifier--name('third')
+		RV-Sizes--third()
+
+RV-FlexRow__Item--quarter()
+	+RV-Element__Modifier--name('quarter')
+		RV-Sizes--quarter()
+	
+RV-FlexRow__Item--content()
+	+RV-Element__Modifier--name('content')
+		RV-Sizes--content()
+
+/* ##########
+ * Block
+  ########### */
+RV-FlexRow()
+	display flex
+	height 100%
+
++RV-Block('RV-FlexRow')
+	RV-FlexRow()
+	
+	RV-CSSParameter({
+		width: 100px
+		localBreakPoint: 500px,
+		mediaBreakPoint: 100vw
+	})
+	
+	+RV-Element()
+		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--horizontal()
+		
+	+RV-Block__Modifier()
+		RV-FlexRow--vertical()
+		
+	+RV-Block__Modifier()
+		RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
+		
+	+RV-Block__Modifier()
+		RV-FlexRow--auto()

components/01_Layouts/flexRow/flexRow.config.json

@@ -0,0 +1 @@
+{}

components/01_Layouts/flexRow/flexRow.hbs

@@ -0,0 +1,38 @@
+<div class="RV-FlexRow">
+	<div class="red RV-FlexRow__Item">Im normal</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--left"><span>wrapped content left</span></div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
+</div>
+<br></br>
+<div class="RV-FlexRow">
+	<div class="red RV-FlexRow__Item">Im normal</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div>
+</div>
+<br><br>
+<div class="RV-FlexRow RV-FlexRow--multiRow">
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">wide</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">wider</div>
+</div>
+
+<br><br>
+<div class="RV-FlexRow RV-Spacing__Inner--small">
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
+</div>
+
+<br><br>
+<div class="RV-FlexRow RV-FlexRow--breakPoint">
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>
+	<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">blubbber</div>
+	<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
+</div>