tonik / html-frontend-boilerplate

A modern front-end boilerplate for building fast, organized and standardized web apps or sites.

This is a template file with instructions about usage of this project. You should fill it accordingly and distribute along with project files.

Project — HTML Front-end Boilerplate

A modern front-end boilerplate for building fast, organized and standardized web apps or sites.

Requirements

Make sure you have all these dependencies installed before moving on:

• Node.js
• NPM

Dependencies

Building a project requires a few dependencies, they are needed only during development and should not be installed on production. They will be installed along with your project dependencies when running npm install command.

• Gulp - Task runner
• Nunjucks - Templates engine
• SASS - CSS preprocessor
• Babel - JavaScript ES6 to ES5 compiler
• Rollup - JavaScript bundler
• Stylelint - CSS/SCSS linter
• ESLint - JavaScript linter

Building

Destination files are not kept in the repository. This requires you to run project builder to get the final files. Start by downloading or cloning the project repository to the desired directory.

# Clone repository to the themes folder.
$ git clone [e-mail]:<repository-name>.git <project-name>

Change working directory to cloned one and run following commands.

Destination files will be outputted to the public/ directory and it will contain all necessary files.

# Change directory to the cloned folder.
$ cd <project-name>

# Install required npm dependences for building a theme.
$ npm install

# Build project for development.
$ npm run dev

# Build project for production (minify CSS, JavaScript, and images).
$ npm run prod

Development

To make development fast and pleasant builder can watch your files and automatically rebuild and refresh your browser.

# Compile project files and rebuild after changes.
$ npm run watch

There are also a few tasks to verify and autoformat source code according to configuration files.

# Verify the correctness of formatting of SASS and JavaScript.
$ npm run lint

# Run autoformatting of SASS files.
$ npm run sass:fix

# Run autoformatting of JavaScript files.
$ npm run javascript:fix

Workflow around the builder

• Don't change anything in the public directory, because it will be overwritten by the builder. This folder is read-only.