html-base/
├── .gulp/              # Gulp tasks
├── .vscode             # VSC custom settings
├── src/                # Source files
│   ├── favicons/       # Icons
│   ├── fonts/          # Custom Fonts
│   ├── javascript/     # Scripts and JS Resources
│   ├── images/         # Images
│   ├── images/sprite/  # SVG sprite
│   ├── layouts         # HTML parts
│   ├── scss/           # SCSS files
│   └── video/          # For video files
├── dest/               # Beautified Development build output
├── build/              # Compressed Production build output
├── test/               # Test scripts
└── json/               # JSON files

Output

Clean, tested, beautified, optimized and/or compressed HTML/CSS/JS

Usage

By Git Command

Clone the repository and install dependencies manually:

git clone https://github.com/frontend-layers/html-base.git project-name
cd project-name
npm install

By Shell Command

npx get-html-base project-name
cd project-name
npm i

Or Download html-base Zip Package for Manual Installation

https://github.com/frontend-layers/html-base/archive/refs/heads/master.zip

JS Apps Mode Install

Please add -js key

npx get-html-base project-name -js
cd project-name
npm i

Install via Package Managers

Using npm

npm i html-base

Using Yarn

yarn add html-base

Using pnpm

pnpm i html-base

After installation, copy the html-base folder from node_modules and rename it according to your project name.

Then, update the package.json and related files based on your new project title, description, owner, etc.

Finally, install all dependencies with:

Using npm

npm i

Using Yarn

yarn add

Using pnpm

pnpm i

Usage

After installation, launch the project using one of the following commands:

gulp

npm start

To update packages, use the following commands:

npm updates
npm i

Under the hood

Links with related tools frontend-toolchain

JavaScript plugins

Babel
Rollup

JavaScript utils

DomReady
NoJs

Tests

Deep HTML5 Validation
On fly HTML5 Validation
CSS3 Validation
Google Mobile-friendly test
Google PageInsight Performance test

Images

WEBP Convertor
SVG (SVGOmg compression)

Automation

Development bundle for fast and robust web development based on Gulp and Rollup

Files

.gulp/*
./gulpfile.js
./babel.config.js
./package.json

Styles

autoprefixer
gulp-postcss
gulp-sass
sass

Server

gulp-connect
gulp-open
localtunnel

Notification

gulp-plumber
fancy-log

Source Maps

gulp-sourcemaps

JavaScript development

rollup
rollup-plugin-babel

Tests

gulp-w3c-html-validator
html-test
mobile-friendly-test-npm

Editor

.vscode/settings.json
.editorconfig
.eslintrc.json
.prettierrc
.eslintrc.json

VSC Tweaks

liveSassCompile
Emmet "commentAfter"
Panel at the "right" (Terminal, hints etc.)
ESLint JS tweaks
Search exclusions

Tunneling

.gulp/server.js

const subdomain = ''

HTML Files

index.html - templates list
home.html - main landing page
product.html - product page
article.html - article page
test-design.html - design system
test-sprite.html - svg sprite test

SVG Sprite generation

copy svg files for sprite into './images/sprite/' folder
launch in the terminal gulp sprite
generated svg sprite is there - ./images/sprite.svg

Docker integration

Steps to Set Up Docker Container and Run them locally

Log in to Docker Hub

docker login

Pull the Docker Image

Download the latest version of the html-base Docker image from Docker Hub.

docker pull andreymatin/html-base:latest

Copy Files from the Docker Container

Extract the application files from the Docker container to your local machine. Replace html-base with the name of the running container if it's not html-base.

docker cp html-base:/app ./

Start the Application

Use the make command to start the application with the up target defined in the Makefile. Ensure that the Makefile is in the same directory.

make up

Makefile
Dockerfile
docker-compose.yml

Makefile

The Makefile provides an easy way to manage and automate Docker commands. It includes tasks such as:

Starting and stopping the Docker containers.
Automatically opening the application in a browser.
Following container logs.

Key targets include:

up: Builds and starts the application containers.
down: Stops and removes the containers.
log: Displays the application logs in real time.

Makefile Windows Installation

If you have Chocolatey installed on your Windows system, you can install make directly by running the following command in an elevated PowerShell (Administrator) terminal:

choco install make

Dockerfile

The Dockerfile is used to define the application’s image. It specifies:

Base image: The Node.js version (e.g., node:22).
Working directory: Where the application is stored in the container (e.g., /app).
Exposed ports: The ports used by the application, such as 4000.
Dependencies: Installs gulp globally and other npm dependencies.
Application entry point: Defines the command to start the
application (npm start).

docker-compose.yml

The docker-compose.yml file orchestrates multiple services and simplifies container management. It defines:

Services: Specifies the application (app) and its dependencies.
Image: Uses a predefined image or builds it locally (andreymatin/html-base:latest).
Container name: Assigns a recognizable name to the container (html-base).
Ports: Maps container ports to the host machine (e.g., 4000:4000).
Environment variables: Configures settings like NODE_ENV and PORT.
Volumes: Synchronizes files between the host and container for development.

Contributing

For issues, bugs or improvements please open an issue

Preferred Code concepts

HTML - https://google.github.io/styleguide/htmlcssguide.html
CSS - BEM - https://github.com/airbnb/css
SCSS - https://sass-guidelin.es/
JavaScript - https://standardjs.com/

Logscreen

Inspiration

Google Web Fundamentals (https://developers.google.com/web/fundamentals/performance/why-performance-matters)

Keywords

html gulp template front-end boilerplate javascript css scss bootstrap rollup build-tool dev-server starter-template