frontenso-11ty-starter

Component-based approach.
Fast builds with Gulp and SCSS 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.
Webpack config for most cases.
(Optional) TailwindCSS with JIT.
(Optional) TypeScript support using JSDoc notation.

This is a production-ready component-based starter that features Nunjucks, SCSS, TailwindCSS (with JIT compiler), 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.

frontenso-11ty-starter

A UI component example (check out the code)

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