A blazing fast frontend development starter template, bundled using Parcel. ✨
Split your HTML pages into smaller, more manageable files with PostHTML's Include plugin for Parcel.
Source Code
<!-- 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>
Use modern JavaScript syntax and features like ES6 imports without the need for additional configuration.
// index.js
import helloWorld from "./scripts/helloWorld";
helloWorld();
// scripts/helloWorld.js
const helloWorld = () => {
console.log("Hello world 👋");
};
export default helloWorld;
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;
}
}
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.