📦 parcel-starter-modern

A modern Parcel starter aiming for high productivity with mostly vanilla techniques.

🚀 Getting started

Clone this project (e.g. with git clone)
Run yarn or npm install inside the root directory of the cloned project to install all the required dependencies
Start a development server by yarn start or npm run start
- Other scripts like build, lint and format are also available

🐠 Modern ECMAScript transforms

Use next generation JavaScript today with the help of Babel and its env preset, configurable to support the browsers of your choice.

💡 Stay up to date with the latest ECMAScript proposals and utilize them without fear from lack of browser support.

💅 Enhanced style management

SCSS, a superset of CSS can be used for styling pages. The usage of Sass-specific extensions is optional, as every valid CSS stylesheet is a valid SCSS file with the same meaning.

The default style of browsers is normalized by modern-normalize.

Stylesheets are processed by PostCSS, providing proper browser support for modern CSS syntax through its env preset and Autoprefixer.

✨ Superior developer experience

Automatic code formatting

Prettier is an opinionated code formatter aiming to provide codebase consistency when multiple developers work on the same project. The main reason behind adopting Prettier is to stop all the on-going debates over coding styles.

Linting

Linters are tools that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

JavaScript files are linted by ESLint, enforcing the Airbnb JavaScript Style Guide through an overridable set of rules provided by eslint-config-airbnb-base.
SCSS files are linted by stylelint, adhering to the rules specified in stylelint-config-recommended-scss and the declaration order conventions of idiomatic-css (enforced by stylelint-config-idiomatic-order).

Construct flexible layouts with ease

Bulma is a modular, mobile-first CSS framework. It can be used along with the HTML viewport meta tag to build responsive websites with ease.

🛠️ Configurable with reasonable defaults

Override the list of targeted browsers

By default, Parcel targets modern browsers. This behavior can be overrided in numerous ways, e.g. by a .browserslistrc config file:

> 1%
last 2 versions

Opt-in templating support

Building a multi-page website may introduce unwanted redundancy to your project. In this case, consider using an HTML templating solution.

💡 Pages with similar layout should rely on a single template instead of duplicated code.

Example

To demonstrate the concept of templating, a "vanilla-like" solution will be used.

Firstly, install posthtml-extend (or the templating library of your choice):

yarn add posthtml-extend

After that, add a .posthtmlrc file to the root of your project, as instructed by the official Parcel docs:

{
  "plugins": {
    "posthtml-extend": {
      "root": "./src/layouts"
    }
  }
}

Finally, create a new layout and a page based on it.

src/layouts/index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <title>
    <block name="title"> | Website title</block>
  </title>
</head>

<body>
  <main>
    <block name="main" />
  </main>

  <footer>
    <block name="footer">Footer content</block>
  </footer>
</body>

</html>

src/pages/index.html:

<!-- The line below refers to "src/layouts/index.html", as specified in ".posthtmlrc" -->
<extends src="index.html">
  <block name="title" type="prepend">Page title</block>

  <block name="main">
    <h1>Hello, templating!</h1>
    <p>Goodbye, code duplication!</p>
  </block>

  <block name="footer" type="append"> – Author name</block>
</extends>

The result should look as follows:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <title>
    Page title | Website title
  </title>
</head>

<body>
  <main>
    <h1>Hello, templating!</h1>
    <p>Goodbye, code duplication!</p>
  </main>

  <footer>
    <block name="footer">Footer content – Author name</block>
  </footer>
</body>

</html>

kripod / parcel-starter-modern Goto Github PK