23 KiB
23 KiB
ASCII Patterns - Visual Toolkit
Complete library of ASCII characters and patterns for uxscii components.
Box-Drawing Characters
Basic Borders
Light (Default)
┌─────┐
│ Box │
└─────┘
Characters: ┌ ─ ┐ │ └ ┘
Rounded (Friendly)
╭─────╮
│ Box │
╰─────╯
Characters: ╭ ─ ╮ │ ╰ ╯
Double (Emphasis)
╔═════╗
║ Box ║
╚═════╝
Characters: ╔ ═ ╗ ║ ╚ ╝
Heavy (Strong)
┏━━━━━┓
┃ Box ┃
┗━━━━━┛
Characters: ┏ ━ ┓ ┃ ┗ ┛
Complex Borders
With Dividers
┌─────────┬─────────┐
│ Col 1 │ Col 2 │
├─────────┼─────────┤
│ Data │ Data │
└─────────┴─────────┘
Nested
╭─────────────────╮
│ Outer │
│ ┌─────────────┐ │
│ │ Inner │ │
│ └─────────────┘ │
╰─────────────────╯
Component State Patterns
Buttons
Default
▓▓▓▓▓▓▓▓▓▓
▓ Click ▓
▓▓▓▓▓▓▓▓▓▓
Hover (Highlighted)
░▓▓▓▓▓▓▓▓▓▓░
░▓ Click ▓░
░▓▓▓▓▓▓▓▓▓▓░
Focus (Ring)
┏━━━━━━━━━━┓✨
┃ Click ┃
┗━━━━━━━━━━┛
Disabled (Grayed)
┌ ─ ─ ─ ─ ┐
│ Click │
└ ─ ─ ─ ─ ┘
Pressed/Active
▓▓▓▓▓▓▓▓▓▓
▓▓Click ▓▓
▓▓▓▓▓▓▓▓▓▓
Form Inputs
Text Input (Empty)
[____________________]
Text Input (Filled)
[john@example.com ]
Text Input (Focus)
┏━━━━━━━━━━━━━━━━━━━━┓
┃john@example.com│ ┃
┗━━━━━━━━━━━━━━━━━━━━┛
Text Input (Error)
[invalid-email ]⚠️
❌ Please enter valid email
Text Input (Success)
[john@example.com ]✅
Text Input (Disabled)
[────────────────────]
Password (Masked)
[•••••••• ]
Password (With Toggle)
[•••••••• ]👁️
Checkboxes & Radios
Checkbox (Unchecked)
[□] Option 1
Checkbox (Checked)
[✓] Option 1
Checkbox (Indeterminate)
[▬] Option 1
Radio (Unselected)
○ Option A
Radio (Selected)
◉ Option A
Selects & Dropdowns
Select (Closed)
[Choose option ▼]
Select (Open)
[Current option ▼]
╭────────────────╮
│ Option 1 │
│ ● Option 2 │
│ Option 3 │
╰────────────────╯
Sliders
Slider (Basic)
├────────●───────┤
0% 100%
Slider (With Value)
├────────●───────┤ 45%
Range Slider
├────●────●──────┤
20% 80%
Status Indicators
Icons
Success: ✅ ✓ ● Error: ❌ ✗ ⚠️ ⛔ Warning: ⚠️ ⚡ △ Info: ℹ️ ⓘ ◉ Loading: ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏
Progress Bars
Loading (40%)
████▓▓▓▓▓▓ 40%
Loading (Indeterminate)
▓▓▓░░░░░░░
Steps
● ━━━ ● ━━━ ○ ━━━ ○
Badges
Count Badge
[Inbox] ●3
Status Badge
● Online
○ Offline
Label Badge
▓ New ▓
Data Display
Lists
Unordered
• Item 1
• Item 2
• Item 3
Ordered
1. First
2. Second
3. Third
Nested
• Parent
├─ Child 1
├─ Child 2
└─ Child 3
Tables
Simple
┌─────┬─────┬─────┐
│ A │ B │ C │
├─────┼─────┼─────┤
│ 1 │ 2 │ 3 │
│ 4 │ 5 │ 6 │
└─────┴─────┴─────┘
With Header
╔═══════╦═══════╦═══════╗
║ Name ║ Email ║ Status║
╠═══════╬═══════╬═══════╣
║ Alice ║ a@... ║ ✓ ║
║ Bob ║ b@... ║ ○ ║
╚═══════╩═══════╩═══════╝
Cards
Basic
╭─────────────╮
│ Title │
├─────────────┤
│ Content... │
╰─────────────╯
With Actions
╭─────────────────────╮
│ Card Title │
├─────────────────────┤
│ Content goes here │
│ │
│ [Action] ─┐ │
╰─────────────────────╯
Metric Card
╭───────────╮
│ Revenue │
├───────────┤
│ $24,567 │
│ +12.5% ↗ │
╰───────────╯
Navigation
Tabs
Horizontal
[Active] [Tab 2] [Tab 3]
─────────
Content for active tab
Vertical
┌─ ● Tab 1
├─ ○ Tab 2
└─ ○ Tab 3
Breadcrumbs
Home > Products > Details
Pagination
‹ Prev [1] 2 3 4 5 Next ›
Menu
Dropdown
File ▼
╭──────────╮
│ New │
│ Open │
│ Save │
├──────────┤
│ Exit │
╰──────────╯
Sidebar
╭─────────╮
│ • Home │
│ • Users │
│ • Data │
│ • Info │
╰─────────╯
Modals & Overlays
Modal
Simple
╔═══════════════════╗
║ Modal Title ║
╠═══════════════════╣
║ Content here... ║
║ ║
║ [OK] [Cancel] ║
╚═══════════════════╝
With Close
╔═══════════════════╗✕
║ Title ║
╠═══════════════════╣
║ Content... ║
╚═══════════════════╝
Toast/Alert
Success
╭─────────────────╮
│ ✅ Saved! │
╰─────────────────╯
Error
╭─────────────────────╮
│ ❌ Error: Try again │
╰─────────────────────╯
Warning
╭────────────────────╮
│ ⚠️ Warning message │
╰────────────────────╯
Arrows & Indicators
Directional
↑ ↓ ← →
↗ ↘ ↙ ↖
⬆ ⬇ ⬅ ➡
▲ ▼ ◀ ▶
Trend
↗️ Up trend
→ Flat
↘️ Down trend
Expand/Collapse
▼ Expanded
▶ Collapsed
Spacing & Alignment
CRITICAL FOR SCREEN RENDERING: These rules prevent alignment issues in .rendered.md files.
1. Boundary Alignment - Content MUST Stay Inside Borders
Golden Rule: All text and content MUST be contained within component borders. Nothing floats outside.
❌ INCORRECT - Text outside borders:
╔════════════════════════════════════════╗
║ ║
║ Video Title Here ║
║ ┌─────────┐ ║
║ │ 12:34 │ ║
╚════════════════════════════└─────────┘═╝
Video Title Here ← WRONG: Outside the box!
MrBeast ✓ ← WRONG: Floating metadata!
24M views · 2 days ago
✅ CORRECT - All content inside borders:
╔════════════════════════════════════════╗
║ ║
║ Video Title Here ║
║ ┌─────────┐ ║
║ │ 12:34 │ ║
║ ║
║ Video Title Here ║
║ MrBeast ✓ ║
║ 24M views · 2 days ago ║
╚════════════════════════════════════════╝
Rule: If a box has borders, ALL related content must appear between those borders.
2. Vertical Spacing - Consistent Gaps Between Components
Standard vertical gaps:
- 1 line - Tight spacing (related items within same section)
- 2 lines - Standard spacing (between different components)
- 3 lines - Section dividers (major layout breaks)
❌ INCORRECT - Inconsistent spacing:
╭────────────╮
│ Button 1 │
╰────────────╯
╭────────────╮
│ Button 2 │
╰────────────╯
╭────────────╮
│ Button 3 │
╰────────────╯
✅ CORRECT - Consistent 2-line gaps:
╭────────────╮
│ Button 1 │
╰────────────╯
╭────────────╮
│ Button 2 │
╰────────────╯
╭────────────╮
│ Button 3 │
╰────────────╯
Nested component spacing:
╭─────────────────────────────────╮
│ Outer Container │
│ │ ← 1 line padding
│ ╭─────────────────────────╮ │
│ │ Inner Component │ │
│ ╰─────────────────────────╯ │
│ │ ← 1 line padding
╰─────────────────────────────────╯
3. Horizontal Alignment - Consistent Padding and Text Columns
Standard left padding:
- 2 characters - Minimum readable padding (compact layouts)
- 4 characters - Standard padding (default for most screens)
- 6 characters - Generous padding (spacious layouts)
❌ INCORRECT - No padding, text against border:
╭────────────────────╮
│Title │ ← No space after │
│Content here │
╰────────────────────╯
✅ CORRECT - Consistent 2-char padding:
╭────────────────────╮
│ Title │ ← 2 spaces after │
│ Content here │
╰────────────────────╯
Text column alignment:
╭──────────────────────────────────╮
│ Label: Value │ ← Aligned columns
│ Name: Sarah Johnson │
│ Email: sarah@example.com │
│ Status: Active │
╰──────────────────────────────────╯
Center alignment for titles:
╭──────────────────────────────────╮
│ │
│ Welcome Back │ ← Centered
│ Sign in to continue │ ← Centered
│ │
╰──────────────────────────────────╯
Right alignment for metadata:
╭──────────────────────────────────╮
│ Post Title │
│ u/username · 3h ago [123] │ ← Right-aligned vote count
╰──────────────────────────────────╯
4. Grid Layouts - Multi-Column Screens
2-column grid with proper spacing:
❌ INCORRECT - Inconsistent gaps, misaligned:
╭──────────╮╭──────────╮ ← No gap
│ Card 1 ││ Card 2 │
╰──────────╯╰──────────╯
╭──────────╮ ╭──────────╮ ← Different gap
│ Card 3 │ │ Card 4 │
╰──────────╯ ╰──────────╯
✅ CORRECT - Consistent 2-char gaps, aligned columns:
╭──────────╮ ╭──────────╮
│ Card 1 │ │ Card 2 │
╰──────────╯ ╰──────────╯
╭──────────╮ ╭──────────╮
│ Card 3 │ │ Card 4 │
╰──────────╯ ╰──────────╯
3-column grid:
╭────────╮ ╭────────╮ ╭────────╮
│ Card 1 │ │ Card 2 │ │ Card 3 │
╰────────╯ ╰────────╯ ╰────────╯
╭────────╮ ╭────────╮ ╭────────╮
│ Card 4 │ │ Card 5 │ │ Card 6 │
╰────────╯ ╰────────╯ ╰────────╯
Sidebar + main layout:
╭─────────╮ ╭──────────────────────────────╮
│ Sidebar │ │ Main Content │
│ │ │ │
│ • Home │ │ ╭─────────────────────╮ │
│ • Users │ │ │ Content Card │ │
│ • Data │ │ ╰─────────────────────╯ │
│ │ │ │
╰─────────╯ ╰──────────────────────────────╯
5. Screen Composition Rules
Full screen example combining all rules:
╔══════════════════════════════════════════════════════╗
║ ║
║ Screen Title ║ ← Centered, 1 line padding
║ ║
╠══════════════════════════════════════════════════════╣
║ Navigation Bar ║ ← 2-char padding
╠══════════════════════════════════════════════════════╣
║ ║ ← 1 line section gap
║ ╭────────────────────────╮ ╭────────────────────╮ ║
║ │ Left Card │ │ Right Card │ ║ ← 2-col grid, 2-char gap
║ │ │ │ │ ║
║ │ Content with 2-char │ │ Aligned content │ ║ ← All content inside borders
║ │ left padding │ │ stays in bounds │ ║
║ │ │ │ │ ║
║ ╰────────────────────────╯ ╰────────────────────╯ ║
║ ║ ← 2 line component gap
║ ║
║ ╭──────────────────────────────────────────────╮ ║
║ │ Full-width Component │ ║ ← Centered in parent
║ │ │ ║
║ │ Text content properly padded │ ║
║ │ │ ║
║ ╰──────────────────────────────────────────────╯ ║
║ ║
╚══════════════════════════════════════════════════════╝
6. Common Patterns - Feed Layouts
YouTube-style feed (CORRECT):
╔═══════════════════════════╗ ╔═══════════════════════════╗
║ ║ ║ ║
║ Thumbnail Area ║ ║ Thumbnail Area ║
║ ║ ║ ║
║ ┌────────┐ ║ ║ ┌────────┐ ║
║ │ 12:34 │ ║ ║ │ 8:45 │ ║
║ └────────┘ ║ ║ └────────┘ ║
║ ║ ║ ║
║ DON'T TRY THIS ║ ║ Watermelon Candy VS REAL ║
║ ║ ║ ║
║ MrBeast ✓ ║ ║ Crafty Panda ✓ ║
║ 24M views · 2 days ago ║ ║ 543K views · 1 day ago ║
╚═══════════════════════════╝ ╚═══════════════════════════╝
Reddit-style post feed (CORRECT):
╭──────────────────────────────────────────────────────╮
│ ▲ Which bank offers best savings in 2025? │
│ 342 │
│ ▼ Posted by u/financeguru · 3h ago │
│ │
│ I've been researching high-yield savings │
│ accounts and comparing rates... │
│ │
│ 💬 156 comments 📤 Share 🔖 Save │
╰──────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────╮
│ ▲ PSA: Chase added Zelle fraud protection │
│ 289 │
│ ▼ Posted by u/bankwatcher · 5h ago │
│ │
│ Just got an email that Chase is now offering │
│ Zelle fraud reimbursement... │
│ │
│ 💬 87 comments 📤 Share 🔖 Save │
╰──────────────────────────────────────────────────────╯
7. Overflow Handling
When content is too long:
❌ INCORRECT - Breaking borders:
╭──────────────╮
│ This is a very long title that goes past the border │
╰──────────────╯
✅ CORRECT - Truncate with ellipsis:
╭──────────────────────────╮
│ This is a very long ti...│
╰──────────────────────────╯
✅ CORRECT - Wrap within bounds:
╭──────────────────────────╮
│ This is a very long │
│ title that wraps to │
│ multiple lines │
╰──────────────────────────╯
8. Alignment Checklist for Screen Composition
Before saving any .rendered.md file, verify:
- Boundary: All text is inside component borders (no floating text)
- Vertical: Consistent gaps between components (1-3 lines)
- Horizontal: Consistent left padding (2-4 chars minimum)
- Grid: Multi-column layouts have aligned columns and consistent gaps
- Overflow: Long content is truncated or wrapped, never breaking borders
- Nested: Inner components have proper padding from outer containers
- Metadata: Related info (timestamps, counts) aligned consistently
Quick Reference - Standard Measurements
Padding (horizontal): 2-4 chars (standard)
Gaps (vertical): 1-2 lines (standard)
Grid gaps: 2 chars (between columns)
Section breaks: 3 lines
Border padding: 1 line top/bottom
Tips for Consistent Patterns
- Choose one border style per component - Don't mix light/rounded/heavy
- Use consistent spacing - Multiples of 4 characters work well
- Align related elements - Keep boxes at same width when stacked
- Test in monospace - Always preview in monospace font
- Consider state transitions - Visual changes should be clear
Copy-Paste Ready
Light box: ┌─┐│└┘
Rounded: ╭─╮│╰╯
Double: ╔═╗║╚╝
Heavy: ┏━┓┃┗┛
Checkbox: [□] [✓]
Radio: ○ ◉
Status: ✅ ❌ ⚠️ ℹ️
Arrows: ↑↓←→ ↗↘
Use these patterns to create beautiful, consistent uxscii components!