deat: temp dev branch

common.css

@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-@import url("https://tender-mccarthy-d4aa39.netlify.app/component.css");
+@import url("https://deploy-preview-36--tender-mccarthy-d4aa39.netlify.app/component.css");
 
 * {
   margin: 0;
@@ -76,6 +76,7 @@ body {
 .component-wrapper {
   margin: 1rem 0;
   border: 1px solid var(--dark-theme-light-color);
+  overflow: hidden;
 }
 
 .code-snippet {

document/alert/alert.html

@@ -87,6 +87,22 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a>
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+             >Modal</a>
+
+          <a
+            class="d-block btn-link components"
+            href="/document/grid/grid.html"
+            >Grid Simplified</a
+          >
         </nav>
       </div>
 

document/avatar/avatar.html

@@ -84,6 +84,24 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a>
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="avatar" class="content margin-sm">

document/badges/badges.html

@@ -95,6 +95,24 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+           <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="badges" class="content margin-sm">

document/button/button.html

@@ -90,6 +90,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+          >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="button" class="content margin-sm">

document/card/card.html

@@ -92,6 +92,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="card" class="content margin-sm">

document/form/form.html

@@ -84,6 +84,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+
+        <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="form" class="content margin-sm">

document/grid/grid.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Super UI | Grid</title>
+    <link rel="stylesheet" href="/gist.css" />
+    <link rel="stylesheet" href="/common.css" />
+  </head>
+  <body>
+    <!------------------ grid-container---------------->
+
+    <div class="grid-container">
+      <header class="container-fluid header-container">
+        <a class="btn-link" href="/">
+          <h1 class="header-title head-xl">Super UI</h1>
+        </a>
+        <nav class="main-nav-bar">
+          <a class="btn-link text-md" href="/">Home</a>
+          <a class="btn-link text-md" href="/document/alert/alert.html">
+            Documentation
+          </a>
+          <a class="btn-link text-md" href="/">Github</a>
+        </nav>
+      </header>
+      <div class="side-bar-container">
+        <nav class="side-bar">
+          <h1 class="head-lg margin-xs">Components</h1>
+          <a
+            class="d-block btn-link components"
+            href="/document/alert/alert.html"
+            >Alert</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/avatar/avatar.html"
+            >Avatar</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/badges/badges.html"
+            >Badges</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/button/button.html"
+            >Button</a
+          >
+          <a class="d-block btn-link components" href="/document/card/card.html"
+            >Card</a
+          >
+          <a class="d-block btn-link components" href="#image-section">Image</a>
+          <a class="d-block btn-link components" href="/document/form/form.html"
+            >Form</a
+          >
+          <a class="d-block btn-link components" href="/document/list/list.html"
+            >List</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/text_utilities/text_utilities.html"
+          >
+            Text Utilities
+          </a>
+          <a
+            class="d-block btn-link components"
+            href="/document/navigation/navigation.html"
+            >Navigation</a
+          >
+          <a class="d-block btn-link components active-component" href="#toast"
+            >Toast</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/rating/rating.html"
+            >Rating</a
+          >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+            class="d-block btn-link components"
+            href="#grid_simplified"
+            >Grid Simplified</a
+          >
+        </nav>
+      </div>
+      <section id="grid_simplified" class="content margin-sm">
+        <h1 class="head-xl">Grid Simplified</h1>
+        <p class="text-sm text-gray">
+            Use grid when you want sections in view. Check below some examples of side by side cards.
+        </p>
+
+        <h2 class="head-md">Example of 2 column layout</h2>
+        <p class="text-sm text-gray">
+            Add grid-2-col class on wrapper div which is wrapping 2 divs and grid-item for the individual grid children
+        </p>
+
+         <!--------------------grid-2-column components ------------------------>
+
+        <div class="component-wrapper padding-xs border-radius-xs d-flex">
+            <div class="grid-2-col margin-md">
+                <div class="grid-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime dicta, maiores eaque provident minima quibusdam sint optio commodi nemo reiciendis blanditiis animi tempora beatae amet, officia rem reprehenderit dignissimos nisi.</div>
+                <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore iusto cupiditate error quas, incidunt nisi cum, culpa molestiae laudantium enim consequatur aperiam vitae distinctio quod numquam, voluptate earum. Fuga, delectus.</div>
+              </div>
+        </div>
+         <!--------------------grid-2-column components code ------------------------>
+
+        <div class="code-snippet">
+            <script src="https://gist.github.com/dev-prabhat/f86bae8ca42ace7e05404dae813306fb.js"></script>
+        </div>
+
+        <h2 class="head-md">Example of 3 column layout</h2>
+        <p class="text-sm text-gray">
+            Add grid-3-col class on wrapper div which is wrapping 3 divs and grid-item for the individual grid children
+        </p>
+
+         <!--------------------grid-2-column components ------------------------>
+        <div class="component-wrapper padding-xs border-radius-xs d-flex">
+        <div class="grid-3-col margin-md">
+            <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptate adipisci facere officiis corporis deserunt provident distinctio voluptates voluptas labore a assumenda veritatis itaque aperiam fuga, exercitationem ipsum maxime vitae?</div>
+            <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quos doloremque officia modi ipsum harum numquam. Eius sit, dolorum laboriosam exercitationem adipisci possimus, explicabo totam tempore doloremque laborum nulla necessitatibus.</div>
+            <div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quibusdam nesciunt. Facere in corporis ex temporibus quidem facilis et architecto ipsum voluptatibus quo, dolores error, eius porro quaerat neque sed?</div>
+          </div>
+        </div>
+
+        <!--------------------grid-3-column components code ------------------------>
+
+        <div class="code-snippet">
+            <script src="https://gist.github.com/dev-prabhat/5a976f0664ff87b0235f2a114843b9be.js"></script>
+          </div>
+      </section>
+    </div>
+  </body>
+</html>

document/image/image.html

@@ -84,6 +84,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="image" class="content margin-sm">

document/list/list.html

@@ -85,6 +85,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+        <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="list" class="content margin-sm">