Skip to content

Latest commit

 

History

History
50 lines (38 loc) · 3.14 KB

readme.md

File metadata and controls

50 lines (38 loc) · 3.14 KB
Raw

OptimizedHTML 4:
Startup HTML template based on Gulp & Bootstrap 5

Start HTML Template

Author: WebDesign Master

OptimizedHTML is all-inclusive start HTML5 template with Bootstrap 5 (grid & reboot), Gulp, Sass, Browsersync, Autoprefixer, Clean-CSS, Uglify, Rsync and Bower (libs path) support. The template contains a .htaccess file with caching rules for web server.

OptimizedHTML 4 Start Template uses the best practices of web development.

Cross-browser compatibility: IE9+.

The template uses a Sass with Sass or Scss syntax (optional).

How to use OptimizedHTML

  1. Download OptimizedHTML 4 from GitHub;
  2. Install Node Modules: npm i;
  3. GraphicsMagick Required (opt. line 3):
    Install gm Linux/WSL: sudo apt update; sudo apt install graphicsmagick
    Install gm Git Bash: https://sourceforge.net/projects/graphicsmagick/files/
  4. Run the template: gulp.

Gulp tasks:

  • gulp: run default gulp task (sass, js, watch, browserSync) for web development;
  • rsync: project deployment on the server from dist folder via RSYNC;

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. Custom Browsers Color Start comment in app/index.html: set the color of the browser head on a variety of devices;
  4. Custom HTML comment in app/index.html - all your custom HTML;
  5. 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);
  6. All custom JS located in app/js/common.js;
  7. All Sass vars placed in app/sass/_vars.sass | app/scss/_vars.scss;
  8. All Bootstrap media queries placed in app/sass/_media.sass | app/scss/_media.scss;
  9. All libraries CSS styles placed in app/sass/_libs.sass | app/scss/_libs.scss;
  10. Rename ht.access to .htaccess before place it in your web server. This file contain rules for files caching on web server.