Skip to content

Commit ff0b0c3

Browse files
TorstenDittmannTorstenDittmann
committed
Add launch.css LLM reference guide
1 parent 71daeda commit ff0b0c3

File tree

1 file changed

+255
-0
lines changed

1 file changed

+255
-0
lines changed

‎apps/docs/public/llm.txt‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
# launch.css - LLM Reference
2+
3+
## Overview
4+
5+
launch.css is a classless CSS framework with:
6+
- Zero classes required - uses semantic HTML elements
7+
- Light/dark theme support via color-scheme property
8+
- Two layouts: website and dashboard via data-layout attribute
9+
- Responsive design without classes
10+
- Clean styling for all HTML elements
11+
12+
## Basic Implementation
13+
14+
### HTML Structure
15+
16+
```html
17+
<!DOCTYPE html>
18+
<html lang="en">
19+
<head>
20+
<meta charset="UTF-8">
21+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
22+
<title>My launch.css Site</title>
23+
<link rel="stylesheet" href="https://unpkg.com/launch.css">
24+
</head>
25+
<body data-layout="website">
26+
<header>
27+
<nav>
28+
<a href="/">Site Title</a>
29+
<menu>
30+
<li><a href="/">Home</a></li>
31+
<li><a href="/about">About</a></li>
32+
<li><a href="/contact">Contact</a></li>
33+
</menu>
34+
</nav>
35+
</header>
36+
<main>
37+
<!-- Content goes here -->
38+
</main>
39+
<footer>
40+
<p>© 2023 - Your Site</p>
41+
</footer>
42+
</body>
43+
</html>
44+
```
45+
46+
## Theme Control
47+
48+
```css
49+
/* Dark theme */
50+
color-scheme: only dark;
51+
52+
/* Light theme */
53+
color-scheme: only light;
54+
55+
/* Auto theme */
56+
color-scheme: light dark;
57+
```
58+
59+
JavaScript implementation:
60+
```javascript
61+
document.documentElement.style.colorScheme = "only dark"; // Dark theme
62+
document.documentElement.style.colorScheme = "only light"; // Light theme
63+
```
64+
65+
## Layout Options
66+
67+
```html
68+
<body data-layout="website"> <!-- Standard layout -->
69+
<body data-layout="dashboard"> <!-- Fixed header app layout -->
70+
```
71+
72+
## Component Examples
73+
74+
### Buttons
75+
76+
```html
77+
<button>Default/Primary</button>
78+
<button aria-label="cancel action">Secondary style</button>
79+
<button aria-label="delete resource">Danger style</button>
80+
<button type="reset">Reset (secondary style)</button>
81+
<button disabled>Disabled</button>
82+
<a role="button" href="/path">Link as button</a>
83+
```
84+
85+
### Form Elements
86+
87+
```html
88+
<label for="name">Name</label>
89+
<input type="text" id="name" name="name" placeholder="Enter your name">
90+
91+
<label for="email">Email</label>
92+
<input type="email" id="email" name="email" placeholder="Enter your email">
93+
94+
<label for="message">Message</label>
95+
<textarea id="message" name="message" rows="4"></textarea>
96+
97+
<label for="option">Select</label>
98+
<select id="option" name="option">
99+
<option value="" selected>Select...</option>
100+
<option value="1">Option 1</option>
101+
</select>
102+
103+
<label>
104+
<input type="checkbox" name="checkbox">
105+
Checkbox label
106+
</label>
107+
108+
<label>
109+
<input type="checkbox" role="switch" name="switch">
110+
Toggle switch
111+
</label>
112+
113+
<fieldset>
114+
<legend>Radio group</legend>
115+
<label><input type="radio" name="radio" checked>Option 1</label>
116+
<label><input type="radio" name="radio">Option 2</label>
117+
</fieldset>
118+
119+
<button type="submit">Submit</button>
120+
```
121+
122+
### Other Components
123+
124+
```html
125+
<!-- Section/Card -->
126+
<section>
127+
<h2>Card Title</h2>
128+
<p>Content inside card-like section.</p>
129+
<button>Action</button>
130+
</section>
131+
132+
<!-- Modal Dialog -->
133+
<button onclick="myModal.showModal()">Open Modal</button>
134+
<dialog id="myModal">
135+
<header><h3>Modal Title</h3></header>
136+
<main><p>Modal content</p></main>
137+
<footer>
138+
<button aria-label="cancel" onclick="myModal.close()">Cancel</button>
139+
<button onclick="myModal.close()">Confirm</button>
140+
</footer>
141+
</dialog>
142+
143+
<!-- Accordion -->
144+
<details>
145+
<summary>Accordion Title</summary>
146+
<p>Hidden content appears when opened.</p>
147+
</details>
148+
149+
<!-- Blog/Feed -->
150+
<div role="feed">
151+
<a href="/post-1">
152+
<figure><img src="/image.jpg" alt="Post"></figure>
153+
<h2>Post Title</h2>
154+
<time datetime="2023-05-15">May 15, 2023</time>
155+
<p>Brief excerpt...</p>
156+
</a>
157+
</div>
158+
159+
<!-- Table -->
160+
<table>
161+
<thead>
162+
<tr><th>Name</th><th>Email</th></tr>
163+
</thead>
164+
<tbody>
165+
<tr><td>John Doe</td><td>[email protected]</td></tr>
166+
</tbody>
167+
</table>
168+
169+
<!-- Tabs -->
170+
<div role="tablist">
171+
<button role="tab" aria-selected="true">Tab 1</button>
172+
<button role="tab">Tab 2</button>
173+
</div>
174+
175+
<!-- Grid -->
176+
<div role="grid">
177+
<div>Grid item 1</div>
178+
<div>Grid item 2</div>
179+
</div>
180+
```
181+
182+
## Usage Guidelines
183+
184+
1. Use semantic HTML - no classes needed
185+
2. Set layout: `<body data-layout="website|dashboard">`
186+
3. Set theme: `color-scheme: only light|only dark|light dark`
187+
4. Button styling keywords:
188+
- Secondary: `aria-label="cancel|back|close"` or `type="reset"`
189+
- Danger: `aria-label="delete|remove|discard|erase|destroy|clear"`
190+
5. Form validation: `aria-invalid="true|false"`
191+
6. Important ARIA roles: `role="button|switch|tab|tablist|feed|grid|article"`
192+
193+
## ARIA Attributes Reference
194+
195+
### Button ARIA Options
196+
```html
197+
<button>Default</button>
198+
<button aria-label="cancel">Secondary</button>
199+
<button aria-label="delete">Danger</button>
200+
<button disabled>Disabled</button>
201+
<button aria-disabled="true">Visually disabled</button>
202+
<button aria-pressed="true">Toggled on</button>
203+
<button aria-expanded="false">Controls expandable</button>
204+
<button aria-haspopup="true">Opens menu/dialog</button>
205+
```
206+
207+
### Form Validation
208+
```html
209+
<input type="text" aria-invalid="true"> <!-- Invalid -->
210+
<input type="text" aria-invalid="false"> <!-- Valid -->
211+
<input type="text" required> <!-- Required -->
212+
<input type="text" aria-required="true"> <!-- Required (ARIA) -->
213+
<input type="checkbox" role="switch"> <!-- Toggle switch -->
214+
```
215+
216+
### Table ARIA
217+
```html
218+
<div role="table">
219+
<div role="rowgroup">
220+
<div role="row">
221+
<div role="columnheader">Header</div>
222+
<div role="cell">Cell</div>
223+
</div>
224+
</div>
225+
</div>
226+
```
227+
228+
### Interactive Elements
229+
```html
230+
<div role="tablist">
231+
<button role="tab" aria-selected="true">Active Tab</button>
232+
</div>
233+
234+
<progress value="25" max="100"></progress>
235+
236+
<dialog id="modal">
237+
<button aria-label="close">Close</button>
238+
</dialog>
239+
240+
<div role="feed" aria-busy="false"></div>
241+
242+
<article role="article"></article>
243+
244+
<button data-tooltip="Helpful tip">Help</button>
245+
```
246+
247+
## Responsive Design
248+
249+
Built-in breakpoints, no classes needed:
250+
- Mobile: < 576px
251+
- Small: ≥ 576px
252+
- Medium: ≥ 768px
253+
- Large: ≥ 992px
254+
- Extra Large: ≥ 1200px
255+
- Extra Extra Large: ≥ 1400px

0 commit comments

Comments
 (0)