Opinionated boilerplate to bootstrap frontend projects
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
js
styles
templates
.babelrc
.editorconfig
.eslintrc
.gitignore
.htaccess
.htmlhintrc
.htmlminrc
.stylelintrc
LICENCE.md
README.md
package-lock.json
package.json
rollup.config.js

README.md

frontend-boilerplate

This is an opinionated boilerplate to bootstrap frontend projects. It's packed with numerous tools to lint, build and minify your code.

Plus, as tasks managers are a thing of the past, it only relies on npm scripts to do all these incredibly time saving build steps.

What does it do?

  • autoprefix CSS properties that need to be,
  • build CSS from less files,
  • enforce functional sorting of css properties (only in IDE's stylelint linter),
  • bundle & compile ES6+ JS into browser compatible JS (you can import or require modules straight from npm),
  • minifie CSS, HTML and JS,
  • pre-compress HTML, CSS, JS & SVG files in Gzip and Brotli,
  • compress images into WebP for WebP capable browsers,
  • watch for files updates and run build tasks on update.

Install

The build steps make use of PHP, Gzip and Brotli. While PHP and Gzip are commonly pre-installed on *nix systems, Brotli is not. Nevertheless, it's only one command away:

# Debian-like distros
apt install brotli

# macOS
brew install brotli

Then npm install and you're good to go.

NB: although Windows 10 has Ubuntu subsystem, I haven't tested on it.

How to use?

Given the following file structure:

/
  templates/ --> *.php (can be raw html)
    parts/ --> files to be used by php (template parts like header.shtml for instance)
  styles/ --> *.less (with `main.less` being the entry point)
  js/ --> *.js (with `main.js` being the entry point)

Processed CSS will be outputed to styles/main.min.css and processed JavaScript to js/main.esm.min.js & js/main.iife.min.js. In addition all pre-compiled assets stay in their respective directories and are just appended .gz or .br extension.

  • npm run
    • css:build:dev to compile less files and add sourcemaps
    • css:build:prod to build, prefix and minify styles
    • compress:img to convert images to WebP,
    • js:build to compile and minify JS
    • phptpl:build to compile and minify templates
    • There's also a *:watch task for each of the previous task, plus global build and watch tasks.

By default, global build doesn't convert images as it might be quite long of a process and images don't change all the time. So run it manually when needed.

PHP is used as our templating engine, so you can take full advantage of all PHP's power (function, include, file_get_contents) in your templates, pure minified HTML will be outputed at the root.

You might have noticed that .shtml files are used in parts/. As regular .html files are in .gitignore to avoid commiting generated code, I happened to chose .shtml for partial files as it's originally intended for server side includes.

Apache .htaccess

There is a .htaccess file. It contains Apache boilerplate mainly to improve performances:

  • take advantage of H2 Server Push,
  • serve pre-compressed gzip or brotli files,
  • serve WebP images when supported.

It also rewrites urls for pretty urls without extension.