first commit

resources/sass/setup/_positions.scss

@@ -0,0 +1,119 @@
+// Positions
+
+$base: 1rem;
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.block {
+    display: block;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+}
+
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.m-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.p-auto {
+    padding-left: auto;
+    padding-right: auto;
+}
+
+@for $i from 1 through 5 {
+    .m-#{$i} {
+        margin: $i * $base;
+    }
+
+    .mx-#{$i} {
+        margin-left: $i * $base;
+        margin-right: $i * $base;
+    }
+
+    .my-#{$i} {
+        margin-top: $i * $base;
+        margin-bottom: $i * $base;
+    }
+
+    .mt-#{$i} {
+        margin-top: $i * $base;
+    }
+
+    .ml-#{$i} {
+        margin-left: $i * $base;
+    }
+
+    .mr-#{$i} {
+        margin-right: $i * $base;
+    }
+
+    .mb-#{$i} {
+        margin-bottom: $i * $base;
+    }
+
+    .p-#{$i} {
+        padding: $i * $base;
+    }
+
+    .px-#{$i} {
+        padding-left: $i * $base;
+        padding-right: $i * $base;
+    }
+
+    .py-#{$i} {
+        padding-top: $i * $base;
+        padding-bottom: $i * $base;
+    }
+
+    .pt-#{$i} {
+        padding-top: $i * $base;
+    }
+
+    .pl-#{$i} {
+        padding-left: $i * $base;
+    }
+
+    .pb-#{$i} {
+        padding-bottom: $i * $base;
+    }
+}
+
+.z-10 {
+    z-index: 10;
+}