Skip to content

Docs/website UI documentation #5

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

Closed
amerah-abdul wants to merge 4 commits into from
Closed

Docs/website UI documentation #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
52d97cd
docs: Add comprehensive UI documentation with components, elements, a…
amerah-abdul Dec 31, 2024
9183417
feat: Add modern UI components and styling for Express example
amerah-abdul Dec 31, 2024
3bd4c08
feat: Add UI assets for documentation and Express example
amerah-abdul Dec 31, 2024
106a270
add remaining files
amerah-abdul Dec 31, 2024
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
119 changes: 119 additions & 0 deletions docs/ui/components/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ink UI - Button Components</title>
<link rel="stylesheet" href="../../styles/main.css">
<style>
.component-demo {
padding: 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin: 1rem 0;
}
.variant-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.code-example {
background: #f5f5f5;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
.props-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.props-table th, .props-table td {
padding: 0.75rem;
border: 1px solid #e0e0e0;
text-align: left;
}
.props-table th {
background: #f5f5f5;
}
</style>
</head>
<body>
<header>
<nav>
<a href="../index.html">← Back to Documentation</a>
</nav>
<h1>Button Components</h1>
</header>

<main>
<section>
<h2>Basic Button</h2>
<div class="component-demo">
<button class="primary">Primary Button</button>
<button class="secondary">Secondary Button</button>
<button class="text">Text Button</button>
</div>
<div class="code-example">
<pre><code>&lt;button class="primary"&gt;Primary Button&lt;/button&gt;
&lt;button class="secondary"&gt;Secondary Button&lt;/button&gt;
&lt;button class="text"&gt;Text Button&lt;/button&gt;</code></pre>
</div>
</section>

<section>
<h2>Button Variants</h2>
<div class="variant-grid">
<div>
<h3>Sizes</h3>
<button class="primary small">Small</button>
<button class="primary">Medium</button>
<button class="primary large">Large</button>
</div>
<div>
<h3>States</h3>
<button class="primary">Normal</button>
<button class="primary" disabled>Disabled</button>
<button class="primary loading">Loading</button>
</div>
</div>
</section>

<section>
<h2>Props & Customization</h2>
<table class="props-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>primary</td>
<td>Primary action button style</td>
<td>-</td>
</tr>
<tr>
<td>secondary</td>
<td>Secondary action button style</td>
<td>-</td>
</tr>
<tr>
<td>small</td>
<td>Small button size</td>
<td>-</td>
</tr>
<tr>
<td>large</td>
<td>Large button size</td>
<td>-</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>
137 changes: 137 additions & 0 deletions docs/ui/components/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ink UI - Form Components</title>
<link rel="stylesheet" href="../../styles/main.css">
<style>
.component-demo {
padding: 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin: 1rem 0;
}
.form-grid {
display: grid;
gap: 1.5rem;
}
.code-example {
background: #f5f5f5;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
.props-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.props-table th, .props-table td {
padding: 0.75rem;
border: 1px solid #e0e0e0;
text-align: left;
}
.props-table th {
background: #f5f5f5;
}
</style>
</head>
<body>
<header>
<nav>
<a href="../index.html">← Back to Documentation</a>
</nav>
<h1>Form Components</h1>
</header>

<main>
<section>
<h2>Basic Form Elements</h2>
<div class="component-demo">
<form class="form-grid">
<div class="form-group">
<label>Text Input</label>
<input type="text" placeholder="Enter text">
</div>
<div class="form-group">
<label>Select</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<label>Textarea</label>
<textarea placeholder="Enter long text"></textarea>
</div>
<div class="form-group">
<label class="checkbox">
<input type="checkbox">
<span>Checkbox option</span>
</label>
</div>
</form>
</div>
<div class="code-example">
<pre><code>&lt;form class="form-grid"&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Text Input&lt;/label&gt;
&lt;input type="text" placeholder="Enter text"&gt;
&lt;/div&gt;
&lt;!-- More form elements... --&gt;
&lt;/form&gt;</code></pre>
</div>
</section>

<section>
<h2>Form Validation</h2>
<div class="component-demo">
<form class="form-grid">
<div class="form-group">
<label>Email</label>
<input type="email" required placeholder="Enter email">
<span class="error">Please enter a valid email</span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" required placeholder="Enter password">
<span class="helper">Password must be at least 8 characters</span>
</div>
</form>
</div>
</section>

<section>
<h2>Props & Classes</h2>
<table class="props-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>form-group</td>
<td>Container for form elements</td>
<td>&lt;div class="form-group"&gt;</td>
</tr>
<tr>
<td>error</td>
<td>Error message styling</td>
<td>&lt;span class="error"&gt;</td>
</tr>
<tr>
<td>helper</td>
<td>Helper text styling</td>
<td>&lt;span class="helper"&gt;</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>
141 changes: 141 additions & 0 deletions docs/ui/components/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ink UI - Layout Components</title>
<link rel="stylesheet" href="../../styles/main.css">
<style>
.component-demo {
padding: 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin: 1rem 0;
}
.demo-box {
padding: 1rem;
background: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
}
.code-example {
background: #f5f5f5;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
.grid-demo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.flex-demo {
display: flex;
gap: 1rem;
}
.props-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.props-table th, .props-table td {
padding: 0.75rem;
border: 1px solid #e0e0e0;
text-align: left;
}
.props-table th {
background: #f5f5f5;
}
</style>
</head>
<body>
<header>
<nav>
<a href="../index.html">← Back to Documentation</a>
</nav>
<h1>Layout Components</h1>
</header>

<main>
<section>
<h2>Grid Layout</h2>
<div class="component-demo">
<div class="grid-demo">
<div class="demo-box">Column 1</div>
<div class="demo-box">Column 2</div>
<div class="demo-box">Column 3</div>
</div>
</div>
<div class="code-example">
<pre><code>&lt;div class="grid-demo"&gt;
&lt;div class="demo-box"&gt;Column 1&lt;/div&gt;
&lt;div class="demo-box"&gt;Column 2&lt;/div&gt;
&lt;div class="demo-box"&gt;Column 3&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</section>

<section>
<h2>Flex Layout</h2>
<div class="component-demo">
<div class="flex-demo">
<div class="demo-box">Flex Item 1</div>
<div class="demo-box">Flex Item 2</div>
<div class="demo-box">Flex Item 3</div>
</div>
</div>
<div class="code-example">
<pre><code>&lt;div class="flex-demo"&gt;
&lt;div class="demo-box"&gt;Flex Item 1&lt;/div&gt;
&lt;div class="demo-box"&gt;Flex Item 2&lt;/div&gt;
&lt;div class="demo-box"&gt;Flex Item 3&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</section>

<section>
<h2>Container</h2>
<div class="component-demo">
<div class="container">
<div class="demo-box">Contained Content</div>
</div>
</div>
<div class="code-example">
<pre><code>&lt;div class="container"&gt;
&lt;div class="content"&gt;Contained Content&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</section>

<section>
<h2>Layout Classes</h2>
<table class="props-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
<th>Properties</th>
</tr>
</thead>
<tbody>
<tr>
<td>container</td>
<td>Centers content with max-width</td>
<td>max-width: 1200px</td>
</tr>
<tr>
<td>grid-demo</td>
<td>Basic grid layout</td>
<td>display: grid</td>
</tr>
<tr>
<td>flex-demo</td>
<td>Basic flex layout</td>
<td>display: flex</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>
Loading
Loading