frontenso-11ty-starter
Core Features
- Component-based approach.
- Fast builds with Gulp, SCSS, Tailwind CSS, and PostCSS support.
- Modern image formats out of the box (AVIF, WebP) and image optimization.
- No JS-framework dependencies (you can add preact or any other framework though).
- Live reloading.
- Linters included.
- System notifications for build errors.
- Webpack config for most cases.
- SVG sprite generation and optimization.
- Environment variables support via .env files.
- HTML minification for production builds.
- Flexible static path configuration.
- (Optional) Tailwind CSS with JIT.
- (Optional) TypeScript support using JSDoc notation.
This is a production-ready component-based starter that features Nunjucks, SCSS, Tailwind CSS, Webpack, ESNext, and live reloading.
Please also read the documentation on GitHub
A UI component example (check out the code)
A UI component example that has JS code
Slide 1
Slide 2
Slide 3
Slide 4
Image example 1. AVIF and WebP are generated using { % image % } Nunjucks tag.
Image example 2. maxWidth=500 is passed. AVIF and WebP are also generated.
An image inlined in CSS example (compress such images manually!). Not recommended for wide usage, see below.
Attention! Please use this feature with caution as it may bloat the final CSS file. Inlining images could be a good approach if the file is quite small, in other cases prefer `{% image %}` tag.
Vector image example (using SVG sprite)
Tailwind CSS Example
Some section
Movies
For cosy evenings