HTML Base

HTML initial bundle for professional templates development

Why

• Templates, themes prototyping
• Integration with any CMS and frameworks
• Modeling JavaScript applications
• Routine web development tasks automation

Features

• Advanced CSS Reset scss-reset
• Basic SCSS Mixins Collection scss-mixins
• (Not so) Old browsers support
• Predefined VSC workspace
• Initial JavaScript modules and SCSS files
• Automated test tasks
• A lot of useful open source included

Output

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

Usage

by shell command

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

or download html-base zip package for manual installation

JS mode install

Please add -js key

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

Install by PMs

npm i html-base

or

yarn add html-base

or

pnpm i html-base

Next need to copy html-base folder from node_modules and rename by project name. Also need to update package.json and related files depends of new project title, description, owner, etc. Next please install all dependencies by

npm i

or

yarn add

or

pnpm i

Usage

After installation please launch by the command

gulp

or

npm start

To update packages please use these commands

npm updates
npm i

Under the hood

Related Tools

• Links with related tools frontend-toolchain

JavaScript plugins

• Babel
• Rollup

JavaScript utils

• DomReady
• Parallax
• NoJs
• UI Explorer

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
• gulp-notify

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

Folders

• .gulp - gulp tasks
• src - initial files
• dest - beautified files, initial processing
• build - compressed files

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

Contributing

For issues, bugs or imporvements 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)