added flex utils

handymathis@gmail..com · handymathis@gmail..com · commit 148478b10b36 · 2021-04-02T17:43:41.000Z
diff --git a/flex/constants.scss b/flex/constants.scss
@@ -0,0 +1,3 @@
+$sm: 400px;
+$md: 680px;
+$lg: 100vw;
diff --git a/flex/container.scss b/flex/container.scss
@@ -0,0 +1,11 @@
+
+@mixin containerShape($class-name, $size) {
+    
+    .#{$class-name} {
+        width: $size;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+}
diff --git a/flex/row.scss b/flex/row.scss
@@ -0,0 +1,11 @@
+
+@mixin rowShape($class-name, $size) {
+    
+    .#{$class-name} {
+        width: $size;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+}
diff --git a/index.html b/index.html
@@ -8,22 +8,13 @@
 
 <body style="background: #161616;">
     
-    <nav class="sidebar sidebar-light">
-        <button class="sidebar-item sidebar-toggler">
-            <div class="hidden-content">Hide</div>
-        </button>
-        <button class="sidebar-item">
-            <div class="hidden-content">text 1</div>
-        </button>
-        <button class="sidebar-item">
-            <div class="hidden-content">text 2</div>
-        </button>
-        <button class="sidebar-item">
-            <div class="hidden-content">text 3</div>
-        </button>
-    </nav>
-
-    <script src="js/sidebar-toggler.js"></script>
+    <div class="container-lg">
+        <div class="row-lg">
+            <div style="width: 700px; background: blue; height: 3em;"></div>
+            <div style="width: 500px; background: red; height: 3em;"></div>
+            <div style="width: 300px; background: green; height: 3em;"></div>
+        </div>
+    </div>
 
 </body>
 </html>
diff --git a/main.scss b/main.scss
@@ -16,6 +16,11 @@
 @import "./nav/sidebar/sidebar.scss";
 @import "./nav/sidebar/theme.scss";
 
+// Flex
+@import "./flex/container.scss";
+@import "./flex/row.scss";
+@import "./flex/constants.scss";
+
 
 
 // Buttons
@@ -35,4 +40,15 @@
 // Sidebar
 @include sidebarTheme(sidebar-grey, #4D4D4D, rgba(0,0,0,0.3), #fff);
 @include sidebarTheme(sidebar-dark, #1d1d1d, rgba(0,0,0,0.4), #fff);
-@include sidebarTheme(sidebar-light, #838383, rgba(0,0,0,0.2), #0f0f0f);
+@include sidebarTheme(sidebar-light, #838383, rgba(0,0,0,0.2), #0f0f0f);
+
+// Flex container
+@include containerShape(container-sm, $sm);
+@include containerShape(container-md, $md);
+@include containerShape(container-lg, $lg);
+
+
+// Flex row
+@include rowShape(row-sm, $sm);
+@include rowShape(row-md, $md);
+@include rowShape(row-lg, $lg);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+$sm: 400px;`
	`2`	`+$md: 680px;`
	`3`	`+$lg: 100vw;`