a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1/**
2 * CSS & Typography Section
3 * Showcases VoltX CSS styling capabilities, typography, and component features
4 */
5
6import * as dom from "../utils";
7
8export function createCssSection(): HTMLElement {
9 return dom.article(
10 { id: "css" },
11 dom.h2(null, "VoltX.css"),
12 dom.section(
13 null,
14 dom.h3(null, "Headings & Hierarchy"),
15 dom.p(
16 null,
17 "Volt CSS provides a harmonious type scale based on a 1.25 ratio (major third).",
18 dom.small(
19 null,
20 "The modular scale creates visual hierarchy without requiring any CSS classes. Font sizes range from 0.889rem to 2.566rem.",
21 ),
22 " All headings automatically receive appropriate sizing, spacing, and weight.",
23 ),
24 dom.h4(null, "Level 4 Heading"),
25 dom.p(null, "Demonstrates the fourth level of hierarchy."),
26 dom.h5(null, "Level 5 Heading"),
27 dom.p(null, "Even smaller, but still distinct and readable."),
28 dom.h6(null, "Level 6 Heading"),
29 dom.p(null, "The smallest heading level in the hierarchy."),
30 ),
31 dom.section(
32 null,
33 dom.h3(null, "Tufte-Style Sidenotes"),
34 dom.p(
35 null,
36 "One of the signature features of Volt CSS is Tufte-style sidenotes.",
37 dom.small(
38 null,
39 "Edward Tufte is renowned for his work on information design and data visualization. His books feature extensive use of margin notes that provide context without interrupting the main narrative flow.",
40 ),
41 " These appear in the margin on desktop and inline on mobile devices.",
42 ),
43 dom.p(
44 null,
45 "Sidenotes are created using the semantic ",
46 dom.code(null, "<small>"),
47 " element.",
48 dom.small(
49 null,
50 "The <small> element represents side comments and fine print, making it semantically appropriate for sidenotes. No custom attributes needed!",
51 ),
52 " This keeps markup clean and portable while maintaining semantic meaning.",
53 ),
54 dom.p(
55 null,
56 "The responsive behavior ensures readability across all devices.",
57 dom.small(
58 null,
59 "On narrow screens, sidenotes appear inline with subtle styling. On wider screens (≥1200px), they float into the right margin.",
60 ),
61 " Try resizing your browser to see the effect.",
62 ),
63 ),
64 dom.section(
65 null,
66 dom.h3(null, "Lists"),
67 dom.p(null, "Both ordered and unordered lists are styled with appropriate spacing:"),
68 dom.h4(null, "Unordered List"),
69 dom.ul(
70 null,
71 ...dom.repeat(dom.li, [
72 "Reactive signals for state management",
73 "Computed values derived from signals",
74 "Effect system for side effects",
75 "Declarative data binding via attributes",
76 ]),
77 ),
78 dom.h4(null, "Ordered List"),
79 dom.ol(
80 null,
81 ...dom.repeat(dom.li, [
82 "Define your signals and computed values",
83 "Write semantic HTML markup",
84 "Add data-volt-* attributes for reactivity",
85 "Mount the scope and watch the magic happen",
86 ]),
87 ),
88 dom.h4(null, "Description List"),
89 dom.dl(
90 null,
91 ...dom.kv([["Signal", "A reactive primitive that holds a value and notifies subscribers of changes."], [
92 "Computed",
93 "A derived value that automatically updates when its dependencies change.",
94 ], ["Effect", "A side effect that runs when its reactive dependencies change."]]),
95 ),
96 ),
97 dom.section(
98 null,
99 dom.h3(null, "Blockquotes & Citations"),
100 dom.blockquote(
101 null,
102 dom.p(
103 null,
104 "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.",
105 ),
106 dom.cite(null, "Antoine de Saint-Exupéry"),
107 ),
108 dom.blockquote(
109 null,
110 dom.p(
111 null,
112 "The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly.",
113 ),
114 dom.cite(null, "Donald Knuth"),
115 ),
116 ),
117 dom.section(
118 null,
119 dom.h3(null, "Code & Preformatted Text"),
120 dom.p(null, "Inline code uses ", dom.code(null, "monospace font"), " for clarity."),
121 dom.p(null, "Code blocks preserve formatting and provide syntax-appropriate styling:"),
122 dom.pre(
123 null,
124 dom.code(
125 null,
126 `import { signal, computed, mount } from 'volt';
127
128const count = signal(0);
129const doubled = computed(() => count.get() * 2);
130
131mount(document.querySelector('#app'), {
132 count,
133 doubled,
134 increment: () => count.set(count.get() + 1)
135});`,
136 ),
137 ),
138 ),
139 dom.section(
140 null,
141 dom.h3(null, "Tables"),
142 dom.p(
143 null,
144 "Tables receive zebra striping and responsive styling automatically.",
145 dom.small(
146 null,
147 "Tables use alternating row colors for improved scannability. On mobile, they remain scrollable horizontally if needed.",
148 ),
149 ),
150 dom.table(
151 null,
152 dom.thead(null, dom.tr(null, ...dom.repeat(dom.th, ["Feature", "Volt.js", "Framework X", "Framework Y"]))),
153 dom.tbody(
154 null,
155 dom.tr(null, ...dom.repeat(dom.td, ["Bundle Size", "< 15KB gzipped", "~40KB", "~30KB"])),
156 dom.tr(null, dom.td(null, "Virtual DOM"), dom.td(null, "No"), dom.td(null, "Yes"), dom.td(null, "Yes")),
157 dom.tr(null, ...dom.repeat(dom.td, ["Reactive System", "Signals", "Proxy-based", "Observable"])),
158 dom.tr(null, ...dom.repeat(dom.td, ["Learning Curve", "Gentle", "Moderate", "Steep"])),
159 ),
160 ),
161 ),
162 dom.section(
163 null,
164 dom.h3(null, "Tooltips"),
165 dom.p(null, "VoltX CSS includes pure-CSS tooltips with zero JavaScript. Try hovering over these examples:"),
166 dom.p(
167 null,
168 dom.abbr({ "data-vx-tooltip": "Tooltips appear on top by default", "data-placement": "top" }, "Top"),
169 " · ",
170 dom.abbr({ "data-vx-tooltip": "Tooltips can appear on the right", "data-placement": "right" }, "Right"),
171 " · ",
172 dom.abbr({ "data-vx-tooltip": "Tooltips can appear on the bottom", "data-placement": "bottom" }, "Bottom"),
173 " · ",
174 dom.abbr({ "data-vx-tooltip": "Tooltips can appear on the left", "data-placement": "left" }, "Left"),
175 ),
176 dom.p(
177 null,
178 dom.small(
179 null,
180 "Tooltips use the data-vx-tooltip attribute and are styled with pure CSS. They automatically hide on mobile devices for better touch interaction.",
181 ),
182 ),
183 dom.h4(null, "Implementation"),
184 dom.p(
185 null,
186 "Add the ",
187 dom.code(null, "data-vx-tooltip"),
188 " attribute with your tooltip text, and optionally specify ",
189 dom.code(null, "data-placement"),
190 " (top, right, bottom, left) for positioning.",
191 ),
192 dom.pre(
193 null,
194 dom.code(
195 null,
196 `<abbr data-vx-tooltip="Helpful tooltip text"
197 data-placement="top">
198 Hover me
199</abbr>`,
200 ),
201 ),
202 ),
203 dom.section(
204 null,
205 dom.h3(null, "Accordions"),
206 dom.p(
207 null,
208 "Native HTML ",
209 dom.code(null, "<details>"),
210 " and ",
211 dom.code(null, "<summary>"),
212 " elements provide semantic accordion functionality.",
213 dom.small(
214 null,
215 "The details element is fully accessible by default, with keyboard navigation built in. VoltX CSS styles it beautifully without requiring any JavaScript.",
216 ),
217 ),
218 dom.details(
219 null,
220 dom.summary(null, "What is VoltX.js?"),
221 dom.p(
222 null,
223 "VoltX.js is a lightweight reactive framework for building declarative user interfaces. It uses signals for reactivity and provides HTML-driven behavior through data-volt-* attributes.",
224 ),
225 ),
226 dom.details(
227 null,
228 dom.summary(null, "How does reactivity work?"),
229 dom.p(
230 null,
231 "VoltX uses a signal-based reactive system. When a signal changes, all computed values and effects that depend on it automatically update. The DOM bindings subscribe to these signals and update the UI accordingly.",
232 ),
233 ),
234 dom.details(
235 null,
236 dom.summary(null, "What about styling?"),
237 dom.p(
238 null,
239 "VoltX CSS is a classless CSS framework inspired by Pico CSS and Tufte CSS. It provides beautiful, semantic styling without requiring any CSS classes. Just write semantic HTML and it looks great!",
240 ),
241 ),
242 ),
243 dom.section(
244 null,
245 dom.h3(null, "Dialogs"),
246 dom.p(
247 null,
248 "Native ",
249 dom.code(null, "<dialog>"),
250 " elements provide semantic modal functionality with built-in accessibility.",
251 dom.small(
252 null,
253 "The dialog element includes keyboard handling (ESC to close), focus trapping, and backdrop support. Modern browsers support it natively.",
254 ),
255 " VoltX CSS styles dialogs elegantly with proper backdrop blur and animations.",
256 ),
257 dom.p(
258 null,
259 "Dialogs require JavaScript to open and close (using ",
260 dom.code(null, "showModal()"),
261 " and ",
262 dom.code(null, "close()"),
263 " methods). ",
264 "See the ",
265 dom.a({ href: "/interactivity" }, "Interactivity section"),
266 " for a working dialog demo.",
267 ),
268 dom.h4(null, "Structure"),
269 dom.p(null, "Dialogs should follow this semantic structure for proper styling:"),
270 dom.pre(
271 null,
272 dom.code(
273 null,
274 `<dialog id="my-dialog">
275 <article>
276 <header>
277 <h3>Dialog Title</h3>
278 <button aria-label="Close">×</button>
279 </header>
280 <!-- Dialog content -->
281 <footer>
282 <button>Cancel</button>
283 <button>Confirm</button>
284 </footer>
285 </article>
286</dialog>`,
287 ),
288 ),
289 ),
290 dom.section(
291 null,
292 dom.h3(null, "Additional Features"),
293 dom.p(null, "VoltX CSS includes comprehensive styling for all semantic HTML elements:"),
294 dom.ul(
295 null,
296 ...dom.repeat(dom.li, [
297 "Typography with modular scale and Tufte-style sidenotes",
298 "Form elements with consistent, accessible styling",
299 "Tables with zebra striping and responsive behavior",
300 "Code blocks with syntax-appropriate styling",
301 "Blockquotes and citations",
302 "Responsive images and media",
303 "And much more, all without CSS classes!",
304 ]),
305 ),
306 dom.p(null, "Explore the other sections of this demo to see these features in action."),
307 ),
308 );
309}