Eleventy's Separation of concerns

Layouts in web development determines how the elements in your page are disposed. It is based on that assumption that I have been using Eleventy layouts inside my projects. Turns out, you can do much more with it than what’s possible with traditional layouts.

Eleventy is a static site generator that does not impose any particular architecture for setting up a new project. While this can be confusing when getting started, it can be quite liberating to have such freedom. Depending on your preferences you can pretty much emulate how you are used to organize your projects in other frameworks. If you feel lost and prefer a less flexible architecture you can start by exploring tons of excellent Eleventy sample projects built by the community.

Once the basic set up is done, you can dive into one of the core concepts of Eleventy; templating. A template in Eleventy is a file that Eleventy transforms into a page, or a file that will serve of a subset of another template file before being transformed into an even more complex page. Depending on how you use a template, it can be divided in 2 types:

• Content files are templates that get transformed into a page.
• Layouts are special templates that can be used to wrap other content.

You might have seen this kind of separation between content and decoration when using HTML and CSS. HTML exposes the content of a webpage whereas CSS shapes how it is presented. For a blog article, you can build a layout including a header for navigating to other pages, a footer for complemetary links and place the main content between those two.

Assuming your content resides in markdown files, if you follow the traditionnal way of buiding templates (as purely decorative) you will most likely have to insert Nunjucks logic inside your content. If not, how else would you display a list of tags under a blog article ? And that’s where I believe we strays away from the traditional idea of keeping content out of layouts.

By consistently decoupling these elements from the content file and adding it in layouts, all that remains are just content. Ones that can be entirely written in markdown.