HTML5 Boilerplate remixed by Morgan

Hello world! These are some HTML5 Static Boilerplate Files in version v0.2. I removed a few things and added a few things. The goal is that it could be useful and will always be less than 64kb in size for all the files. This is a pre v1.0 edition.

You can see a demo of the boilerplate and the code on GitHub

Works in offline local file mode in the browser and served statically from the root of the folder
Starts with zero JS or images, less than 10kb page weight, able to served as a static website
No errors logged by the Nu HTML Checker
4x100 scores on Pagespeed Insights (remote Lighthouse), Desktop and Mobile, pretty consistently

Direct Download v0.2-html5-boilerplate-remix.zip

What is boilerplate?

I have always thought of boilerplate as "the stuff that helps getting started" that can sometimes be repetitive or clunky. Some code can be repetitive setting up new projects, and that you might forget some of it if its a small custom project. This is just my flavor of website boilerplate, it is just my own edition with credits to inspiration.

Why try this?

I have found it useful and want to share this approach, as I have made a few small websites in my time. Its sometimes useful to start a close to scratch as possible.


  css/
  ├─ style.css
  img/
  ├─ (empty)
  js/
  ├─ (empty)
  404.html
  favicon.ico (placeholder)
  icon.png (placeholder)
  icon.svg (placeholder)
  index.html 
  LICENSE.txt 
  (Thank you HTML5BP)
  robots.txt
  (assumes you want it shared)
  site.webmanifest (placeholder)

What did I keep?

Basic HTML and CSS boilerplate, placeholder Favicon, SVG Icon, placeholder web manifest. Sensible defaults for CSS.

What did I get rid of?

I got rid of the build system using Parcel that required the project to have a package.json. This project is intended be launched statically, with no build process or bundling involved.
I trimmed back a few more things, like open graph tags and unecessary folders, config. I dont really like them, and would not make them for every project.

What did I add?

Fluid Typography from Utopia project. See smooth changes in pixel size when changing the viewport. I like it.
Very basic HTML and CSS to present a centered container with an advisable max-width pattern with a main element. Sets up a CTA or otherwise well.
A Modern Font Stack variation called Industrial using system fonts. No web fonts downloaded.
Adopting an optimal CSS Button styling pattern inspired by Picallili. Some of the best Ive come across.

Links and Credits

Credit to HTML5 Boilerplate for initial inspiration
Credits for tiny SVG icons from Susty Web Icons
Credit to Utopia project for CSS fluid sizing
Credit to Modern Font Stack for providing good system fonts
Credit to Piccalli for their "How I build a button component"

HTML5 Boilerplate remixed by Morgan

Contents