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).
git clone https://github.com/agragregra/oh5
- Clone or Download OptimizedHTML 5 from GitHub
- Install Node Modules: npm i
- Run: gulp
- gulp: run default gulp task ('img', 'styles', 'scripts', 'browser-sync', 'watch')
- cleanimg: Clean @*x responsive IMG's
- rsync: project deployment via RSYNC
- All custom scripts located in app/js/_custom.js
- All custom styles located in app/sass/main.sass
- All Sass vars placed in app/sass/_vars.sass
- All fonts plug in app/sass/_fonts.sass
- All CSS styles of libraries plug in app/sass/_libs.sass
- 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.
- bootstrap-reboot.scss - Bootstrap Reboot CSS collection
- _breakpoints.scss - Bootstrap Breakpoints mixin
- js/_lazy.js - Lazy loading images using Intersection Observer
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">.
Rename ht.access to .htaccess before place it in your web server. This file contain rules for htaccess resources caching.