HTML, SASS, and JavaScript Starter Template

A blazing fast frontend development starter template, bundled using Parcel. ✨

Features

HTML5 partials with posthtml‑include

Split your HTML pages into smaller, more manageable files with PostHTML's Include plugin for Parcel.

Usage


<!-- index.html -->
<html>
  <head>
      <title>index.html</title>
  </head>
  <body>
      <include src="partials/header.html" locals='{
        "title": "Hello World"
      }'></include>
  </body>
</html>
  

<!-- partials/header.html -->
<header>
  <h1>{{ title }}</h1>
</header>
    

Modern ES6 JavaScript

Use modern JavaScript syntax and features like ES6 imports without the need for additional configuration.

Usage


// index.js
import helloWorld from "./scripts/helloWorld";

helloWorld();
  

// scripts/helloWorld.js

const helloWorld = () => {
  console.log("Hello world 👋");
};

export default helloWorld;
  

SASS

Use the CSS pre-processor SASS to split your CSS into separate files and use other features like variables and mixins. Check out the Parcel docs if you're interested in using another pre- or post-processor such as PostCSS, LESS, or Stylus. Or, have a look at this same starter template using vanilla CSS if you'd prefer.


// styles.scss
$link-color: #ff526f;
$link-darkened-color: #ad001d;

a {
  color: $link-color;

  &:hover {
    color: $link-darkened-color;
  }
}
        

What is Parcel? 📦

Parcel is a web application bundler with a low-configuration approach. With fast bundle times, hot module replacement and automatic code transforms, Parcel handles everything out-of-the-box so developers can focus on their application code.

For more reading check out the offical Parcel website, or my blog post which walks through building a landing page with Parcel.