Introduction

Opinionated boilerplate that can be used to start a new static site project. JavaScript all the way down.

Description

It's built around the JAMstack idea with modern development tools as outlined in the Front-end Developer Handbook 2019. This project aims to set sensible defaults for best practices of front-end development. This boilerplate favors core web technologies (HTML, CSS, and JavaScript) for a 'simple' developer experience.

Vision

It tends to be on the front-end design side from the great divide gatekeepers.

Tech Stack

Features ✨

• Uses 11ty as a static site generator which compiles nunjucks templates
• Compiles SCSS (postcss), minifies (cssnano) & prefixes (autoprefixer)
• Linting with Stylelint and browser scope browserslist
• Minifies images using imagemin and several plugins
• Easily deployed to Netlify

11ty - Static Site Generator

Hand-coding™ is geat for one-pagers but if you need multiple pages, modularity and components based on the atomic design methology a static site generator is a must. Jekyll is really popular but Eleventy was created to be a JavaScript alternative to Jekyll. It doesn't need exhaustive configuration and works with lots of templating engines.

PostCSS - Moving away from Sass

I got tired of using Sass, it appears to be the default in every project and worked with it in several projects without leveraging all of its features. That being said, long .css files aren't gonna cut it either. I was looking for a middle ground. Since I wanted this project to heavily evolve around JavaScript I still picked postcss and only used plugins that made sense in this project. I try to mainly use native CSS features.

Files - Automating asset compression

Asset (images, video's) optimization should be automated.

Components

Progressive enhanced and inclusive.