DEV Community

Cover image for 11ty (Eleventy) Sass Skeleton Starter
Stephanie Eckles
Stephanie Eckles

Posted on

11ty (Eleventy) Sass Skeleton Starter

After CSS, 11ty (Eleventy) is my favorite thing to talk about and create resources for. I'd like to share my new starting point for kickstarting an 11ty static site with Sass.

This starter is an evolution from my other projects that use 11ty and Sass, including:

This new Sass Skeleton starter features absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty.

It also includes minifiying and autoprefixing of styles during postbuild.

You can immediately start using it by generating a new repo from the template.

Resources to extend this and learn 11ty

Learn to build an 11ty site in 20 mins with my egghead video course and see how to add a blog and custom data.

Add auto-generated social media images by following my tutorial

Explore advanced setup of custom data through my tutorial on building a community site

For a more full-featured starter check out my 11ty Netlify Jumpstart (also works for hosts other than Netlify).

Follow @5t3ph for more posts about CSS, 11ty, and other front-end topics

Top comments (4)

hoffmann profile image
Peter Hoffmann

What is 11ty? Something like a15y or i18n?

5t3ph profile image
Stephanie Eckles

The name of a static site generator πŸ‘ It allows mixing template languages like Markdown and Nunjucks, and using JS at build time to get or process data or anything else you can use from a package dependency. You can dynamically create static pages from a headless CMS as well. Or, as in this starter, use it basically as a replacement for gulp to create a simple static site. It includes Browsersync by default for hot reload during development.

bonfiglioalessio profile image

Eleventy CMS

einomi profile image
Andrey Nikonov

You can also checkout out this 11ty starter that supports SASS and TailwindCSS out of the box