11ty Nostrils

screenshot of 11ty Nostrils

A starter config for Eleventy with pipelines for Typescript and PostCSS.

Overview

11ty Nostrils is a starter configuration for Eleventy, a static site generator. It includes pipelines for Typescript and PostCSS, allowing for efficient bundling, transforming, and optimizing of code and assets.

Features

  • Typescript bundling via swc: 11ty Nostrils utilizes the swc compiler to bundle and optimize Typescript code.
  • Transforming CSS imports to a single file: CSS imports from different files are merged into a single, optimized file.
  • Autoprefixing via postcss-preset-env: The postcss-preset-env plugin automatically adds vendor prefixes to CSS rules, ensuring cross-browser compatibility.
  • Minifying CSS via cssnano: The cssnano plugin minifies the CSS code, reducing its file size and improving performance.
  • Minifying HTML via html-minifier: The html-minifier tool is used to minify the generated HTML output, removing unnecessary whitespace and reducing file size.
  • Shortcode for generating IMG and PICTURE elements via eleventy-img plugin: 11ty Nostrils provides a shortcode that generates responsive IMG and PICTURE elements using the eleventy-img plugin.

Summary

11ty Nostrils is a starter configuration for Eleventy, enhancing it with pipelines for Typescript and PostCSS. It offers several key features such as Typescript bundling, CSS optimization, and HTML minification. While it lacks certain functionalities like SASS compilation, linting, and test frameworks, it provides a solid foundation for building static websites efficiently.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.