OptimizedHTML - Start HTML Template

Author: WebDesign Master | Manual in Russian

OptimizedHTML is all-inclusive, optimized for Google PageSpeed start HTML5 template with Bootstrap (grid only), Gulp, Sass, Browsersync, Autoprefixer, Clean-CSS, Uglify, Imagemin, Vinyl-FTP, Bower (libs path) and Bourbon support. The template contains a .htaccess file with caching rules for web server.

OptimizedHTML Start Template uses the best practices of web development and optimized for Google PageSpeed.

Cross-browser compatibility: IE9+.

The template uses a scss with scss syntax and project structure with source code in the directory app/ and production folder dist/, that contains ready project with optimized HTML, CSS, JS and images.

How to use OptimizedHTML

1. Download optimizedhtml-start-template from GitHub;
2. Install Node Modules: npm i;
3. Run the template: gulp.

Gulp tasks:

• gulp: run default gulp task (scss, js, watch, browserSync) for web development;
• build: build project to dist folder (cleanup, image optimize, removing unnecessary files);
• deploy: project deployment on the server from dist folder via FTP;
• clearcache: clear all gulp cache.

Rules for working with the starting HTML template

1. All HTML files should have similar initial content as in app/index.html;
2. Template Basic Images Start comment in app/index.html - all your custom template basic images (og:image for social networking, favicons for a variety of devices);
3. Load Fonts CSS Start comment in app/index.html: use loadCSS function, if the site is located in a subfolder. Use (uncomment) loadLocalStorageCSS, if the site is at the root. One of the lines should always be commented out. All fonts are connected in app/scss/fonts.scss with Bourbon;
4. Custom Browsers Color Start comment in app/index.html: set the color of the browser head on a variety of devices;
5. Custom HTML comment in app/index.html - all your custom HTML;
6. Optimized loading JS Start comment in app/index.html: loading all scripts;
7. For installing new jQuery library, just run the command "bower i plugin-name" in the terminal. Libraries are automatically placed in the folder app/libs. Bower must be installed in the system (npm i -g bower). Then place all jQuery libraries paths in the 'libs' task (gulpfile.js);
8. All custom JS located in app/js/common.js;
9. All scss vars placed in app/scss/_vars.scss;
10. All Bootstrap media queries placed in app/scss/_media.scss;
11. All jQuery libraries CSS styles placed in app/scss/_libs.scss;
12. All basic styles (html, body, fonts, buttons, etc...) placed in app/scss/_base.scss;
13. In the file app/header.scss should be placed all styless, responsible for displaying the first screen (on the biggest screens) on all pages;
14. Rename ht.access to .htaccess before place it in your web server. This file contain rules for files caching on web server.