Add new flow component

- Add component
- Add new `$rhythm` metrics

front-end/scss/project/components/_flow.scss

@@ -0,0 +1,54 @@
+// Define directions with their margin direction
+$flow__directions: (
+    ("horizontal", "left"), 
+    ("vertical", "top")
+);
+
+// Set as either padding or margin
+$flow__property: "padding";
+
+.flow {
+
+    @include mode("global") {
+
+        // Loop each option
+        @each $direction in $flow__directions {
+
+            // Build a class up
+            &-#{ nth($direction, 1) } {
+
+                // By default use $rhythm as it is
+                &:not([class*="--mini"]):not([class*="--double"]):not([class*="--treble"]) {
+
+                    > * + * {
+                        padding-#{ nth($direction, 2) }: $rhythm;
+                    }
+                }
+
+                // Halve it
+                &--mini {
+
+                    > * + * {
+                        padding-#{ nth($direction, 2) }: $rhythm--mini;
+                    }
+                }
+
+                // Double it
+                &--double {
+
+                    > * + * {
+                        padding-#{ nth($direction, 2) }: $rhythm--double;
+                    }
+                }
+
+                // Treble it
+                &--treble {
+
+                    > * + * {
+                        padding-#{ nth($direction, 2) }: $rhythm--double;
+                    }
+                }
+            }
+        }
+    }
+}

front-end/scss/project/imports/_components.scss

@@ -1,6 +1,7 @@
 @import "../components/breathe";
 @import "../components/chunk";
 @import "../components/display";
+@import "../components/flow";
 @import "../components/icon";
 @import "../components/size";
 @import "../components/wrapper";

front-end/scss/project/vars/_metrics.scss

@@ -13,6 +13,10 @@ $radius--mini: ($radius / 2);
 $radius--midi: ($radius  + ($radius / 2));
 $radius--double: ($radius * 2);
 $radius--treble: ($radius * 3);
+$rhythm: 14px;
+$rhythm--mini: ($rhythm / 2);
+$rhythm--double: ($rhythm * 2);
+$rhythm--treble: ($rhythm * 3);
 
 /*------------------------------------*\
     BREAKPOINTS