Skip to content

Latest commit

 

History

History
44 lines (33 loc) · 3.04 KB

readme.md

File metadata and controls

44 lines (33 loc) · 3.04 KB
Raw

OptimizedHTML - Start HTML Template

Start HTML Template

Author: WebDesign Master | Manual

OptimizedHTML is all-inclusive, optimized for Google PageSpeed start HTML5 template with Bootstrap (grid only), Gulp, Sass, Browsersync, Autoprefixer, PostCSS, Uglify, gulp-imagemin, Vinyl-FTP, rsync and Bower (libs path) 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.

The template uses a Sass with Sass 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 WSL (for Windows): https://webdesign-master.ru/blog/tools/wsl-nodejs-new.html
  3. Install Node Modules in project folder: npm i
  4. Run the template: gulp

Gulp tasks:

  • gulp: run default gulp task (sass, 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;
  • rsync: project deployment on the server from dist folder via RSYNC;
  • 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. For installing new JS 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 JS libraries paths in the js() task (gulpfile.js);
  3. All custom JS located in app/js/common.js;
  4. All Sass vars placed in app/sass/_vars.sass;
  5. All Fonts placed in app/sass/_fonts.sass with "_mixins/font-face" mixin
  6. All Bootstrap media queries placed in app/sass/_media.sass;
  7. All JS libraries CSS styles placed in app/sass/_libs.sass;