Skip to content

Latest commit

 

History

History
66 lines (46 loc) · 3.99 KB

readme.md

File metadata and controls

66 lines (46 loc) · 3.99 KB
Raw

OptimizedHTML 5

Lightweight startup HTML5 template, based on Gulp.

Start HTML Template

Reworked from source: 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 http://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', 'svg', 'styles', 'scripts', 'browser-sync', 'removedist', 'watch')
  • cleanimg: Clean @*x responsive IMG's
  • rsync: project deployment via RSYNC
  • build: build project from source (app folde) to dist folder

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. Svg images located in img/svg/

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.