Examples

Minimal App-Layout

1 <!doctype html>
2 <html lang="de">
3 <head>
4   <meta charset="utf-8" />
5   <meta name="viewport" content="width=device-width, initial-scale=1" />
6   <title>xPulse Theme Demo</title>
7   {% themeAssets() %}
8 </head>
9 <body>
10   <div class="xpulse-shell">
11     <header class="xpulse-box xpulse-box--header">
12       <a class="xpulse-brand" href="/">
13         <img class="xpulse-brand__mark" src="/assets/xpulse-logo.svg" alt="xPulse" />
14         <span class="xpulse-brand__copy">
15           <strong class="xpulse-brand__title">xPulse Local</strong>
16           <small class="xpulse-brand__meta">Theme Example</small>
17         </span>
18       </a>
19     </header>
20  
21     <main class="xpulse-box xpulse-box--content">
22       <h1>Hallo Theme</h1>
23       <p>Das Layout nutzt nur Theme-Routen und `xpulse-*` Klassen.</p>
24     </main>
25   </div>
26 </body>
27 </html>

App-Theme Datei

Kein @import des Basis-Themes nötig – das Bundle enthält bereits alles. app.css enthält nur lokale Overrides:

1 /* src/themes/app.css */
2 .xpulse-shell {
3   width: min(1100px, calc(100% - 32px));
4   margin: 32px auto;
5   display: grid;
6   gap: 24px;
7 }
8  
9 .xpulse-shell__header {
10   display: grid;
11   gap: 18px;
12 }

Form-Controls

1 <form>
2   <p>
3     <label>
4       Name<br />
5       <input class="xpulse-input" type="text" name="name" />
6     </label>
7   </p>
8   <p>
9     <label>
10       Nachricht<br />
11       <textarea class="xpulse-textarea" name="message" rows="6"></textarea>
12     </label>
13   </p>
14   <p>
15     <button class="xpulse-button xpulse-button--primary" type="submit">Senden</button>
16   </p>
17 </form>

1	<!doctype html>
2	<html lang="de">
3	<head>
4	<meta charset="utf-8" />
5	<meta name="viewport" content="width=device-width, initial-scale=1" />
6	<title>xPulse Theme Demo</title>
7	{% themeAssets() %}
8	</head>
9	<body>
10	<div class="xpulse-shell">
11	<header class="xpulse-box xpulse-box--header">
12	<a class="xpulse-brand" href="/">
13	<img class="xpulse-brand__mark" src="/assets/xpulse-logo.svg" alt="xPulse" />
14	<span class="xpulse-brand__copy">
15	<strong class="xpulse-brand__title">xPulse Local</strong>
16	<small class="xpulse-brand__meta">Theme Example</small>
17	</span>
18	</a>
19	</header>
20
21	<main class="xpulse-box xpulse-box--content">
22	<h1>Hallo Theme</h1>
23	<p>Das Layout nutzt nur Theme-Routen und `xpulse-*` Klassen.</p>
24	</main>
25	</div>
26	</body>
27	</html>

1	/* src/themes/app.css */
2	.xpulse-shell {
3	width: min(1100px, calc(100% - 32px));
4	margin: 32px auto;
5	display: grid;
6	gap: 24px;
7	}
8
9	.xpulse-shell__header {
10	display: grid;
11	gap: 18px;
12	}

1	<form>
2	<p>
3	<label>
4	Name<br />
5	<input class="xpulse-input" type="text" name="name" />
6	</label>
7	</p>
8	<p>
9	<label>
10	Nachricht<br />
11	<textarea class="xpulse-textarea" name="message" rows="6"></textarea>
12	</label>
13	</p>
14	<p>
15	<button class="xpulse-button xpulse-button--primary" type="submit">Senden</button>
16	</p>
17	</form>