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)
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
Example of using `if` statement in an HTML attribute
This starter uses twig melody parser to format .njk files with Prettier automatically on each commit. However, there is a known issue when trying to use {% if %} block in a HTML attribute.
For example, the following code would throw a syntax error during the code formatting:
<p class="{% if someExpression %}some-class-name{% endif %}">Some paragraph</p>
To avoid it use {% set %} wrapped in HTML comment (melody parser ignores HTML comments by default) like this:
<!-- {% set someClass = "some-class" if true %} -->
then you can use `someClass` in the markup like this.
<p class="{{ someClass }}">
Use any other expression instead of `true` in {% set %} block. You can also use `else` if you need. This syntax is called `if expression` in Nunjucks. It is similar to JavaScript ternary or Python one-line if expression.
For example, this text has an HTML class attribute (check the code) calculated using an `if` statement and `{% set %}` block.
NOTE. If you are still experiencing issues with formatting .njk files, just remove `prettier-plugin-twig-nunjucks-melody` npm package from your project and .njk files will not be formatted anymore.