HTML layer with JS bundler for professional templates development
- Templates, themes prototyping
- Integration with any CMS
- Modeling JavaScript applications
- Routine web development tasks automation
- 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.)
- Links with related tools frontend-toolchain
- HTML - https://google.github.io/styleguide/htmlcssguide.html
- CSS - BEM - https://github.com/airbnb/css
- SCSS - https://sass-guidelin.es/
- JavaScript - https://standardjs.com/
- Babel
- Rollup
- DomReady
- Parallax
- NoJs
- Detailed (but slow) HTML5 W3C Validation
- Fast in-development HTML5 Validation
- CSS3 Validation
- Google Mobile-friendly test
- Google PageInsight Performance test
- WEBP Convertor
- SVG (SVGOmg compression)
- Best practices for PNG/JPG
For issues, bugs or imporvements please open an issue
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
Development bundle for fast and robust web development
- .gulp/*
- ./gulpfile.js
- ./babel.config.js
- ./package.json
- gulp-sass
- gulp-postcss
- autoprefixer
- gulp-connect
- gulp-open
- localtunnel
- gulp-plumber
- gulp-notify
- gulp-sourcemaps
- rollup
- rollup-plugin-babel
- gulp-imagemin
- imagemin-pngquant
- imagemin-zopfli
- imagemin-mozjpeg
- imagemin-jpeg-recompress
- imagemin-giflossy
- gulp-webp
- gulp-svg-sprite
- gulp-w3c-html-validator
- html-test
- mobile-friendly-test-npm
- ./.vscode/settings.json
- ./.editorconfig
- ./.eslintrc.json
- liveSassCompile
- Emmet "commentAfter"
- Panel at the "right" (Terminal, hints etc.)
- ESLint JS Standard tweaks
.gulp/server.js
const subdomain = ''
- 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
- .gulp - gulp tasks
- src - initial files
- dest - beautified files, initial processing
- build - compressed files
- copy svg files for sprite into
'./images/sprite/'
folder - launch in the terminal
gulp sprite
- generated svg sprite is there -
./images/sprite.svg
- Google Web Fundamentals (https://developers.google.com/web/fundamentals/performance/why-performance-matters)