OptimizedHTML 5

Lightweight startup HTML5 template, based on Gulp.

Author: WebDesign Master

OptimizedHTML 5 - lightweight startup HTML5 template with Gulp 4, Sass, Browsersync, Autoprefixer, Uglify-ES, Clean-CSS, Rsync, CSS Reboot (Bootstrap reboot). It uses best practices for responsive images optimizing and contains a .htaccess file for resources caching (images, fonts, HTML, CSS, JS and other content types).

How to use OptimizedHTML 5

git clone https://github.com/agragregra/oh5

1. Clone or Download OptimizedHTML 5 from GitHub
2. Install Node Modules: npm i
3. Run: gulp

Main Gulp tasks:

• gulp: run default gulp task ('img', 'styles', 'scripts', 'browser-sync', 'watch')
• cleanimg: Clean @*x responsive IMG's
• rsync: project deployment via RSYNC

Basic rules

1. All custom scripts located in app/js/_custom.js
2. All custom styles located in app/sass/main.sass
3. All Sass vars placed in app/sass/_vars.sass
4. All fonts plug in app/sass/_fonts.sass
5. All CSS styles of libraries plug in app/sass/_libs.sass
6. All responsive images placed in app/img/_src/ folder. All source images should initially have a 2x resolution. Result image folders after resize & compression: img/@1x/ and img/@2x/ accordingly.

Included features

1. bootstrap-reboot.scss - Bootstrap Reboot CSS collection
2. _breakpoints.scss - Bootstrap Breakpoints mixin
3. js/_lazy.js - Lazy loading images using Intersection Observer

Lazy loading images

Lazy loading img & background images using intersection observer. Enabled by default.

Reference: Google Developers.

1. Example of the usual <img> tag:

<img class="lazy" src="thumb.gif" data-src="img/@1x/real.jpg" data-srcset="img/@1x/real.jpg 1x, img/@2x/real.jpg 2x">

2. Background image class changer example: <div class="lazy-background"> with added class ".visible" for styling.

3. Background image style attribute lazy loading example: <div data-bg="image.jpg">.

Caching

Rename ht.access to .htaccess before place it in your web server. This file contain rules for htaccess resources caching.