Update for table

src/style/main.scss

@@ -246,6 +246,9 @@
 .height-100{
     height: 100%;
 }
+.height-fit-content{
+    height: fit-content;
+}
 
 .width-50{
     width: 50%;
@@ -257,3 +260,65 @@
 }
 
 
+.flex-0{
+    flex: 0;
+}
+
+// system spacing
+
+
+
+
+
+@for $i from 0 through 10 {
+
+    $size: $i * 5;
+    
+    $properties:
+      "margin" "m",
+      "padding" "p";
+  
+    @each $property, $short in $properties {
+      // all directions
+      .#{$short}a-#{$size} {
+        #{$property}-left: #{$size}px !important; 
+        #{$property}-right: #{$size}px !important;
+        #{$property}-top: #{$size}px !important; 
+        #{$property}-bottom: #{$size}px !important;
+      }
+      // top
+      .#{$short}t-#{$size} {
+        #{$property}-top: #{$size}px !important
+      }
+      // bottom
+      .#{$short}b-#{$size} {
+        #{$property}-bottom: #{$size}px !important
+      }
+      // left
+      .#{$short}l-#{$size} {
+        #{$property}-left: #{$size}px!important
+      }
+      // right
+      .#{$short}r-#{$size} {
+        #{$property}-right: #{$size}px!important
+      }
+      // left and right
+      .#{$short}x-#{$size} {
+        #{$property}-left: #{$size}px!important;
+        #{$property}-right: #{$size}px!important;
+      }
+      // top and bottom
+      .#{$short}y-#{$size} {
+        #{$property}-top: #{$size}px !important;
+        #{$property}-bottom: #{$size}px !important;
+      }
+  
+    }
+  }
+
+
+  @for $i from 0 through 50 {
+    .font-#{$i} {
+        font-size: #{$i}px ;
+    }
+  }

src/style/readme.md

@@ -134,4 +134,47 @@
 <br>
 <ul>
   <li><strong>.float-left</strong></li> <li><strong>.float-right</strong></li> 
-</ul>
+</ul>
+
+
+
+
+
+##  <span id="Spacing">Spacing</span>
+<br>
+
+<p>The helper classes apply <strong>margin</strong> or <strong>padding</strong> to an element ranging from <em>0 to 5</em>. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format <code>{property}{direction}-{size}</code>.</p>
+
+<p>The <strong>property</strong> applies the type of spacing:</p>
+
+<div ><ul>
+<li><code>m</code> - applies <code>margin</code></li>
+<li><code>p</code> - applies <code>padding</code></li>
+</ul>
+</div>
+
+<p>The <strong>direction</strong> designates the side the property applies to:</p>
+
+<div ><ul>
+<li><code>t</code> - applies the spacing for <code>*-top</code></li>
+<li><code>b</code> - applies the spacing for <code>*-bottom</code></li>
+<li><code>l</code> - applies the spacing for <code>*-left</code></li>
+<li><code>r</code> - applies the spacing for <code>*-right</code></li>
+<li><code>x</code> - applies the spacing for both <code>*-left</code> and <code>*-right</code></li>
+<li><code>y</code> - applies the spacing for both <code>*-top</code> and <code>*-bottom</code></li>
+<li><code>a</code> - applies the spacing for the property in all directions</li>
+</ul>
+</div>
+<p>The <strong>size</strong> controls the increment of the property:</p>
+
+
+Example:
+
+```html
+<template>
+  <div>
+    <span class="pl-3">Test</span><br>
+    <span  class="ml-5 "
+    >Test</span>
+  <div>
+</template>