A simple static site starter project.

Built using:

• Eleventy for templates and site generation
• Parcel JS for a simple asset build pipeline
• DDBreakpoints for simplified media queries in SCSS

• Node and NPM

# install the project dependencies
npm install

# run the build and server locally
npm run start

# run the production build
npm run build

Styles are located in /src/assets/css/style.scss all the included files use an _ at the start of the name and are referenced from the style.scss file.

Add a new page to the /src/site/ folder either to the root, or to a sub-folder that doesn't start with _ - make sure to add the frontmatter as per the Eleventy and EventyNavigation documentation e.g.

---
eleventyNavigation:
  key: Home
---

{% extends "layouts/one-column-sidenav.njk" %}

There are two layouts OOTB, one with a side navigation layouts/one-column-sidenav.njk, the other without layouts/one-column.njk.

Add icons to be used in the /src/assets/icons/svgs-src/ folder. Once added run:

npm run icons

The above command will optimise and save the icons into a single sprite sheet.

The custom NJK command {{ svg.render('ICON_FILENAME') }} will render the SVG asset into the page. Make sure to set the size of the icons using CSS or they'll likely be very large. Make sure to import the SVG component into the page at the top using {% import "utils/svg.njk" as svg %}