Frontend boilerplate

A simple HTML5 frontend boilerplate to kick off your responsive websites. Written in SCSS and based on the BEM naming convention.

This boilerplate runs on Parceljs 1.x as module bundler and yarn scripts as task runner. Feel free to fork it ;)

• Demo
• Github repository

Features

• Parceljs website and the benefits of it
• HTML5 template page demo
• Optimised font setup with Google Fonts
• Normalize.css for CSS reset stylesheet
• Sass, mixins and functions (dedicated sass mixin for media queries based on Sass mq)
• CSS helper classes
• Basic UI components including:
• Typography
• Buttons
• Blockquote
• A responsive grid using CSS grid and not flexbox
• Forms elements
• Tables
• Figure
• Babel with preset-env
• PostCSS: see package.json (unfortunately Parceljs doesn't support well .postcssrc file...)
• Stylelint linter

Yarn scripts

• yarn dev: start the project on localhost:8000
• yarn build: build the project in the dist folder
• yarn prebuild: remove the dist folder
• yarn stylelint: lint all the scss files

Code formatter

• Prettier

Browser support

As it's a personal project I don't want to waste time working on Internet Explorer. However with few polyfills and a flexbox based grid system this project could run on IE...

• Chrome (latest 2)
• Edge (latest 2)
• Firefox (latest 2)
• Internet Explorer 11
• Opera (latest 2)
• Safari (latest 2)

Setup

Requirements

Use brew or install nodejs from here

brew install node

Node ">=12.6.1"

Npm ">=6.5.0"

Clone the repository

OSX & Linux:

git clone --depth 1 https://github.com/AzuriDigital/frontend-boilerplate.git && cd frontend-boilerplate && rm -rf .git && git init

Windows:

git clone --depth 1 https://github.com/AzuriDigital/frontend-boilerplate.git && cd frontend-boilerplate && rd /s /q .git && git init

Install dependencies

yarn install or npm install

Develop

With yarn:

yarn dev

or with npm:

npm run dev

Production

yarn build

or with npm:

npm run build

Licence

MIT