:art: adding margin and padd helpers

src/components/card.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
-.card.f-col.start.b-solid.rounded.bg-primary
-    header.t-right.dark
+.card.f-col.start.b-solid.rounded.bg-primary.mr-1
+    header.t-right.dark.ph-1.pt-1
         h3 {{ card.name }}
 
-    main
+    main.ph-1
         section
             img(alt="Vue logo" style="width: 100%;" src="@/assets/logo.png")
 
-    footer
-        button(@click="state.count++") {{ state.count }}
-        button(@click="close") close
+    footer.ph-1.b-1
+        button(@click="state.count++").b-solid.rounded.p-0 {{ state.count }}
+        button(@click="close").b-solid.rounded.p-0 close
 
 </template>
 
@@ -40,15 +40,6 @@ const close = e => {
 @import '@/sss/variables.sss'
 
 .card
-    margin: 0 $ms-3 0 0
     height: $ms-8
     width: $ms-7
-    
-    header, main, footer
-        padding: 0 $ms-1
-    header
-        padding-top: $ms-1
-    footer
-        padding-bottom: $ms-1
-
 </style>

src/sss/partials/_helpers.sss

@@ -1,6 +1,7 @@
 @import '../variables.sss'
 @import '../theme.sss'
 
+/* Flex box  */
 %flexy
     display: flex
     justify-content: center
@@ -23,6 +24,8 @@
             justify-content: space-evenly
         &.stretch
             align-content: stretch
+        &.baseline
+            align-items: baseline
         &.center
             align-items: flex-start
             justify-content: flex-start
@@ -35,6 +38,7 @@
     &-grow
         flex-grow: 1
 
+/* Borders */
 .b
     &-none
         border: none
@@ -48,6 +52,7 @@
         &.invert
             border-color: $light
 
+/* Backgrounds */
 .bg
     &-none
         background-color: none
@@ -58,9 +63,116 @@
     &-light
         background-color: $light
 
+/* Colors */
 .primary
     color: $primary
 .dark
     color: $dark
 .light
-    color: $light
+    color: $light
+
+/* Padding */
+.p
+    &-none
+        padding: none
+    &-0
+        padding: $ms-0
+    &-1
+        padding: $ms-1
+    &-2
+        padding: $ms-2
+    &h
+        &-0
+            padding: 0 $ms-0
+        &-1
+            padding: 0 $ms-1
+        &-2
+            padding: 0 $ms-2
+    &v
+        &-0
+            padding: $ms-0 0
+        &-1
+            padding: $ms-1 0
+        &-2
+            padding: $ms-2 0
+    &t
+        &-0
+            padding-top: $ms-0
+        &-1
+            padding-top: $ms-1
+        &-2
+            padding-top: $ms-2
+    &b
+        &-0
+            padding-bottom: $ms-0
+        &-1
+            padding-bottom: $ms-1
+        &-2
+            padding-bottom: $ms-2
+    &l
+        &-0
+            padding-left: $ms-0
+        &-1
+            padding-left: $ms-1
+        &-2
+            padding-left: $ms-2
+    &r
+        &-0
+            padding-right: $ms-0
+        &-1
+            padding-right: $ms-1
+        &-2
+            padding-right: $ms-2
+
+/* Margin */
+.m
+    &-none
+        margin: none
+    &-0
+        margin: $ms-0
+    &-1
+        margin: $ms-1
+    &-2
+        margin: $ms-2
+    &h
+        &-0
+            margin: 0 $ms-0
+        &-1
+            margin: 0 $ms-1
+        &-2
+            margin: 0 $ms-2
+    &v
+        &-0
+            margin: $ms-0 0
+        &-1
+            margin: $ms-1 0
+        &-2
+            margin: $ms-2 0
+    &t
+        &-0
+            margin-top: $ms-0
+        &-1
+            margin-top: $ms-1
+        &-2
+            margin-top: $ms-2
+    &b
+        &-0
+            margin-bottom: $ms-0
+        &-1
+            margin-bottom: $ms-1
+        &-2
+            margin-bottom: $ms-2
+    &l
+        &-0
+            margin-left: $ms-0
+        &-1
+            margin-left: $ms-1
+        &-2
+            margin-left: $ms-2
+    &r
+        &-0
+            margin-right: $ms-0
+        &-1
+            margin-right: $ms-1
+        &-2
+            margin-right: $ms-2