YAES

screenshot of YAES
22mahmoud
By22mahmoud

YAES

Starter kit for your next eleventy(11ty) project using postcss, es6, snowpack, webpack.

GithubLive Demo

Overview

YAES (Yet another eleventy starter) is a web development starter kit that utilizes the Eleventy (11ty) static site generator. It is designed to provide developers with a fast and efficient workflow for building static websites. This starter kit incorporates a variety of technologies and features to streamline the development process.

Features

  • Fast development using snowpack: YAES utilizes Snowpack, a lightweight front-end build tool, to enable fast development and rapid prototyping.
  • Bundle & minify output using webpack: Webpack is utilized to bundle and minify the output, ensuring optimized performance and reduced file sizes.
  • Native lazy loading: YAES implements native lazy loading, allowing images and other assets to be loaded only when they enter the viewport, improving page load times.
  • Custom image shortcode: YAES includes a custom shortcode for images, featuring options such as specifying image source and alternative text.
  • Generate multiple sizes for each image: YAES automatically generates multiple sizes for each image, optimizing them for different screen resolutions and improving loading speed.
  • Generate blurry placeholder: YAES generates a blurry placeholder image for each image, providing a smooth loading experience and reducing visual jank.
  • Transcode images to webp and generate picture element: YAES transcodes images to the WebP format and generates the <picture> element, ensuring optimal image rendering across different browsers and devices.
  • Download remote images: YAES includes functionality to download and cache remote images, minimizing the reliance on external resources.
  • Minify all images using imagemin: YAES utilizes imagemin to minify all images, reducing their file size and improving overall site performance.
  • Modern CSS using Postcss: YAES incorporates Postcss, a versatile CSS preprocessor, to enable modern CSS features and enhance development efficiency.
  • Inline critical CSS and lazy-load the rest: YAES optimizes CSS loading by inline-loading critical CSS, ensuring a fast initial rendering, and lazy-loading the remaining CSS for improved performance.
  • Remove unwanted CSS using Purgecss: YAES utilizes Purgecss, a tool for removing unused CSS, to eliminate any unnecessary styles and reduce file sizes.
  • Minify output using cssnano: YAES employs cssnano, a CSS minification tool, to remove whitespace and reduce overall CSS file size.
eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

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.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.