106 lines
5.6 KiB
HTML
106 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>JavaScript Frameworks – Übersicht</title>
|
||
<style>
|
||
:root {
|
||
--dark: #1a1a2e;
|
||
--muted: #6b7280;
|
||
}
|
||
html, body { margin: 0; padding: 0; background: #fff; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||
body { padding: 24px 28px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
|
||
h1 { margin: 0 0 4px; font-size: 1.45rem; text-align: center; }
|
||
.sub { color: var(--muted); margin-bottom: 24px; font-size: 0.88rem; text-align: center; }
|
||
|
||
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
|
||
|
||
.col {
|
||
border-radius: 12px; padding: 18px 12px 16px;
|
||
display: flex; flex-direction: column; gap: 10px;
|
||
}
|
||
.col.active { outline: 2px solid var(--dark); outline-offset: 2px; }
|
||
|
||
.col-title {
|
||
font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
|
||
letter-spacing: 0.06em; color: var(--dark); text-align: center;
|
||
border-bottom: 1px solid rgba(0,0,0,0.12); padding-bottom: 8px; margin-bottom: 2px;
|
||
}
|
||
.items { display: flex; flex-direction: column; gap: 6px; }
|
||
.item {
|
||
display: flex; align-items: center; gap: 7px;
|
||
font-size: 0.82rem; font-weight: 600;
|
||
}
|
||
.item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||
.item .note { font-size: 0.7rem; font-weight: 400; color: var(--muted); display: block; }
|
||
|
||
.css-col { background: #f1f5f9; }
|
||
.fe-col { background: #fce7f3; }
|
||
.render-col { background: #ede9fe; }
|
||
.build-col { background: #dbeafe; }
|
||
.be-col { background: #d1fae5; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>JavaScript Frameworks – Übersicht</h1>
|
||
<p class="sub">Kategorien des modernen JS-Ökosystems</p>
|
||
|
||
<div class="grid">
|
||
|
||
<div class="col css-col">
|
||
<div class="col-title">CSS Frameworks</div>
|
||
<div class="items">
|
||
<div class="item"><div class="dot" style="background:#38bdf8"></div><span>Tailwind CSS<span class="note">Utility-first</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#7c3aed"></div><span>Bootstrap<span class="note">Komponenten</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#e879f9"></div><span>Pico CSS<span class="note">Classless</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#f97316"></div><span>UnoCSS<span class="note">Atomic</span></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col fe-col">
|
||
<div class="col-title">Frontend Frameworks</div>
|
||
<div class="items">
|
||
<div class="item"><div class="dot" style="background:#61dafb"></div><span>React<span class="note">Meta / Virtual DOM</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#ff3e00"></div><span>Svelte<span class="note">Compiler-based</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#42b883"></div><span>Vue<span class="note">Progressive</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#dd0031"></div><span>Angular<span class="note">Google / Full</span></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col render-col">
|
||
<div class="col-title">Rendering Frameworks</div>
|
||
<div class="items">
|
||
<div class="item"><div class="dot" style="background:#000"></div><span>Next.js<span class="note">React / SSR</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#ff3e00"></div><span>SvelteKit<span class="note">Svelte / SSR</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#42b883"></div><span>Nuxt<span class="note">Vue / SSR</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#ff5d01"></div><span>Astro<span class="note">Islands Arch.</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#0ea5e9"></div><span>Gatsby<span class="note">React / SSG</span></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col build-col">
|
||
<div class="col-title">Build Tools & Bundler</div>
|
||
<div class="items">
|
||
<div class="item"><div class="dot" style="background:#646cff"></div><span>Vite<span class="note">Dev-Server / HMR</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#2b3a42"></div><span>Webpack<span class="note">Bundler</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#f9b640"></div><span>esbuild<span class="note">Go / ultra-fast</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#3178c6"></div><span>tsc<span class="note">TypeScript</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#cc3534"></div><span>Rollup<span class="note">Libraries</span></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col be-col active">
|
||
<div class="col-title">Backend Frameworks</div>
|
||
<div class="items">
|
||
<div class="item"><div class="dot" style="background:#68a063"></div><span>Express<span class="note">Minimal / de-facto</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#3178c6"></div><span>Fastify<span class="note">Performant</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#5a45ff"></div><span>AdonisJS<span class="note">Full-stack</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#e11d48"></div><span>NestJS<span class="note">Angular-style</span></span></div>
|
||
<div class="item"><div class="dot" style="background:#000"></div><span>Hono<span class="note">Edge-ready</span></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|