LeonMMcoset/leonwww
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs

Browse Source
This commit is contained in:
Face
2025-08-03 13:23:44 +03:00
parent 823149057a
commit cf43bac2cf
56 changed files with 19002 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

964
docs/docs/css.mdx Normal file
View File

@@ -0,0 +1,964 @@
---
sidebar_position: 3
---
# CSS Standard
Gurted implements a **utility-first CSS approach** similar to Tailwind CSS, but rendered natively through Flumi. This allows for rapid styling without writing custom CSS rules while maintaining native performance.
## CSS Integration
CSS can be included in Gurted documents through multiple methods:
```html
<head>
<!-- Inline styles in head -->
<style>
h1 { text-[#ff0000] font-italic hover:text-[#00ff00] }
p { text-[#333333] text-2xl }
button { hover:bg-[#FF6B35] hover:text-[#FFFFFF] active:bg-[#CC5429] }
</style>
<!-- External stylesheet -->
<style src="styles.css">
</head>
<body>
<!-- Inline styles on elements -->
<div style="flex flex-col gap-4 p-4 bg-[#f8fafc] rounded">
<h1 style="text-3xl font-bold text-center">Styled Content</h1>
</div>
</body>
```
## Typography
### Font Sizes
Gurted uses a progressive font scaling system where each size corresponds to specific pixel values:
```html
<p style="text-xs">Extra small text (18px) - Used for fine print, captions</p>
<p style="text-sm">Small text (21px) - Used for secondary information</p>
<p style="text-base">Base text (24px) - Default body text size</p>
<p style="text-lg">Large text (27px) - Slightly emphasized text</p>
<p style="text-xl">Extra large text (30px) - Small headings</p>
<p style="text-2xl">2XL text (36px) - Medium headings</p>
<p style="text-3xl">3XL text (45px) - Large headings</p>
<p style="text-4xl">4XL text (54px) - Very large headings</p>
<p style="text-5xl">5XL text (72px) - Display headings</p>
<p style="text-6xl">6XL text (90px) - Hero headings</p>
```
![Text Sizes in Flumi](../static/img/docs/text-sizes.png)
:::note
Flumi, being made in Godot, handles pixel sizes different. `24px` in font size is the equivalent of `16px` in standard browsers.
:::
**How to choose font sizes:**
- `text-xs` to `text-sm`: Secondary content, labels, captions
- `text-base` to `text-lg`: Body text and paragraphs
- `text-xl` to `text-2xl`: Subheadings
- `text-3xl` to `text-6xl`: Main headings and titles
:::info
Utilities have been set to mimic real browser font sizes, which is why `text-6xl` will likely look similar in Flumi and Tailwind.
:::
### Font Families
Font families control the typeface used for text. Each has different characteristics:
```html
<p style="font-sans">Sans-serif font (default) - Clean, modern appearance without decorative strokes</p>
<p style="font-serif">Serif font - Traditional typeface with decorative strokes, good for formal documents</p>
<p style="font-mono">Monospace font - Each character takes the same width, ideal for code</p>
<p style="font-roboto">Custom web font (requires <font> declaration) - External font loaded from web</p>
```
![Fonts in Flumi](../static/img/docs/fonts.png)
:::info
Flumi uses the **system fonts** for its built-in font families. This means the appearance of fonts such as `monospace`, `serif`, and `sans-serif` will match how they are rendered by your operating system, similar to standard web browsers.
:::
**Font characteristics:**
- **Sans-serif**: Clean, readable on screens, modern feel
- **Serif**: Traditional, formal, good for printed text
- **Monospace**: Fixed-width characters, perfect for code and data tables
Custom fonts must be declared in the document head before use:
```html
<head>
<font name="roboto" src="https://fonts.gstatic.com/.../roboto.woff2" />
<style>
body { font-roboto }
</style>
</head>
```
The `name` attribute is used to reference the font in styles. The `weight` attribute can be used to specify the font weight.
```html
<font name="roboto" src="https://fonts.gstatic.com/.../roboto.woff2" weight="400" />
```
### Font Styling
Text decoration and weight control visual emphasis:
```html
<p style="font-bold">Bold text - Makes text thicker and more prominent</p>
<p style="font-italic">Italic text - Slants text for emphasis or citations</p>
<p style="underline">Underlined text - Adds line below text, commonly used for links</p>
<p style="font-bold font-italic underline">Combined styles - Multiple decorations applied together</p>
```
![Font styles in Flumi](../static/img/docs/font-styles.png)
### Text Alignment
Controls how text is positioned within its container:
```html
<p style="text-left">Left aligned text - Text starts from the left edge (default)</p>
<p style="text-center">Center aligned text - Text is centered horizontally</p>
<p style="text-right">Right aligned text - Text aligns to the right edge</p>
<p style="text-justify">Justified text - Text spreads across full width with even spacing</p>
```
![Font alignment in Flumi](../static/img/docs/font-alignment.png)
## Colors
### Understanding Color Systems
Gurted supports two color systems: **hex and RGB values** for precise colors and **predefined colors** for consistency.
**Hex Colors** use # followed by 6 characters (0-9, A-F) representing Red, Green, Blue values:
- `#ff0000` = Pure red (ff=255 red, 00=0 green, 00=0 blue)
- `#00ff00` = Pure green
- `#0000ff` = Pure blue
- `#ffffff` = White (maximum all colors)
- `#000000` = Black (no color)
**RGB Colors** use `rgb(r, g, b)` format where `r`, `g`, `b` are values from `0` to `255`:
```html
<p style="text(rgb(255, 0, 0))">Red text - Using RGB format</p>
<p style="text(rgb(0, 255, 0))">Green text - Using RGB format</p>
<p style="text(rgb(0, 0, 255))">Blue text - Using RGB format</p>
```
`rgba(r, g, b, a)` is also supported, where `a` is the alpha channel for transparency (0-1 range)
![RGB colors in Flumi](../static/img/docs/rgb-color.png)
### Text Colors
Control the color of text content:
```html
<!-- Custom hex colors - Use brackets for exact color values -->
<p style="text-[#ff0000]">Red text - Bright red using hex value</p>
<p style="text-[#3b82f6]">Blue text - Modern blue shade</p>
<p style="text-[#10b981]">Green text - Professional green tone</p>
<!-- Predefined color palette - Color name + intensity number -->
<p style="text-red-500">Red 500 - Medium intensity red from palette</p>
<p style="text-blue-600">Blue 600 - Slightly darker blue</p>
<p style="text-green-400">Green 400 - Lighter green tone</p>
<p style="text-gray-700">Gray 700 - Dark gray for readable text</p>
<p style="text-slate-800">Slate 800 - Very dark blue-gray</p>
```
![Text Colors in Flumi](../static/img/docs/text-color.png)
### Background Colors
Same color system applies to element backgrounds:
```html
<!-- Custom hex backgrounds -->
<div style="bg-[#f8fafc] p-4">Light gray background - Almost white with slight blue tint</div>
<div style="bg-[#1e293b] text-white p-4">Dark background - Dark blue-gray, needs white text</div>
<!-- Predefined backgrounds -->
<div style="bg-red-100 p-4">Light red background - Very light red tint</div>
<div style="bg-blue-500 text-white p-4">Blue background - Medium blue, needs white text for contrast</div>
<div style="bg-green-600 text-white p-4">Green background - Darker green, needs white text</div>
```
![Background Colors in Flumi](../static/img/docs/background-colors.png)
### Available Colors
Colors are formed by their name and their shade, example: `text-red-500` or `bg-blue-300`.
**Color shade scale (50-950):**
- **50-200**: Very light tints, good for backgrounds
- **300-400**: Light colors, good for subtle accents
- **500-600**: Medium colors, good for primary elements
- **700-800**: Dark colors, good for text and emphasis
- **900-950**: Very dark colors, good for strong contrast
These are directly taken from [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#default-color-palette).
<table>
<thead>
<tr>
<th>Color</th>
<th>50</th><th>100</th><th>200</th><th>300</th><th>400</th>
<th>500</th><th>600</th><th>700</th><th>800</th><th>900</th><th>950</th>
</tr>
</thead>
<tbody>
<tr>
<td>Red</td>
<td><span className="color-box" style={{ background: '#fef2f2' }} /></td>
<td><span className="color-box" style={{ background: '#fee2e2' }} /></td>
<td><span className="color-box" style={{ background: '#fecaca' }} /></td>
<td><span className="color-box" style={{ background: '#fca5a5' }} /></td>
<td><span className="color-box" style={{ background: '#f87171' }} /></td>
<td><span className="color-box" style={{ background: '#ef4444' }} /></td>
<td><span className="color-box" style={{ background: '#dc2626' }} /></td>
<td><span className="color-box" style={{ background: '#b91c1c' }} /></td>
<td><span className="color-box" style={{ background: '#991b1b' }} /></td>
<td><span className="color-box" style={{ background: '#7f1d1d' }} /></td>
<td><span className="color-box" style={{ background: '#450a0a' }} /></td>
</tr>
<tr>
<td>Orange</td>
<td><span className="color-box" style={{ background: '#fff7ed' }} /></td>
<td><span className="color-box" style={{ background: '#ffedd5' }} /></td>
<td><span className="color-box" style={{ background: '#fed7aa' }} /></td>
<td><span className="color-box" style={{ background: '#fdba74' }} /></td>
<td><span className="color-box" style={{ background: '#fb923c' }} /></td>
<td><span className="color-box" style={{ background: '#f97316' }} /></td>
<td><span className="color-box" style={{ background: '#ea580c' }} /></td>
<td><span className="color-box" style={{ background: '#c2410c' }} /></td>
<td><span className="color-box" style={{ background: '#9a3412' }} /></td>
<td><span className="color-box" style={{ background: '#7c2d12' }} /></td>
<td><span className="color-box" style={{ background: '#431407' }} /></td>
</tr>
<tr>
<td>Amber</td>
<td><span className="color-box" style={{ background: '#fffbeb' }} /></td>
<td><span className="color-box" style={{ background: '#fef3c7' }} /></td>
<td><span className="color-box" style={{ background: '#fde68a' }} /></td>
<td><span className="color-box" style={{ background: '#fcd34d' }} /></td>
<td><span className="color-box" style={{ background: '#fbbf24' }} /></td>
<td><span className="color-box" style={{ background: '#f59e0b' }} /></td>
<td><span className="color-box" style={{ background: '#d97706' }} /></td>
<td><span className="color-box" style={{ background: '#b45309' }} /></td>
<td><span className="color-box" style={{ background: '#92400e' }} /></td>
<td><span className="color-box" style={{ background: '#78350f' }} /></td>
<td><span className="color-box" style={{ background: '#451a03' }} /></td>
</tr>
<tr>
<td>Yellow</td>
<td><span className="color-box" style={{ background: '#fefce8' }} /></td>
<td><span className="color-box" style={{ background: '#fef9c3' }} /></td>
<td><span className="color-box" style={{ background: '#fef08a' }} /></td>
<td><span className="color-box" style={{ background: '#fde047' }} /></td>
<td><span className="color-box" style={{ background: '#facc15' }} /></td>
<td><span className="color-box" style={{ background: '#eab308' }} /></td>
<td><span className="color-box" style={{ background: '#ca8a04' }} /></td>
<td><span className="color-box" style={{ background: '#a16207' }} /></td>
<td><span className="color-box" style={{ background: '#854d0e' }} /></td>
<td><span className="color-box" style={{ background: '#713f12' }} /></td>
<td><span className="color-box" style={{ background: '#422006' }} /></td>
</tr>
<tr>
<td>Lime</td>
<td><span className="color-box" style={{ background: '#f7fee7' }} /></td>
<td><span className="color-box" style={{ background: '#ecfccb' }} /></td>
<td><span className="color-box" style={{ background: '#d9f99d' }} /></td>
<td><span className="color-box" style={{ background: '#bef264' }} /></td>
<td><span className="color-box" style={{ background: '#a3e635' }} /></td>
<td><span className="color-box" style={{ background: '#84cc16' }} /></td>
<td><span className="color-box" style={{ background: '#65a30d' }} /></td>
<td><span className="color-box" style={{ background: '#4d7c0f' }} /></td>
<td><span className="color-box" style={{ background: '#3f6212' }} /></td>
<td><span className="color-box" style={{ background: '#365314' }} /></td>
<td><span className="color-box" style={{ background: '#1a2e05' }} /></td>
</tr>
<tr>
<td>Green</td>
<td><span className="color-box" style={{ background: '#f0fdf4' }} /></td>
<td><span className="color-box" style={{ background: '#dcfce7' }} /></td>
<td><span className="color-box" style={{ background: '#bbf7d0' }} /></td>
<td><span className="color-box" style={{ background: '#86efac' }} /></td>
<td><span className="color-box" style={{ background: '#4ade80' }} /></td>
<td><span className="color-box" style={{ background: '#22c55e' }} /></td>
<td><span className="color-box" style={{ background: '#16a34a' }} /></td>
<td><span className="color-box" style={{ background: '#15803d' }} /></td>
<td><span className="color-box" style={{ background: '#166534' }} /></td>
<td><span className="color-box" style={{ background: '#14532d' }} /></td>
<td><span className="color-box" style={{ background: '#052e16' }} /></td>
</tr>
<tr>
<td>Emerald</td>
<td><span className="color-box" style={{ background: '#ecfdf5' }} /></td>
<td><span className="color-box" style={{ background: '#d1fae5' }} /></td>
<td><span className="color-box" style={{ background: '#a7f3d0' }} /></td>
<td><span className="color-box" style={{ background: '#6ee7b7' }} /></td>
<td><span className="color-box" style={{ background: '#34d399' }} /></td>
<td><span className="color-box" style={{ background: '#10b981' }} /></td>
<td><span className="color-box" style={{ background: '#059669' }} /></td>
<td><span className="color-box" style={{ background: '#047857' }} /></td>
<td><span className="color-box" style={{ background: '#065f46' }} /></td>
<td><span className="color-box" style={{ background: '#064e3b' }} /></td>
<td><span className="color-box" style={{ background: '#022c22' }} /></td>
</tr>
<tr>
<td>Teal</td>
<td><span className="color-box" style={{ background: '#f0fdfa' }} /></td>
<td><span className="color-box" style={{ background: '#ccfbf1' }} /></td>
<td><span className="color-box" style={{ background: '#99f6e4' }} /></td>
<td><span className="color-box" style={{ background: '#5eead4' }} /></td>
<td><span className="color-box" style={{ background: '#2dd4bf' }} /></td>
<td><span className="color-box" style={{ background: '#14b8a6' }} /></td>
<td><span className="color-box" style={{ background: '#0d9488' }} /></td>
<td><span className="color-box" style={{ background: '#0f766e' }} /></td>
<td><span className="color-box" style={{ background: '#115e59' }} /></td>
<td><span className="color-box" style={{ background: '#134e4a' }} /></td>
<td><span className="color-box" style={{ background: '#042f2e' }} /></td>
</tr>
<tr>
<td>Cyan</td>
<td><span className="color-box" style={{ background: '#ecfeff' }} /></td>
<td><span className="color-box" style={{ background: '#cffafe' }} /></td>
<td><span className="color-box" style={{ background: '#a5f3fc' }} /></td>
<td><span className="color-box" style={{ background: '#67e8f9' }} /></td>
<td><span className="color-box" style={{ background: '#22d3ee' }} /></td>
<td><span className="color-box" style={{ background: '#06b6d4' }} /></td>
<td><span className="color-box" style={{ background: '#0891b2' }} /></td>
<td><span className="color-box" style={{ background: '#0e7490' }} /></td>
<td><span className="color-box" style={{ background: '#155e75' }} /></td>
<td><span className="color-box" style={{ background: '#164e63' }} /></td>
<td><span className="color-box" style={{ background: '#083344' }} /></td>
</tr>
<tr>
<td>Sky</td>
<td><span className="color-box" style={{ background: '#f0f9ff' }} /></td>
<td><span className="color-box" style={{ background: '#e0f2fe' }} /></td>
<td><span className="color-box" style={{ background: '#bae6fd' }} /></td>
<td><span className="color-box" style={{ background: '#7dd3fc' }} /></td>
<td><span className="color-box" style={{ background: '#38bdf8' }} /></td>
<td><span className="color-box" style={{ background: '#0ea5e9' }} /></td>
<td><span className="color-box" style={{ background: '#0284c7' }} /></td>
<td><span className="color-box" style={{ background: '#0369a1' }} /></td>
<td><span className="color-box" style={{ background: '#075985' }} /></td>
<td><span className="color-box" style={{ background: '#0c4a6e' }} /></td>
<td><span className="color-box" style={{ background: '#082f49' }} /></td>
</tr>
<tr>
<td>Blue</td>
<td><span className="color-box" style={{ background: '#eff6ff' }} /></td>
<td><span className="color-box" style={{ background: '#dbeafe' }} /></td>
<td><span className="color-box" style={{ background: '#bfdbfe' }} /></td>
<td><span className="color-box" style={{ background: '#93c5fd' }} /></td>
<td><span className="color-box" style={{ background: '#60a5fa' }} /></td>
<td><span className="color-box" style={{ background: '#3b82f6' }} /></td>
<td><span className="color-box" style={{ background: '#2563eb' }} /></td>
<td><span className="color-box" style={{ background: '#1d4ed8' }} /></td>
<td><span className="color-box" style={{ background: '#1e40af' }} /></td>
<td><span className="color-box" style={{ background: '#1e3a8a' }} /></td>
<td><span className="color-box" style={{ background: '#172554' }} /></td>
</tr>
<tr>
<td>Indigo</td>
<td><span className="color-box" style={{ background: '#eef2ff' }} /></td>
<td><span className="color-box" style={{ background: '#e0e7ff' }} /></td>
<td><span className="color-box" style={{ background: '#c7d2fe' }} /></td>
<td><span className="color-box" style={{ background: '#a5b4fc' }} /></td>
<td><span className="color-box" style={{ background: '#818cf8' }} /></td>
<td><span className="color-box" style={{ background: '#6366f1' }} /></td>
<td><span className="color-box" style={{ background: '#4f46e5' }} /></td>
<td><span className="color-box" style={{ background: '#4338ca' }} /></td>
<td><span className="color-box" style={{ background: '#3730a3' }} /></td>
<td><span className="color-box" style={{ background: '#312e81' }} /></td>
<td><span className="color-box" style={{ background: '#1e1b4b' }} /></td>
</tr>
<tr>
<td>Violet</td>
<td><span className="color-box" style={{ background: '#f5f3ff' }} /></td>
<td><span className="color-box" style={{ background: '#ede9fe' }} /></td>
<td><span className="color-box" style={{ background: '#ddd6fe' }} /></td>
<td><span className="color-box" style={{ background: '#c4b5fd' }} /></td>
<td><span className="color-box" style={{ background: '#a78bfa' }} /></td>
<td><span className="color-box" style={{ background: '#8b5cf6' }} /></td>
<td><span className="color-box" style={{ background: '#7c3aed' }} /></td>
<td><span className="color-box" style={{ background: '#6d28d9' }} /></td>
<td><span className="color-box" style={{ background: '#5b21b6' }} /></td>
<td><span className="color-box" style={{ background: '#4c1d95' }} /></td>
<td><span className="color-box" style={{ background: '#2e1065' }} /></td>
</tr>
<tr>
<td>Purple</td>
<td><span className="color-box" style={{ background: '#faf5ff' }} /></td>
<td><span className="color-box" style={{ background: '#f3e8ff' }} /></td>
<td><span className="color-box" style={{ background: '#e9d5ff' }} /></td>
<td><span className="color-box" style={{ background: '#d8b4fe' }} /></td>
<td><span className="color-box" style={{ background: '#c084fc' }} /></td>
<td><span className="color-box" style={{ background: '#a855f7' }} /></td>
<td><span className="color-box" style={{ background: '#9333ea' }} /></td>
<td><span className="color-box" style={{ background: '#7e22ce' }} /></td>
<td><span className="color-box" style={{ background: '#6b21a8' }} /></td>
<td><span className="color-box" style={{ background: '#581c87' }} /></td>
<td><span className="color-box" style={{ background: '#3b0764' }} /></td>
</tr>
<tr>
<td>Fuchsia</td>
<td><span className="color-box" style={{ background: '#fdf4ff' }} /></td>
<td><span className="color-box" style={{ background: '#fae8ff' }} /></td>
<td><span className="color-box" style={{ background: '#f5d0fe' }} /></td>
<td><span className="color-box" style={{ background: '#f0abfc' }} /></td>
<td><span className="color-box" style={{ background: '#e879f9' }} /></td>
<td><span className="color-box" style={{ background: '#d946ef' }} /></td>
<td><span className="color-box" style={{ background: '#c026d3' }} /></td>
<td><span className="color-box" style={{ background: '#a21caf' }} /></td>
<td><span className="color-box" style={{ background: '#86198f' }} /></td>
<td><span className="color-box" style={{ background: '#701a75' }} /></td>
<td><span className="color-box" style={{ background: '#4a044e' }} /></td>
</tr>
<tr>
<td>Pink</td>
<td><span className="color-box" style={{ background: '#fdf2f8' }} /></td>
<td><span className="color-box" style={{ background: '#fce7f3' }} /></td>
<td><span className="color-box" style={{ background: '#fbcfe8' }} /></td>
<td><span className="color-box" style={{ background: '#f9a8d4' }} /></td>
<td><span className="color-box" style={{ background: '#f472b6' }} /></td>
<td><span className="color-box" style={{ background: '#ec4899' }} /></td>
<td><span className="color-box" style={{ background: '#db2777' }} /></td>
<td><span className="color-box" style={{ background: '#be185d' }} /></td>
<td><span className="color-box" style={{ background: '#9d174d' }} /></td>
<td><span className="color-box" style={{ background: '#831843' }} /></td>
<td><span className="color-box" style={{ background: '#500724' }} /></td>
</tr>
<tr>
<td>Rose</td>
<td><span className="color-box" style={{ background: '#fff1f2' }} /></td>
<td><span className="color-box" style={{ background: '#ffe4e6' }} /></td>
<td><span className="color-box" style={{ background: '#fecdd3' }} /></td>
<td><span className="color-box" style={{ background: '#fda4af' }} /></td>
<td><span className="color-box" style={{ background: '#fb7185' }} /></td>
<td><span className="color-box" style={{ background: '#f43f5e' }} /></td>
<td><span className="color-box" style={{ background: '#e11d48' }} /></td>
<td><span className="color-box" style={{ background: '#be123c' }} /></td>
<td><span className="color-box" style={{ background: '#9f1239' }} /></td>
<td><span className="color-box" style={{ background: '#881337' }} /></td>
<td><span className="color-box" style={{ background: '#4c0519' }} /></td>
</tr>
<tr>
<td>Slate</td>
<td><span className="color-box" style={{ background: '#f8fafc' }} /></td>
<td><span className="color-box" style={{ background: '#f1f5f9' }} /></td>
<td><span className="color-box" style={{ background: '#e2e8f0' }} /></td>
<td><span className="color-box" style={{ background: '#cbd5e1' }} /></td>
<td><span className="color-box" style={{ background: '#94a3b8' }} /></td>
<td><span className="color-box" style={{ background: '#64748b' }} /></td>
<td><span className="color-box" style={{ background: '#475569' }} /></td>
<td><span className="color-box" style={{ background: '#334155' }} /></td>
<td><span className="color-box" style={{ background: '#1e293b' }} /></td>
<td><span className="color-box" style={{ background: '#0f172a' }} /></td>
<td><span className="color-box" style={{ background: '#020617' }} /></td>
</tr>
<tr>
<td>Gray</td>
<td><span className="color-box" style={{ background: '#f9fafb' }} /></td>
<td><span className="color-box" style={{ background: '#f3f4f6' }} /></td>
<td><span className="color-box" style={{ background: '#e5e7eb' }} /></td>
<td><span className="color-box" style={{ background: '#d1d5db' }} /></td>
<td><span className="color-box" style={{ background: '#9ca3af' }} /></td>
<td><span className="color-box" style={{ background: '#6b7280' }} /></td>
<td><span className="color-box" style={{ background: '#4b5563' }} /></td>
<td><span className="color-box" style={{ background: '#374151' }} /></td>
<td><span className="color-box" style={{ background: '#1f2937' }} /></td>
<td><span className="color-box" style={{ background: '#111827' }} /></td>
<td><span className="color-box" style={{ background: '#030712' }} /></td>
</tr>
<tr>
<td>Zinc</td>
<td><span className="color-box" style={{ background: '#fafafa' }} /></td>
<td><span className="color-box" style={{ background: '#f4f4f5' }} /></td>
<td><span className="color-box" style={{ background: '#e4e4e7' }} /></td>
<td><span className="color-box" style={{ background: '#d4d4d8' }} /></td>
<td><span className="color-box" style={{ background: '#a1a1aa' }} /></td>
<td><span className="color-box" style={{ background: '#71717a' }} /></td>
<td><span className="color-box" style={{ background: '#52525b' }} /></td>
<td><span className="color-box" style={{ background: '#3f3f46' }} /></td>
<td><span className="color-box" style={{ background: '#27272a' }} /></td>
<td><span className="color-box" style={{ background: '#18181b' }} /></td>
<td><span className="color-box" style={{ background: '#09090b' }} /></td>
</tr>
<tr>
<td>Neutral</td>
<td><span className="color-box" style={{ background: '#fafafa' }} /></td>
<td><span className="color-box" style={{ background: '#f5f5f5' }} /></td>
<td><span className="color-box" style={{ background: '#e5e5e5' }} /></td>
<td><span className="color-box" style={{ background: '#d4d4d4' }} /></td>
<td><span className="color-box" style={{ background: '#a3a3a3' }} /></td>
<td><span className="color-box" style={{ background: '#737373' }} /></td>
<td><span className="color-box" style={{ background: '#525252' }} /></td>
<td><span className="color-box" style={{ background: '#404040' }} /></td>
<td><span className="color-box" style={{ background: '#262626' }} /></td>
<td><span className="color-box" style={{ background: '#171717' }} /></td>
<td><span className="color-box" style={{ background: '#0a0a0a' }} /></td>
</tr>
<tr>
<td>Stone</td>
<td><span className="color-box" style={{ background: '#fafaf9' }} /></td>
<td><span className="color-box" style={{ background: '#f5f5f4' }} /></td>
<td><span className="color-box" style={{ background: '#e7e5e4' }} /></td>
<td><span className="color-box" style={{ background: '#d6d3d1' }} /></td>
<td><span className="color-box" style={{ background: '#a8a29e' }} /></td>
<td><span className="color-box" style={{ background: '#78716c' }} /></td>
<td><span className="color-box" style={{ background: '#57534e' }} /></td>
<td><span className="color-box" style={{ background: '#44403c' }} /></td>
<td><span className="color-box" style={{ background: '#292524' }} /></td>
<td><span className="color-box" style={{ background: '#1c1917' }} /></td>
<td><span className="color-box" style={{ background: '#0c0a09' }} /></td>
</tr>
</tbody>
</table>
## Layout & Sizing
### Understanding the Spacing System
Gurted uses a consistent spacing scale where each number represents 4 pixels:
- `1` = 4px
- `2` = 8px
- `4` = 16px
- `8` = 32px
- `16` = 64px
### Dimensions
Control the width and height of elements:
```html
<!-- Fixed sizes using the spacing scale -->
<div style="w-16 h-16 bg-red-500">64x64px</div>
<div style="w-32 h-24 bg-blue-500">128x96px</div>
<!-- Custom pixel values using brackets -->
<div style="w-[200px] h-[100px] bg-green-500">200x100px</div>
<!-- Relative sizes as fractions of parent container -->
<div style="w-full h-32 bg-purple-500">Full width (100% of parent)</div>
<div style="w-1/2 h-16 bg-yellow-500">Half width (50% of parent), 64px height</div>
<!-- Min/max constraints to control sizing limits -->
<div style="min-w-32 max-w-64 min-h-16 max-h-32 bg-pink-500"></div>
```
![Background Colors in Flumi](../static/img/docs/sizing.gif)
**Common width values:**
- `w-full`: 100% of parent width
- `w-1/2`: 50% of parent width
- `w-1/3`: 33.33% of parent width
- `w-1/4`: 25% of parent width
- `w-auto`: Natural width based on content
### Spacing System Explained
- **Padding** adds space inside an element (between border and content)
- **Margin** adds space outside an element (between border and other elements)
```html
<!-- Padding (internal spacing) -->
<div style="p-4 bg-gray-200">Padding all sides (16px) - Space inside the gray area</div>
<div style="px-6 py-2 bg-gray-300">Horizontal 24px, vertical 8px - Different spacing for x/y axes</div>
<div style="pt-4 pr-3 pb-2 pl-1 bg-gray-400">Individual sides: top-16px, right-12px, bottom-8px, left-4px</div>
<!-- Margin (external spacing) -->
<div style="m-4 bg-red-200">Margin all sides (16px) - Space around the red area</div>
<div style="mt-6 mb-4 bg-green-200">Top 24px, bottom 16px margin - Vertical spacing only</div>
<!-- Custom spacing using exact pixel values -->
<div style="p-[20px] m-[10px] bg-yellow-200">Custom 20px padding, 10px margin</div>
```
![Padding and margin in Flumi](../static/img/docs/padding-and-margin.png)
**Spacing direction shortcuts:**
- `p` = padding all sides
- `px` = padding left and right (x-axis)
- `py` = padding top and bottom (y-axis)
- `pt` = padding top only
- `pr` = padding right only
- `pb` = padding bottom only
- `pl` = padding left only
- Same pattern applies to margins with `m` prefix
## Flexbox System
Flexbox is a layout system that arranges elements in flexible containers. Think of it as a smart way to organize items in rows or columns with automatic spacing and alignment.
Flumi implements browser-grade CSS Flexbox support through [Yoga layout engine](https://yogalayout.com/)
### Container Properties
First, create a flex container to enable flexible layout:
```html
<div style="flex">Basic flex container - Arranges children in a row by default</div>
<div style="inline-flex">Inline flex container - Acts like inline element but with flex children</div>
```
### Direction & Wrap
Control how items flow within the container:
```html
<!-- Direction controls the main axis (primary direction) -->
<div style="flex flex-row">Horizontal layout (default) - Items arranged left to right</div>
<div style="flex flex-row-reverse">Reverse horizontal - Items arranged right to left</div>
<div style="flex flex-col">Vertical layout - Items arranged top to bottom</div>
<div style="flex flex-col-reverse">Reverse vertical - Items arranged bottom to top</div>
<!-- Wrapping controls what happens when items don't fit -->
<div style="flex flex-wrap">Allow wrapping - Items move to next line when container is full</div>
<div style="flex flex-nowrap">No wrapping (default) - Items shrink to fit on one line</div>
<div style="flex flex-wrap-reverse">Reverse wrap - New lines appear above/before previous lines</div>
```
### Alignment System Explained
Flexbox has two axes:
- **Main axis**: The primary direction (horizontal for row, vertical for column)
- **Cross axis**: The perpendicular direction (vertical for row, horizontal for column)
**Justify (main axis alignment):**
```html
<div style="flex justify-start">Start alignment - Items packed at the beginning (default)</div>
<div style="flex justify-end">End alignment - Items packed at the end</div>
<div style="flex justify-center">Center alignment - Items packed in the center</div>
<div style="flex justify-between">Space between - First item at start, last at end, equal space between</div>
<div style="flex justify-around">Space around - Equal space around each item</div>
<div style="flex justify-evenly">Even space - Perfectly equal space between all items</div>
```
**Align (cross axis alignment):**
```html
<div style="flex items-start">Start cross-axis - Items aligned to start of cross axis</div>
<div style="flex items-end">End cross-axis - Items aligned to end of cross axis</div>
<div style="flex items-center">Center cross-axis - Items centered on cross axis</div>
<div style="flex items-baseline">Baseline alignment - Items aligned by their text baseline</div>
<div style="flex items-stretch">Stretch items (default) - Items stretch to fill cross axis</div>
```
### Gap & Spacing
Control spacing between flex items without using margins:
```html
<div style="flex gap-2">8px gap between items - Consistent spacing (2 × 4px = 8px)</div>
<div style="flex gap-4">16px gap between items - Larger spacing (4 × 4px = 16px)</div>
<div style="flex gap-[12px]">Custom 12px gap - Exact pixel spacing</div>
<!-- Directional gaps for precise control -->
<div style="flex flex-col row-gap-2 col-gap-4">Row gap 8px, column gap 16px - Different spacing for each direction</div>
```
### Item Properties
Control individual flex item behavior within containers:
```html
<div style="flex">
<div style="flex-grow-1">Grows to fill space - Takes available space (factor of 1)</div>
<div style="flex-grow-2">Grows twice as much - Takes twice as much space as flex-grow-1</div>
<div style="flex-shrink-0">Never shrinks - Maintains minimum size even when space is tight</div>
</div>
<div style="flex">
<div style="basis-32">Fixed 128px basis - Preferred size before growing/shrinking</div>
<div style="basis-[200px]">Custom 200px basis - Exact preferred size</div>
</div>
<!-- Self alignment overrides container's items-* setting -->
<div style="flex h-24">
<div style="self-start">Align to start - This item ignores container alignment</div>
<div style="self-center">Align to center - This item centers itself</div>
<div style="self-end">Align to end - This item aligns to end</div>
<div style="self-stretch">Stretch to fill - This item stretches regardless of container setting</div>
</div>
<!-- Display order changes visual order without changing HTML -->
<div style="flex">
<div style="order-3">Third in visual order - Appears last despite being first in HTML</div>
<div style="order-1">First in visual order - Appears first despite being second in HTML</div>
<div style="order-2">Second in visual order - Appears middle despite being last in HTML</div>
</div>
```
**Flex grow/shrink explained:**
- `flex-grow-0`: Don't grow (default)
- `flex-grow-1`: Grow to fill space equally with other grow-1 items
- `flex-grow-2`: Grow twice as much as grow-1 items
- `flex-shrink-0`: Don't shrink below basis size
- `flex-shrink-1`: Can shrink when space is limited (default)
## Borders & Effects
### Border Radius Explained
Border radius creates rounded corners. The value represents the radius of the circle used to round the corner:
```html
<!-- Preset sizes with pixel equivalents -->
<div style="rounded bg-gray-300 p-4">Default 4px radius - Slightly rounded corners</div>
<div style="rounded-sm bg-gray-300 p-4">Small 2px radius - Barely noticeable rounding</div>
<div style="rounded-md bg-gray-300 p-4">Medium 6px radius - Moderate rounding</div>
<div style="rounded-lg bg-gray-300 p-4">Large 8px radius - Noticeably rounded</div>
<div style="rounded-xl bg-gray-300 p-4">Extra large 12px radius - Very rounded corners</div>
<div style="rounded-2xl bg-gray-300 p-4">2XL 16px radius - Heavily rounded</div>
<div style="rounded-3xl bg-gray-300 p-4">3XL 24px radius - Extremely rounded</div>
<div style="rounded-full bg-gray-300 p-4">Fully rounded (pill shape) - Perfect circles/ovals</div>
<!-- Custom radius values -->
<div style="rounded-[20px] bg-gray-300 p-4">Custom 20px radius - Exact pixel control</div>
<div style="rounded-[50%] bg-gray-300 p-4">50% radius - Creates circle if element is square</div>
```
![Border radius in Flumi](../static/img/docs/border-radius.png)
### Border System
Borders create visible lines around elements. You control thickness, style, and color:
```html
<!-- Border thickness (width) -->
<div style="border p-2">Default 1px solid border - Thin line around element</div>
<div style="border-2 p-2">2px border - Slightly thicker line</div>
<div style="border-4 p-2">4px border - Thick line (4 × 1px = 4px)</div>
<div style="border-[6px] p-2">Custom 6px border - Very thick custom line</div>
<!-- Border on specific sides only -->
<div style="border-t p-2">Top border only - Line across the top</div>
<div style="border-r p-2">Right border only - Line down the right side</div>
<div style="border-b p-2">Bottom border only - Line across the bottom</div>
<div style="border-l p-2">Left border only - Line down the left side</div>
<!-- Combined sides with different thicknesses -->
<div style="border-t-2 border-b-4 p-2">Different top/bottom borders - 2px top, 4px bottom</div>
<div style="border-l-6 border-green-500 p-2">Thick left green border - 6px left border in green</div>
<!-- Border styles (appearance) -->
<div style="border border-solid p-2">Solid border (default) - Continuous line</div>
<div style="border-none p-2">No border - Removes any existing border</div>
<!-- Border colors -->
<div style="border-2 border-red-500 p-2">Red border - Colored border using palette</div>
<div style="border-2 border-[#3b82f6] p-2">Custom blue border - Exact hex color</div>
<div style="border border-transparent p-2">Transparent border - Invisible but takes up space</div>
```
![Border in Flumi](../static/img/docs/border.png)
## Interactive States
### Hover States Explained
Hover states trigger when a user moves their mouse cursor over an element. Use them to provide visual feedback:
```html
<button style="bg-blue-500 text-white px-4 py-2 hover:bg-blue-600 hover:text-gray-100">
Hover to change color - Background darkens, text becomes lighter gray
</button>
<div style="bg-gray-200 p-4 rounded hover:bg-gray-300">
Hoverable container - Changes background on mouse over
</div>
<!-- Complex hover effects with multiple property changes -->
<button style="bg-[#3498db] text-white rounded-lg hover:bg-[#2980b9] hover:text-[#f8f9fa]">
Multi-property hover - Changes background and text color
</button>
```
![Hover State in Flumi](../static/img/docs/state.gif)
### Active States Explained
Active states trigger when an element is pressed/clicked and held. They provide immediate feedback for user interaction:
```html
<button style="bg-green-500 text-white px-4 py-2 rounded
hover:bg-green-600
active:bg-green-700 active:text-gray-100">
Click and hold to see active state - Darkest when pressed down
</button>
<!-- Combined states create smooth interaction flow -->
<button style="bg-[#e74c3c] text-white px-4 py-2 rounded
hover:bg-[#c0392b] hover:text-[#ffffff]
active:bg-[#a93226] active:text-[#ecf0f1]">
Hover and active states - Normal → Darker on hover → Darkest when pressed
</button>
```
![Active State in Flumi](../static/img/docs/active.gif)
### Cursor Control
Control what mouse cursor appears when hovering over elements:
```html
<div style="cursor-pointer p-4 bg-blue-100">pointer</div>
<div style="cursor-text p-4 bg-green-100">text</div>
<div style="cursor-default p-4 bg-yellow-100">default</div>
<div style="cursor-move p-4 bg-red-100">move</div>
<div style="cursor-crosshair p-4 bg-purple-100">crosshair</div>
<div style="cursor-help p-4 bg-pink-100">help</div>
<div style="cursor-not-allowed p-4 bg-gray-100">not-allowed</div>
<!-- Cursor inheritance flows down to child elements -->
<div style="cursor-pointer bg-gray-200 p-4">
<p>Parent has pointer cursor</p>
<p>Children inherit the cursor style automatically</p>
<div style="bg-gray-300 p-2">
<p>Nested elements also inherit the same cursor</p>
</div>
</div>
```
![Cursors in Flumi](../static/img/docs/cursor.gif)
## Advanced CSS Features
### Opacity & Z-Index
- **Opacity** controls transparency (0 = invisible, 1 = fully visible)
- **Z-index** controls stacking order (higher numbers appear in front)
- Think of it as layers of paper: higher z-index means the paper is on top of others
```html
<div style="opacity-75 bg-red-500 text-white p-4">75% opacity - 25% transparent</div>
<div style="opacity-50 bg-blue-500 text-white p-4">50% opacity - Half transparent</div>
<div style="opacity-[0.25] bg-green-500 text-white p-4">25% custom opacity - Mostly transparent</div>
<!-- Z-index stacking (only works with stacking elements) -->
<div style="z-10 bg-red-500 p-4">Z-index 10 - Middle layer</div>
<div style="z-20 bg-blue-500 p-4">Z-index 20 (on top) - Highest layer, appears in front</div>
<div style="z-[999] bg-green-500 p-4">Custom z-index 999 - Very high layer</div>
</div>
```
![Opacity and z index in Flumi](../static/img/docs/opacity-and-z-index.png)
### CSS Selectors
Advanced selector support for complex styling based on element relationships:
```html
<head>
<style>
/* Descendant selectors - Apply to nested elements */
div p { text-[#663399] } /* All paragraphs inside any div */
.container span { bg-[#ffeeaa] } /* All spans inside elements with 'container' class */
/* Direct child selectors - Apply only to immediate children */
.outer > p { font-bold } /* Only paragraphs directly inside .outer */
.parent > button { bg-[#44cc88] } /* Only buttons directly inside .parent */
/* Adjacent sibling selectors - Apply to next sibling */
h1 + p { text-[#ff0000] font-bold } /* Paragraph immediately after h1 */
h2 + div { bg-[#eeffee] } /* Div immediately after h2 */
/* General sibling selectors - Apply to all following siblings */
h1 ~ p { text-[#0000ff] } /* All paragraphs after h1 (same parent) */
h3 ~ span { bg-[#ffdddd] } /* All spans after h3 (same parent) */
/* Attribute selectors - Apply based on HTML attributes */
input[type="text"] { border bg-[#f9f9f9] } /* Text inputs only */
a[href^="https"] { text-[#008000] font-bold } /* Links starting with https */
button[disabled] { bg-[#888888] text-[#cccccc] } /* Disabled buttons */
input[placeholder*="email"] { border-2 border-[#0066cc] } /* Inputs with 'email' in placeholder */
div[style$="special"] { bg-[#ffffaa] } /* Divs with style ending in 'special' */
/* Pseudo-class selectors - Apply based on element state */
button:hover { bg-[#2563eb] } /* Buttons when hovered */
input:focus { border-blue-500 } /* Inputs when focused/selected */
li:first-child { font-bold } /* First list item */
li:last-child { text-red-500 } /* Last list item */
</style>
</head>
```
### Class-Based Styling
Define reusable style classes for consistent design:
```html
<head>
<style>
.card { bg-[#1e293b] text-white rounded-xl p-4 shadow-lg }
.btn-primary { bg-[#3b82f6] text-white px-4 py-2 rounded hover:bg-[#2563eb] }
.btn-success { bg-[#10b981] text-white px-4 py-2 rounded hover:bg-[#059669] }
</style>
</head>
<body>
<div class="card">
<h2>Card Title</h2>
<p>Card content</p>
<button style="btn-primary">Primary Action</button>
<button style="btn-success z-10">Success Action</button>
</div>
</body>
```
:::note
Classes are defined inside `style` attribute alongside inline styles, unlike traditional CSS where they are defined in a separate `class` attribute.
:::
## Default Styles
Gurted provides sensible default styling for all HTML elements so they look good without any custom CSS:
```css
/* Text elements with their default sizes */
body { text-base text-[#000000] text-left } /* 16px black left-aligned text */
h1 { text-5xl font-bold } /* 48px bold heading */
h2 { text-4xl font-bold } /* 36px bold heading */
h3 { text-3xl font-bold } /* 30px bold heading */
h4 { text-2xl font-bold } /* 24px bold heading */
h5 { text-xl font-bold } /* 20px bold heading */
h6 { text-base font-bold } /* 16px bold heading */
/* Text formatting elements */
b { font-bold } /* Bold text */
i { font-italic } /* Italic text */
u { underline } /* Underlined text */
small { text-sm } /* Small text (14px) */
mark { bg-[#FFFF00] } /* Highlighted text with yellow background */
code { text-base font-mono } /* Code text in monospace font */
pre { text-base font-mono } /* Preformatted text in monospace */
/* Interactive elements */
a { text-[#1a0dab] } /* Links in traditional blue color */
/* Button styling */
button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] }
button[disabled] { bg-[#666666] text-[#999999] cursor-not-allowed }
```
## Complete Examples
### Button Variations
```html
<!-- Basic styled buttons with different colors and shapes -->
<button style="bg-[#4CAF50] rounded-lg text-white px-4 py-2">Green Button - 16px horizontal padding, 8px vertical</button>
<button style="bg-[#2196F3] rounded-xl text-white px-4 py-2">Blue Button - More rounded corners (12px radius)</button>
<button style="bg-[#FF5722] rounded-full text-white px-6 py-2">Orange Pill - Fully rounded with extra horizontal padding</button>
<!-- Multi-state buttons that change on interaction -->
<button style="bg-[#e74c3c] text-white rounded hover:bg-[#c0392b] active:bg-[#a93226]">
Red Multi-State - Gets progressively darker on hover and click
</button>
<!-- Complex hover effects with dramatic changes -->
<button style="bg-[#34495e] text-[#ecf0f1] rounded
hover:bg-[#e74c3c] hover:text-white">
Dark to Red Transform - Complete color change on hover
</button>
```
![Button Variations Result](../static/img/docs/button-variations.gif)
### Dashboard Grid with Responsive Layout
```html
<div style="flex flex-wrap gap-4 p-4">
<!-- Revenue cards that wrap on smaller screens -->
<div style="flex-1 min-w-64 text-white p-6 rounded-lg">
<h3 style="text-xl font-semibold mb-2">Total Users</h3>
<p style="text-3xl font-bold">1,247</p>
</div>
<div style="flex-1 min-w-64 bg-gradient-to-r from-green-500 to-teal-600
text-white p-6 rounded-lg">
<h3 style="text-xl font-semibold mb-2">Revenue</h3>
<p style="text-3xl font-bold">$12,847</p>
</div>
<div style="flex-1 min-w-64 bg-gradient-to-r from-yellow-500 to-orange-600
text-white p-6 rounded-lg">
<h3 style="text-xl font-semibold mb-2">Orders</h3>
<p style="text-3xl font-bold">356</p>
</div>
</div>
```
![Button Variations Result](../static/img/docs/dashboard.png)
The CSS system in Gurted provides powerful styling capabilities while maintaining the familiar utility-first approach, all rendered with native performance through the Godot engine.

462
docs/docs/html.md Normal file
View File

@@ -0,0 +1,462 @@
---
sidebar_position: 2
---
# HTML Standard
Gurted implements a HTML markup language that renders natively through Flumi. This standard supports familiar HTML elements with new features and modern styling capabilities.
## Document Structure
Every Gurted document follows a familiar HTML structure:
```html
<head>
<title>My Gurted Page</title>
<icon src="https://example.com/icon.png">
<meta name="theme-color" content="#1a202c">
<meta name="description" content="Page description">
<font name="roboto" src="https://fonts.gstatic.com/.../roboto.woff2" />
<style>/* CSS rules */</style>
<script src="script.lua" />
</head>
<body>
<!-- Content goes here -->
</body>
```
## Text Elements
### Headers
Headers are styled with progressive sizes and bold text:
```html
<h1>Header 1</h1> <!-- text-5xl font-bold -->
<h2>Header 2</h2> <!-- text-4xl font-bold -->
<h3>Header 3</h3> <!-- text-3xl font-bold -->
<h4>Header 4</h4> <!-- text-2xl font-bold -->
<h5>Header 5</h5> <!-- text-xl font-bold -->
<h6>Header 6</h6> <!-- text-base font-bold -->
```
### Paragraphs and Inline Text
Paragraphs and inline text elements support various styles:
```html
<p>Normal paragraph text with automatic wrapping</p>
<p style="font-mono">Monospace font paragraph</p>
<p style="font-sans">Sans-serif font (default)</p>
<p style="font-roboto">Custom web font</p>
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<small>Small text</small>
<mark>Highlighted text</mark>
<code>Inline code with monospace</code>
<span>Generic inline container</span>
```
### Preformatted Text
The `<pre>` element preserves whitespace and line breaks:
```html
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
```
### Links
Links can point to external URLs (which open in the user's default browser) or GURT protocol links:
```html
<a href="https://example.com">External link</a>
<a href="gurt://internal.site">GURT protocol link</a>
```
### Line Breaks
Line breaks can be added using the `<br>` tag:
```html
<p>First line<br>Second line</p>
```
## Container Elements
### Division Elements
Generic containers with full flexbox support:
```html
<div style="flex flex-col gap-4 p-4 bg-[#f8fafc] rounded">
<h2>Content Area</h2>
<p>Container content</p>
</div>
```
### Separators
Visual dividers for content sections:
```html
<separator /> <!-- Horizontal separator (default) -->
<separator direction="horizontal" />
<separator direction="vertical" />
```
## List Elements
### Unordered Lists
Support multiple bullet styles:
```html
<ul> <!-- Default disc bullets -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul type="circle"> <!-- Circle bullets -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul type="square"> <!-- Square bullets -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul type="none"> <!-- No bullets -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
### Ordered Lists
Multiple numbering systems supported:
```html
<!-- Default decimal numbering: 1, 2, 3... -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Zero-padded numbering: 01, 02, 03... -->
<ol type="zero-lead">
<li>First item</li>
<li>Second item</li>
</ol>
<!-- Lowercase letters: a, b, c... -->
<ol type="lower-alpha">
<li>First item</li>
<li>Second item</li>
</ol>
<!-- Uppercase letters: A, B, C... -->
<ol type="upper-alpha">
<li>First item</li>
<li>Second item</li>
</ol>
<!-- Lowercase Roman: i, ii, iii... -->
<ol type="lower-roman">
<li>First item</li>
<li>Second item</li>
</ol>
<!-- Uppercase Roman: I, II, III... -->
<ol type="upper-roman">
<li>First item</li>
<li>Second item</li>
</ol>
```
## Form Elements
### Input Types
Comprehensive form input support with validation:
#### Text Input
```html
<input type="text" placeholder="Enter your name" value="John" maxlength="20" minlength="3" />
```
#### Password Input
```html
<input type="password" placeholder="Your password..." />
```
#### Email Input
```html
<input type="email" placeholder="Enter your email address" pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$" />
```
#### Checkbox
```html
<input type="checkbox" />
<input type="checkbox" value="true" checked="true" />
```
#### Radio Buttons
```html
<input type="radio" group="food" />
<span>Pizza</span>
<input type="radio" group="food" />
<span>Pasta</span>
<input type="radio" group="food" checked="true" />
<span>Salad</span>
```
#### Color Picker
```html
<input type="color" value="#ff0000" />
```
#### Date Picker
```html
<input type="date" value="2024-01-15" />
```
#### Range Slider
```html
<input type="range" min="0" max="100" step="5" value="50" style="max-w-32 max-h-8" />
```
#### Number Input
```html
<input type="number" min="1" max="10" step="0.5" value="5" placeholder="Enter number" />
```
#### File Upload
```html
<input type="file" accept=".txt,.pdf,image/*" />
```
### Buttons
Basic and styled buttons with various states:
```html
<!-- Basic buttons -->
<button>Normal Button</button>
<button disabled="true">Disabled Button</button>
<!-- Styled buttons -->
<button style="bg-[#3b82f6] text-white px-4 py-2 rounded
hover:bg-[#2563eb] active:bg-[#1e40af]">
Primary Button
</button>
<button style="bg-[#10b981] text-white px-4 py-2 rounded-lg
hover:bg-[#059669] active:bg-[#047857]">
Success Button
</button>
<!-- Form submission -->
<button type="submit">Submit Form</button>
```
### Select Dropdowns
Dropdown menus with option support:
```html
<select style="text-center max-w-40 max-h-32">
<option value="option1">Option 1</option>
<option value="option2" selected="true">Option 2 (Selected)</option>
<option value="option3">Option 3</option>
<option value="option4" disabled="true">Option 4 (Disabled)</option>
</select>
```
### Textarea
Multi-line text input with configuration options:
```html
<!-- Basic textarea -->
<textarea></textarea>
<!-- Configured textarea -->
<textarea cols="30" rows="5" maxlength="200" placeholder="Enter your message..."></textarea>
<!-- Read-only textarea -->
<textarea readonly="true">This text cannot be edited</textarea>
<!-- Disabled textarea -->
<textarea disabled="true" value="Disabled content"></textarea>
```
### Forms
Form containers with automatic layout:
```html
<form action="/submit" method="POST" style="flex flex-col gap-4 w-80 mx-auto">
<input type="text" placeholder="Name" required="true" />
<input type="email" placeholder="Email" required="true" />
<textarea placeholder="Message" rows="4"></textarea>
<button type="submit" style="bg-[#4ade80] text-white py-2 rounded">
Submit
</button>
</form>
```
## Media Elements
### Images
Network image loading with sizing controls:
```html
<img src="https://example.com/image.jpg" style="max-w-24 max-h-24 rounded" />
<img src="gurt://local.site/image.png" style="w-32 h-32" />
```
## Advanced Features
### Custom Fonts
Load and use web fonts:
```html
<head>
<font name="roboto" src="https://fonts.gstatic.com/.../roboto.woff2" />
<style>
body { font-roboto }
h1 { font-roboto text-3xl font-bold }
</style>
</head>
```
The name provided in the `name` attribute is used for `font-[family]` styling in CSS.
### CSS Selectors
Advanced CSS selector support for complex styling:
```html
<head>
<style>
/* Descendant selectors */
div p { text-[#663399] }
.container span { bg-[#ffeeaa] }
/* Direct child selectors */
.outer > p { font-bold }
.parent > button { bg-[#44cc88] }
/* Adjacent sibling selectors */
h1 + p { text-[#ff0000] font-bold }
h2 + div { bg-[#eeffee] }
/* General sibling selectors */
h1 ~ p { text-[#0000ff] }
h3 ~ span { bg-[#ffdddd] }
/* Attribute selectors */
input[type="text"] { border bg-[#f9f9f9] }
a[href^="https"] { text-[#008000] font-bold }
button[disabled] { bg-[#888888] text-[#cccccc] }
input[placeholder*="email"] { border-2 border-[#0066cc] }
div[style$="special"] { bg-[#ffffaa] }
</style>
</head>
```
These will be documented in detail in the CSS section.
### Interactive States
Pseudo-class support for dynamic styling:
```html
<button style="bg-[#3498db] text-white rounded-lg px-4 py-2
hover:bg-[#2980b9] hover:text-[#f8f9fa]
active:bg-[#1f618d] active:text-[#ecf0f1]">
Multi-State Button
</button>
<div style="cursor-pointer bg-[#1e293b] p-4 rounded-lg">
<p>Clickable container with pointer cursor</p>
<p>Child elements inherit the cursor style</p>
</div>
```
### Flexbox Layout
Gurted supports web-standard flexbox through [Yoga - layout engine by Meta](https://www.yogalayout.dev/):
```html
<!-- Flex container with gap and alignment -->
<div style="flex flex-row gap-4 justify-between items-center
w-64 h-16 bg-[#f0f0f0]">
<span style="bg-[#ffaaaa] w-16 h-8 flex items-center justify-center">A</span>
<span style="bg-[#aaffaa] w-16 h-8 flex items-center justify-center">B</span>
<span style="bg-[#aaaaff] w-16 h-8 flex items-center justify-center">C</span>
</div>
<!-- Flex column with wrapping -->
<div style="flex flex-col flex-wrap gap-2 items-center h-32 w-32">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>
<!-- Flex grow/shrink/basis -->
<div style="flex flex-row gap-2 w-64">
<span style="flex-grow-1 bg-[#ffaaaa]">Grow 1</span>
<span style="flex-grow-2 bg-[#aaffaa]">Grow 2</span>
<span style="flex-shrink-0 w-16 bg-[#aaaaff]">No Shrink</span>
</div>
<!-- Self alignment -->
<div style="flex flex-row h-24 items-stretch gap-2">
<span style="self-start bg-[#ffaaaa]">Start</span>
<span style="self-center bg-[#aaffaa]">Center</span>
<span style="self-end bg-[#aaaaff]">End</span>
<span style="self-stretch bg-[#ffffaa]">Stretch</span>
</div>
```
### Border Styling
Border styling supports various widths, sides, and colors:
```html
<!-- Border widths -->
<div style="border p-2">Default border (1px)</div>
<div style="border-2 p-2">2px border</div>
<div style="border-4 p-2">4px border</div>
<!-- Border sides -->
<div style="border-t p-2">Top border only</div>
<div style="border-r p-2">Right border only</div>
<div style="border-b p-2">Bottom border only</div>
<div style="border-l p-2">Left border only</div>
<!-- Border styles -->
<div style="border border-solid p-2">Solid border</div>
<div style="border border-dashed p-2">Dashed border</div>
<div style="border border-dotted p-2">Dotted border</div>
<!-- Border colors -->
<div style="border-2 border-red-500 p-2">Red border</div>
<div style="border-2 border-[#3b82f6] p-2">Custom hex border</div>
```
## Default Styling
Gurted provides sensible defaults for all HTML elements:
- **Body**: `text-base text-[#000000] text-left`
- **Headers**: Progressive scaling from `text-5xl` (h1) to `text-base` (h6), all `font-bold`
- **Buttons**: `bg-[#1b1b1b] rounded-md text-white` with hover states
- **Links**: `text-[#1a0dab]` (classic web blue)
- **Code**: `text-xl font-mono`
- **Mark**: `bg-[#FFFF00]` (yellow highlight)
- **Small**: `text-xl` (smaller than base)
And more.

77
docs/docs/intro.md Normal file
View File

@@ -0,0 +1,77 @@
---
sidebar_position: 1
---
# Introduction
**Gurted** is a project introducing a new web ecosystem, featuring:
- the **gurt:// protocol**
- a custom search engine
- a custom browser - **Flumi**
- a custom **DNS** (Domain Name System)
- a modern approach to web content via a modified HTML, CSS and Lua standard
### The GURT Protocol
**GURT** is a *content delivery protocol* similar to HTTPS. It's the core of how Gurted applications communicate.
## Getting Started
Get started by **exploring Gurted sites** or **try creating your first GURT page**.
To get started, download:
- [Flumi](https://gurted.com/download/), the official browser for `gurt://`
- A *text editor* of choice, we recommend [Visual Studio Code](https://code.visualstudio.com/download)
## Components
Gurted consists of three main components:
### 1. A modified HTML standard
```html
<head>
<title>Yo Gurt</title>
<icon src="gurt://example.real/icon.png">
<style>...</style>
</head>
<body>
<h1 style="text-3xl font-bold text-center">Welcome to Gurted!</h1>
<p style="text-lg text-center">A new way to the web (ᵔᴥᵔ)</p>
</body>
```
### 2. Utility-First CSS
Tailwind-inspired styling system implemented natively:
```html
<div style="flex flex-col gap-4 p-4 bg-[#f8fafc] rounded">
<h2 style="text-2xl font-bold text-[#1e293b]">Content Area</h2>
<p style="text-[#64748b]">Style with utility classes</p>
</div>
```
### 3. Lua Scripting
```html
<script>
-- Modify tag
local heading = gurt.select('h1');
heading:text('Oh, I changed!')
-- Create a div
local new_div = gurt.create('div', {
style = 'bg-red-500 p-4'
})
gurt.select('body'):append(new_div)
</script>
```
## Facts about Flumi
Flumi, the wayfinder of Gurted, is created in **Godot** - the game engine.
This allows for faster development, native performance, cross-platform by design, and *advanced features* we'll explore later... 😏