Skip to content

Lightweight startup HTML5 template, based on Gulp

Notifications You must be signed in to change notification settings

den-mesh/OptimizedHTML-5

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OptimizedHTML 5

Lightweight startup HTML5 template, based on Gulp.

Start HTML Template

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.

About

Lightweight startup HTML5 template, based on Gulp

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 56.7%
  • CSS 26.6%
  • HTML 16.7%