Readme
Minimal Eleventy template with Sass processing
- Eleventy 3.0.0
- Sass 1.80.4
- LiquidJS template engine
Files & folders
/_data: site.json + primitive-color-tokens.json/_includes: layouts & includes/blog: blog pages with pagination & parent link/doc: documentation pages with pagination & parent link/sass: SASS stylesheets with 6 files/: content pages with about & 404 page
Structure
- _includes: layouts with base + default with includes
- _includes/components: copyright + button
- _includes/navigation: footer + primary + secondary
- HTML5 landmarks:
header, div #main-content & footer, in #main-content, aside & main, in main, section with aria-labelledby
- navigation links with
tags: primary, secondary & footer
- responsive layout with grid on header + #main-content + footer, then flex on aside + main
Scripts
"watch:eleventy": "npx @11ty/eleventy --serve",
"watch:sass": "npx sass src/sass:public/103-sass-new/css --watch",
"start": "npm run watch:eleventy & npm run watch:sass",
"build": "del-cli --force public && sass src/sass:public/103-sass-new/css --style=compressed && eleventy --pathprefix '103-sass-new'"
Dependencies
"@11ty/eleventy": "^3.0.0",
"sass": "^1.80.4"
eleventy.config.mjs
eleventyConfig.setInputDirectory("src");
eleventyConfig.setOutputDirectory("public/103-sass-new");
eleventyConfig.addWatchTarget("src/sass/");
eleventyConfig.addBundle("css");
eleventyConfig.addBundle("html");
SASS design system
- normalize
- variables: colors, typography, spacing, sizing, stroke, effect
- base: HTML elements
- navigation: not responsive
Special