Features/130 (#61)

* fix timeline positioning

* fix input padding container

* chore cleanup

* Update package.json

* fix pkg version

* chore update dist file

* fix default sizing for icons

* doc add some documentation and  instructions

* update dist files

* feat add mg-gap for flex grids

* doc update

* Update readme.md

* Update readme.md

* Update readme.md

* Update readme.md

* update doc

* doc update to dynamic pkg version

* doc update doc

* doc reorg doc grid section

* doc reorg nav menu

---------

Co-authored-by: medevod <medevod@github.com>

demo/index.css

@@ -66,6 +66,7 @@ header {
 }
 
 .grid-cel {
+  font-weight: bold;
   width: 100%;
   background-color: var(--mg-color-primary);
   color: var(--mg-color-light);

demo/index.html

@@ -73,7 +73,7 @@
     <div class="mg-light">
       <h1 class="mg-text-bolder">Mg+</h1>
       <h2>A micro CSS library <span class="mg-text-m mg-badge"> $PACKAGE_VERSION</span></h2>
-      <h3>Build websites with just a few drops of CSS</h3>
+      <h3>Build pretty websites with just a few drops of CSS</h3>
       <a class="mg-button" href="https://github.com/mgpluscss/mgplus">Github <i class="mg-icon svg-icon-github"></i>
 
     </div>
@@ -95,29 +95,34 @@ <h3>Build websites with just a few drops of CSS</h3>
   <main class="mg-container">
     <include src="demo/sections/intro-section.html"></include>
     <include src="demo/sections/getting-started.html"></include>
+    <h1>Examples</h1>
+    <p>Explore the various examples provided in the documentation to see how you can use Mg+ to build your web
+      interface. Each example demonstrates the usage of different components and utilities to help you get started
+      quickly.</p>
+    <p>We hope you find Mg+ useful and easy to work with. Happy coding!</p>
     <include src="demo/sections/core-section.html"></include>
-    <include src="demo/sections/grid-section.html"> </include>
-    <include src="demo/sections/dropdown-section.html"></include>
-    <include src="demo/sections/radio-section.html"></include>
+    <include src="demo/sections/alert-section.html"> </include>
+    <include src="demo/sections/badge-section.html"> </include>
     <include src="demo/sections/check-section.html"></include>
-    <include src="demo/sections/toggle-section.html"> </include>
-    <include src="demo/sections/select-section.html"> </include>
+    <include src="demo/sections/collapse-section.html"></include>
+    <include src="demo/sections/colors-section.html"></include>
+    <include src="demo/sections/dropdown-section.html"></include>
+    <include src="demo/sections/form-section.html"></include>
+    <include src="demo/sections/grid-section.html"> </include>
     <include src="demo/sections/group-section.html"></include>
-    <include src="demo/sections/range-section.html"></include>
-    <include src="demo/sections/progress-section.html"></include>
+    <include src="demo/sections/helpers-section.html"></include>
+    <include src="demo/sections/icons-section.html"></include>
     <include src="demo/sections/input-section.html"></include>
-    <include src="demo/sections/form-section.html"></include>
-    <include src="demo/sections/alert-section.html"> </include>
-    <include src="demo/sections/badge-section.html"> </include>
     <include src="demo/sections/loader-section.html"></include>
     <include src="demo/sections/modal-section.html"></include>
     <include src="demo/sections/nav-section.html"></include>
+    <include src="demo/sections/progress-section.html"></include>
+    <include src="demo/sections/radio-section.html"></include>
+    <include src="demo/sections/range-section.html"></include>
+    <include src="demo/sections/select-section.html"> </include>
     <include src="demo/sections/tab-section.html"></include>
-    <include src="demo/sections/collapse-section.html"></include>
     <include src="demo/sections/timeline-section.html"> </include>
-    <include src="demo/sections/icons-section.html"></include>
-    <include src="demo/sections/colors-section.html"></include>
-    <include src="demo/sections/helpers-section.html"></include>
+    <include src="demo/sections/toggle-section.html"> </include>
   </main>
   <footer>
     <div class="mg-block mg-text-center">

demo/sections/alert-section.html

@@ -1,5 +1,7 @@
 <section id="alert">
   <h2>Alert</h2>
+  <p>Alerts are used to display important information to the user. They are used to display important information to the
+    user. They are used to display important information to the user.</p>
   <div data-toggle="htmlpreview">
     <div class="mg-alert">
       <i class="mg-icon icon-close mg-icon--action mg-right"></i>

demo/sections/badge-section.html

@@ -1,5 +1,7 @@
 <section id="badges">
   <h2>Badges</h2>
+  <p>Badges are used to display important information to the user. They are used to display important information to the
+    user. They are used to display important information to the user.</p>
   <h3>Default appearance</h3>
   <div id="badges-example" data-toggle="htmlpreview">
     <span class="mg-badge">default</span>

demo/sections/check-section.html

@@ -1,5 +1,8 @@
 <section id="check">
   <h2>Check</h2>
+  <p>This section showcases the different states of checkboxes in our design system. Checkboxes are used to allow users
+    to select options or make choices. Below, you will find examples of checkboxes in their default, checked, and
+    disabled states.</p>
   <div class="mg-row" id="check-example" data-toggle="htmlpreview">
     <label class="mg-check">
       on

demo/sections/collapse-section.html

@@ -1,5 +1,8 @@
 <section id="Collapse">
   <h2>Collapse</h2>
+  <p>This section showcases the functionality of collapsible elements in our design system. Collapsible elements are
+    used to hide or show content based on user interaction. Below, you will find examples of collapsible elements in
+    their default state, as well as examples of how to trigger the collapse and expand functionality.</p>
   <div class="mg-col mg-m6" id="collapse-example" data-toggle="htmlpreview">
     <button class="mg-button mg-button--outline mg-collapse mg-collapse--icon" data-toggle="collapse">collapse
       Button</button>

demo/sections/colors-section.html

@@ -1,5 +1,8 @@
 <section id="colors">
     <h2>Colors</h2>
+    <p>This section showcases the different colors available in our design system. These colors are used to create a
+        cohesive and visually appealing design. Below, you will find examples of how to use these colors in various
+        elements and components.</p>
     <div data-toggle="htmlpreview">
         <div class="mg-container  mg-initial">
             <div class="mg-row mg-x12  mg-text-bold mg-text-center mg-x--between">