This starter-template has little to no styling - on purpose. It assembles some clever solutions and basic structuring of an eleventy-site. It is a starter point with working Sass transforamtion and many more. But styling, structure and templating is individually. So this project stops before getting too much sold into designing.
The standard-language of the templates is set on German. Please change it in the data-file "metadata.json", when necessary.
The structure of the project was chosen after watching a talk by Jérôme Coupé, He wrote is thoughts down in a short and (in my view) important article: Structuring Eleventy projects
Some solutions like the shortcodes and some filters were taken from the great starter project eleventy excellent by Lene Saile.
layoutdefines the used layout-file.titlewill become the page title and the content ofh1sublinewill become the subline (optional)permalinkwill overwrite the usual filename. This is an eleventy-variable.bodyClasswill become the class of thebody-elementeleventyNavigationhas a least one attribute:keywhich sorts the page to a navigation category. A second possible option isorder. More about the navigation-plugin can be found in the documentation.
The extension markdown-it-attrs makes it possible to add attributes (classes, data-attributes, id ...) to elements in a markdown file.
input:
# This is a title {.c-article-section__title}
This is a paragraph with data-state {data-state=important}
Another text with attributes {.c-article-section__disclaimer #articleId attr=value attr2="spaced value"}
{.u-shadow}
[Link in a new tab](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a){target="_blank" rel="noopener"}output:
<h1 class="c-article-section__title">This is a title</h1>
<p data-state=important>This is a paragraph with data-state</p>
<p class="c-article-section__disclaimer" id="articleId" attr=value attr2="spaced value">Another text with attributes</p>
<img class="u-shadow" src="image.jpg" alt="Alt text">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank" rel="noopener">Link in a new tab</a>