Simple Starter-Kit for 11ty
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 soultions like the shortcodes and some filters were taken from the great starter project eleventy excellent by Lene Saile.
The variables in the frontmatter (or *.json)
-
layoutdefines the used layout-file. -
titlewill become the page title and the content ofh1 -
sublinewill become the subline (optional) -
permalinkwill overwrite the usual filename. This is an eleventy-variable. -
bodyClasswill become the class of thebody-element -
eleventyNavigationhas 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 categories
The order of categories in _data/categories.json will be the displayed order.
The titlewill be the displayed headline, the cat is the variable with which the sorting takes place.
The folder name is reflected in the value of the cat-variable. The collection is constructed via tag. The tag is placed globally inside the local json inside the respective folfer, e.g. "css-grid.json inside the folder "css-grid".
Helpful 11ty-links
- 11ty documentation
- Nunjucks templating
- 11ty introduction
- Tips for debugging in 11ty
- Awesome Eleventy
- 11ty Plugin Repository
- 11ty Blog Posts by Bryan Robinson
- 11ty Rocks!
- 11ty Recipes