yetty: Yet another Eleventy starter kit for my (& your) new projects. Built with accessibility and performance in mind.
- Sass/Scss: Scss files are compiled before Eleventy builds the site. The files are compiled in the
./src/styles
folder and then will be passed through copy (see.eleventy.js
) to the new site created under./dist/
. For Netlify users, an alternative option with plugins is explained here: https://css-tricks.com/making-my-netlify-build-run-sass/. - Critical CSS: Critical CSS is automatically included in the head of the document using the eleventy-critical-css plugin.
- PostCSS (Autoprefixer and PurgeCSS): Both dependencies have been set up to run through the main css stylesheet after Eleventy has generated the dist folder.
- Persistent dark mode using local storage as seen here: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
- Cache busting via filter based on https://rob.cogit8.org/posts/2020-10-28-simple-11ty-cache-busting/.
- HTML minified on prooduction with https://www.npmjs.com/package/html-minifier package.
- PWA using https://github.com/okitavera/eleventy-plugin-pwa plugin.
- JS compilation and minification with Webpack CLI.
- Image processing with eleventy-img plugin. Generates multiple sizes images in two different formats (jpg and webp), and markup with
<figure>
,<picture>
and native lazy loading. - Modernizr CLI: To build a custom and minified version of the library as seen here: https://v2.14islands.com/blog/2016/04/20/better-way-to-use-modernizr-with-command-line-config/. Yetty is using it to detect if the browser supports Webp as background-image in CSS.
- Improve documentation
- Testing with Cypress
This builder is amazing. Try it out to get your own yetty site in a few clicks!
- Node.js v10 or higher must be installed to run this program.
- npm 7.20.0 or higher must be also installed.
git clone https://github.com/ygoex/yetty.git my-new-project
or, if you are currently signed in to GitHub, generate a repo from this template.
cd my-new-project
Specifically have a look at .eleventy.js
to see if you want to configure any Eleventy options differently.
npm install
For local development:
npm start
To build a production version:
npm run build
For debug mode:
DEBUG=* npx eleventy
about/index.md
shows how to add a new content page.posts/
has the blog posts but really they can live in any directory. They need only thepost
tag to be added to this collection.- Add the
nav
tag to add a template to the top level site navigation. For example, this is in use onindex.njk
andabout/index.md
. - The blog post feed template is in
feed/feed.njk
. This is also a good example of using a global data files in that it uses_data/metadata.json
. - This example uses three layouts:
_includes/layouts/base.njk
: the top level HTML structure_includes/layouts/home.njk
: the home page template (wrapped intobase.njk
)_includes/layouts/post.njk
: the blog post template (wrapped intobase.njk
)
_includes/postlist.njk
is a Nunjucks include and is a reusable component used to display a list of all the posts.index.njk
has an example of how to use it.
-
Inline CSS: If you require further control over the above the fold & common style inlined by CriticalCSS, you can inline the style manually as follows:
-
Add the following code between the head tags in the
base.njk
file:{% set css %} {% include "inline_style/inline_style.css" %} {% endset %} <style> {{css | cssmin | safe}} </style>
-
Create a scss file with the name
inline_style.scss
under_includes/inline_style/scss/inline_style.scss
-
Add the following command to the beginning of the sass:prod script in
package.json
:node-sass src/_includes/inline_style/scss/ --output src/_includes/inline_style/ --output-style compressed &&
And also, the following command to the beginning of the sass:dev script:
node-sass src/_includes/inline_style/scss/ --output src/_includes/inline_style/ --source-map true --source-map-contents true &&
For additional documentation about how to inline css in Eleventy visit:
-
This starter kit was born as a fork of eleventy-base-blog, but it also includes features inspired by other Eleventy projects: