html-initial-bundle v1.0.14

HTML Initial Bundle

HTML layer with JS bundler for professional templates development

Shell

Why

• Templates, themes prototyping
• Integration with any CMS
• 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 (HTML Validation, Mobile friendly, Performance etc.)

Related Tools

• Links with related tools frontend-toolchain

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/

JavaScript plugins

• Babel
• Rollup

JavaScript utils

• DomReady
• Parallax
• NoJs

Tests

• Detailed (but slow) HTML5 W3C Validation
• Fast in-development HTML5 Validation
• CSS3 Validation
• Google Mobile-friendly test
• Google PageInsight Performance test

Images Compression

• WEBP Convertor
• SVG (SVGOmg compression)
• Best practices for PNG/JPG

Contributing

For issues, bugs or imporvements please open an issue

Installation

Please download zip file from html-initial-bundle repository.

or by Git:

git clone https://github.com/andreymatin/html-initial-bundle

or by CLI:

npm i -g html-npm-cli;
gethtml init

Automation

Development bundle for fast and robust web development

Files

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

Styles Automation

• gulp-sass
• gulp-postcss
• autoprefixer

Server Automation

• gulp-connect
• gulp-open
• localtunnel

Notification

• gulp-plumber
• gulp-notify

Source Maps

• gulp-sourcemaps

JavaScript development

• rollup
• rollup-plugin-babel

Images

• gulp-imagemin
• imagemin-pngquant
• imagemin-zopfli
• imagemin-mozjpeg
• imagemin-jpeg-recompress
• imagemin-giflossy
• gulp-webp
• gulp-svg-sprite

Tests

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

Editor

• ./.vscode/settings.json
• ./.editorconfig
• ./.eslintrc.json

VSC Tweaks

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

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

Inspiration

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