Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

restructured the entire documentation #17

Merged
merged 2 commits into from
Feb 9, 2022
Merged

restructured the entire documentation #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c7fd616
restructured the entire documentation for better navigation and fast …
maitrakhatri Feb 9, 2022
159febd
added footer
maitrakhatri Feb 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion JS/app.js → JS/slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
927 changes: 29 additions & 898 deletions docs/components.html
View file
Open in desktop

Large diffs are not rendered by default.

120 changes: 120 additions & 0 deletions docs/components/alert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
88 changes: 88 additions & 0 deletions docs/components/avatar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading