Design, Code, Performance, Usability, Accessibility

Here's a tip I found on 11ty rocks that allows you to add dynamic classes on your Eleventy template. I cleaned up the code to remove the if statements on Nunjucks templates and replaced them with or statement; personal preference

Tip: Simple, dynamic 11ty class-names

'11ty classnames screenshots'

When building dynamic websites, you will most likely find yourself working with template-driven pages controlled by a master layout(s). So it's standard practice for developers to generate dynamic CSS class-names for each page from template data, allowing them to quickly customize the look and feel of individual pages.

Here's a tip I found on 11ty rocks that allows you to add dynamic classes on your Eleventy template. I cleaned up the code to remove the if statements on Nunjucks templates and replaced them with or statement; personal preference.

The fileSlug variable is mapped from inputPath and is useful for creating your own clean permalinks.

Usage

  • You are going to need to grab the flileSlug from the 11ty supplied page data.

  • I usually add these to the body tag; you can also add them to individual components; prefix the class with the component name something like banner-main for easier identification (prefixing is optional).

Page name classes



<body class="page-{{ page.fileSlug or 'home' }}">
    ...
</body>

Component class


<header class=" header-{{ page.fileSlug or 'home' }}">
    ...
</header>

For more info visit the Eleventy Supplied Data Enjoy!

Edit this page on GitHub