Awesome
🎇 Starter projects
<div class="git-only">Gracile.
A thin, full-stack, web framework.
Features:
- Portable HTML, CSS and JS, thanks to Lit (SSR).
- Highly responsive during dev. and build, thanks to Vite.
- Minimal dependency footprint for its runtime and your distributable.
- Embrace web standards like Custom Elements (aka Web Components) or the WhatWG Fetch API.
- A streamlined Developer eXperience for building, instead of fiddling around.
Starters:
- Basics
- Minimal setup (static)
- Minimal setup (Bootstrap/Tailwind)
- Minimal setup with various kinds of test suites.
- Minimal setup (HTML/CSS minification)
- Minimal setup for client routing (SPA)
- Minimal server (Express)
- Minimal server (Hono)
Basics
Get up and running with this all around demo of Gracile features.
- ✅ Minimal styling (make it your own!)
- ✅ SEO-friendly with canonical URLs and OpenGraph data
- ✅ Sitemap support
- ✅ Markdown support
- ✅ SVG support
- ✅ Server-rendered Lit Elements
📥 CLI:
npm create gracile@latest -t basics
⏬ Download:
npx degit gracile-web/starter-projects/templates/basics my-project
📑 Sources: basics
</div></div> <div class="card"><div class="card-content">Minimal setup (static)
A statically generated project.
📥 CLI:
npm create gracile@latest -t minimal-static
⏬ Download:
npx degit gracile-web/starter-projects/templates/minimal-static my-project
📑 Sources: minimal-static
</div></div> <div class="card"><div class="card-content">Minimal setup (Bootstrap/Tailwind)
A project with popular vendors CSS preconfigured.
📥 CLI:
npm create gracile@latest -t minimal-bootstrap-tailwind
⏬ Download:
npx degit gracile-web/starter-projects/templates/minimal-bootstrap-tailwind my-project
📑 Sources: minimal-bootstrap-tailwind
</div></div> <div class="card"><div class="card-content">Minimal setup with various kinds of test suites.
Browser (Playwright), Unit tests (Node).
Available commands
test:unit
test:unit:dev
test:integration
test:integration:dev
test:component
test:component:dev
test:e2e
test:e2e:dev
test:all
📥 CLI:
npm create gracile@latest -t minimal-testing
⏬ Download:
npx degit gracile-web/starter-projects/templates/minimal-testing my-project
📑 Sources: minimal-testing
</div></div> <div class="card"><div class="card-content">Minimal setup (HTML/CSS minification)
Static/server and dev/build with minified CSS+HTML.
📥 CLI:
npm create gracile@latest -t minimal-minification
⏬ Download:
npx degit gracile-web/starter-projects/templates/minimal-minification my-project
📑 Sources: minimal-minification
</div></div> <div class="card"><div class="card-content">Minimal setup for client routing (SPA)
Client-side routing demo, with hydration, for any mode.
📥 CLI:
npm create gracile@latest -t minimal-client-routing
⏬ Download:
npx degit gracile-web/starter-projects/templates/minimal-client-routing my-project
📑 Sources: minimal-client-routing
</div></div> <div class="card"><div class="card-content">Minimal server (Express)
A Gracile handler, already set up with Express and static file serving.
📥 CLI:
npm create gracile@latest -t minimal-server-express
⏬ Download:
npx degit gracile-web/starter-projects/templates/minimal-server-express my-project
📑 Sources: minimal-server-express
</div></div> <div class="card"><div class="card-content">Minimal server (Hono)
A Gracile handler, already set up with Hono and static file serving.
📥 CLI:
npm create gracile@latest -t minimal-server-hono
⏬ Download:
npx degit gracile-web/starter-projects/templates/minimal-server-hono my-project
📑 Sources: minimal-server-hono
</div></div> </section> <div class="git-only"></div>“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
― Antoine de Saint-Exupéry, Airman's Odyssey