Merge pull request #17 from maitrakhatri/components-file-structure

restructured the entire documentation
maitrakhatri · Feb 9, 2022 · 14eff8c · 14eff8c
2 parents 362dd2c + 159febd
commit 14eff8c
Show file tree

Hide file tree

Showing 18 changed files with 1,625 additions and 922 deletions.
diff --git a/JS/app.js → JS/slider.js b/JS/app.js → JS/slider.js
@@ -5,4 +5,4 @@ const output = document.getElementById("slider-value");
 output.innerHTML = slider.value; // Display the default slider value
 
 // Update the current slider value (each time you drag the slider handle)
-slider.addEventListener("input", () => output.innerText = slider.value );
+slider.addEventListener("input", () => output.innerHTML = slider.value);
diff --git a/docs/components.html b/docs/components.html
diff --git a/docs/components/alert.html b/docs/components/alert.html
@@ -0,0 +1,120 @@
+<!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">
+    <meta name="title" content="gozo-UI | Maitra Khatri">
+    <meta name="description" content="gozo UI is a Simple Ready to use CSS Component Library.">
+    <title>gozo UI | Alert</title>
+    <link rel="stylesheet" href="../docs.css">
+    <link rel="icon" type="image/x-icon" href="../../assets/gozo-logo-540p.ico">
+</head>
+<body>
+
+    <nav>
+        <div class="nav-header">
+            <a href="../../index.html" rel="noopener noreferrer">gozo</a>
+        </div>
+        <div class="nav-links">
+            <div class="nav-item">
+                <a href="../gettingStarted.html" rel="noopener noreferrer">Get Started</a>
+            </div>
+            <div class="nav-item">
+                <a href="../components.html" rel="noopener noreferrer">Docs</a>
+            </div>
+            <div class="nav-items">
+                <a href="https://github.com/maitrakhatri/gozo-UI" target="_blank" rel="noopener noreferrer"><img src="../assets/GitHub-Mark-32px.png" alt="GitHub Link"></a>
+            </div>
+        </div>
+    </nav>
+
+    <aside class="sidebar">
+
+            <a href="../gettingStarted.html">Getting Started</a>
+            <a href="../designSystem.html">Design System</a>
+            <a class="sidebar-header" href="../components.html">Components</a>
+            <a class="sidebar-components" href="./alert.html" id="active">Alert</a>
+            <a class="sidebar-components" href="./avatar.html">Avatar</a>
+            <a class="sidebar-components" href="./badge.html">Badge</a>
+            <a class="sidebar-components" href="./button.html">Button</a>
+            <a class="sidebar-components" href="./card.html">Card</a>
+            <a class="sidebar-components" href="./image.html">Image</a>
+            <a class="sidebar-components" href="./input.html">Input</a>
+            <a class="sidebar-components" href="./navigation.html">Navigation</a>
+            <a class="sidebar-components" href="./simplified-grid.html">Simplified Grid</a>
+            <a class="sidebar-components" href="./slider.html">Slider</a>
+            <a class="sidebar-components" href="./text-utilities.html">Text Utilities</a>
+            <a class="sidebar-components" href="./utilities.html"> Utilities</a>
+    </aside>
+
+    <main>
+        <div class="section">
+            <h2 class="section-title">Alert</h2>
+            <p>An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.</p>
+
+            <h3 class="sub-section-title">Filled Alert</h3>
+
+            <div class="component-container alert-container">
+
+                <div class="alert bg-blue text-white">
+                    This is a Primary Alert !!
+                </div>
+
+                <div class="alert bg-lightblue text-white">
+                    This is a Secondary Alert !!
+                </div>
+
+                <div class="alert bg-green text-white">
+                    This is a Success Alert !!
+                </div>
+
+                <div class="alert bg-yellow text-white">
+                    This is a Warning Alert !!
+                </div>
+
+                <div class="alert bg-red text-white">
+                    This is a Danger Alert !!
+                </div>
+
+            </div>
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522alert%2520bg-blue%2520text-white%2522%253E%250A%2520%2520%2520%2520This%2520is%2520a%2520Primary%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520bg-lightblue%2520text-white%2522%253E%250A%2520%2520%2520%2520This%2520is%2520a%2520Secondary%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520bg-green%2520text-white%2522%253E%250A%2520%2520%2520%2520This%2520is%2520a%2520Success%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520bg-yellow%2520text-white%2522%253E%250A%2520%2520%2520%2520This%2520is%2520a%2520Warning%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520bg-red%2520text-white%2522%253E%250A%2520%2520%2520%2520This%2520is%2520a%2520Danger%2520Alert%2520%21%21%250A%253C%252Fdiv%253E" style="width: 496px; height: 523px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
+
+
+            </div>
+
+            <h3 class="sub-section-title">Outline Alert</h3>
+            <div class="component-container alert-container">
+
+                <div class="alert outline-blue text-blue">
+                    This is an outline Primary Alert !!
+                </div>
+
+                <div class="alert outline-lightblue text-lightblue">
+                    This is an outline Secondary Alert !!
+                </div>
+
+                <div class="alert outline-green text-green">
+                    This is an outline Success Alert !!
+                </div>
+
+                <div class="alert outline-yellow text-yellow">
+                    This is an outline Warning Alert !!
+                </div>
+
+                <div class="alert outline-red text-red">
+                    This is an outline Danger Alert !!
+                </div>
+
+            </div>
+
+            <div class="code-snippets">
+
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522alert%2520outline-blue%2520text-blue%2522%253E%250A%2520%2520%2520%2520This%2520is%2520an%2520outline%2520Primary%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520outline-lightblue%2520text-lightblue%2522%253E%250A%2520%2520%2520%2520This%2520is%2520an%2520outline%2520Secondary%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520outline-green%2520text-green%2522%253E%250A%2520%2520%2520%2520This%2520is%2520an%2520outline%2520Success%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520outline-yellow%2520text-yellow%2522%253E%250A%2520%2520%2520%2520This%2520is%2520an%2520outline%2520Warning%2520Alert%2520%21%21%250A%253C%252Fdiv%253E%250A%250A%253Cdiv%2520class%253D%2522alert%2520outline-red%2520text-red%2522%253E%250A%2520%2520%2520%2520This%2520is%2520an%2520outline%2520Danger%2520Alert%2520%21%21%250A%253C%252Fdiv%253E" style="width: 572px; height: 523px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
+
+            </div>
+    </div>
+    </main>
+</body>
+</html>
diff --git a/docs/components/avatar.html b/docs/components/avatar.html
@@ -0,0 +1,88 @@
+<!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">
+    <meta name="title" content="gozo-UI | Maitra Khatri">
+    <meta name="description" content="gozo UI is a Simple Ready to use CSS Component Library.">
+    <title>gozo UI | Avatar</title>
+    <link rel="stylesheet" href="../docs.css">
+    <link rel="icon" type="image/x-icon" href="../../assets/gozo-logo-540p.ico">
+</head>
+<body>
+
+    <nav>
+        <div class="nav-header">
+            <a href="../../index.html" rel="noopener noreferrer">gozo</a>
+        </div>
+        <div class="nav-links">
+            <div class="nav-item">
+                <a href="../gettingStarted.html" rel="noopener noreferrer">Get Started</a>
+            </div>
+            <div class="nav-item">
+                <a href="../components.html" rel="noopener noreferrer">Docs</a>
+            </div>
+            <div class="nav-items">
+                <a href="https://github.com/maitrakhatri/gozo-UI" target="_blank" rel="noopener noreferrer"><img src="../assets/GitHub-Mark-32px.png" alt="GitHub Link"></a>
+            </div>
+        </div>
+    </nav>
+
+    <aside class="sidebar">
+
+        <a href="../gettingStarted.html">Getting Started</a>
+        <a href="../designSystem.html">Design System</a>
+        <a class="sidebar-header" href="../components.html">Components</a>
+        <a class="sidebar-components" href="./alert.html">Alert</a>
+        <a class="sidebar-components" href="./avatar.html"  id="active">Avatar</a>
+        <a class="sidebar-components" href="./badge.html">Badge</a>
+        <a class="sidebar-components" href="./button.html">Button</a>
+        <a class="sidebar-components" href="./card.html">Card</a>
+        <a class="sidebar-components" href="./image.html">Image</a>
+        <a class="sidebar-components" href="./input.html">Input</a>
+        <a class="sidebar-components" href="./navigation.html">Navigation</a>
+        <a class="sidebar-components" href="./simplified-grid.html">Simplified Grid</a>
+        <a class="sidebar-components" href="./slider.html">Slider</a>
+        <a class="sidebar-components" href="./text-utilities.html">Text Utilities</a>
+        <a class="sidebar-components" href="./utilities.html"> Utilities</a>
+    </aside>
+
+    <main>
+        <div id="avatar" class="section">
+            <h2 class="section-title">Avatar</h2>
+            <p>Avatars are used to identify movers and for users to navigate to find their profile, account and details.</p>
+
+            <h3 class="sub-section-title">Round Avatar</h3>
+
+            <div class="component-container avatar-container">
+                <img class="avatar avatar-round" src="../../../../assets/avatar.svg" alt="avatar">
+                <img class="avatar-xl avatar-round" src="../../../../assets/avatar.svg" alt="avatar">
+                <img class="avatar-xxl avatar-round" src="../../../../assets/avatar.svg" alt="avatar">
+            </div>
+
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cimg%2520class%253D%2522avatar%2520avatar-round%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar%2522%253E%250A%253Cimg%2520class%253D%2522avatar-xl%2520avatar-round%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar-xl%2522%253E%250A%253Cimg%2520class%253D%2522avatar-xxl%2520avatar-round%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar-xxl%2522%253E" style="width: 673px; height: 225px; border:0; transform: scale(1); overflow:hidden;"sandbox="allow-scripts allow-same-origin"></iframe>
+
+            </div>
+
+            <h3 class="sub-section-title">Square Avatar</h3>
+
+
+            <div class="component-container avatar-container">
+                <img class="avatar avatar-square" src="../../../../assets/avatar.svg" alt="avatar">
+                <img class="avatar-xl avatar-square" src="../../../../assets/avatar.svg" alt="avatar">
+                <img class="avatar-xxl avatar-square" src="../../../../assets/avatar.svg" alt="avatar">
+            </div>
+
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cimg%2520class%253D%2522avatar%2520avatar-square%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar%2522%253E%250A%253Cimg%2520class%253D%2522avatar-xl%2520avatar-square%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar-xl%2522%253E%250A%253Cimg%2520class%253D%2522avatar-xxl%2520avatar-square%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar-xxl%2522%253E" style="width: 681px; height: 225px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe>
+
+            </div>
+
+    </div>
+    </main>
+
+
+</body>
+</html>