https://github.com/agragregra/optimizedhtml-start-template

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.
https://github.com/agragregra/optimizedhtml-start-template

Last synced: 4 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/agragregra/optimizedhtml-start-template
• Owner: agragregra
• Created: 2016-08-19T13:10:57.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-07-10T23:21:49.000Z (8 months ago)
• Last Synced: 2024-08-01T19:49:19.781Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 483 KB
• Stars: 722
• Watchers: 149
• Forks: 416
• Open Issues: 9
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
OptimizedHTML - 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




	


Download optimizedhtml-start-template from GitHub

	
Install WSL (for Windows): https://webdesign-master.ru/blog/tools/wsl-nodejs-new.html



	
Install Node Modules in project folder: npm i



	
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




	
All HTML files should have similar initial content as in app/index.html;

	
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);

	
All custom JS located in app/js/common.js;

	
All Sass vars placed in app/sass/_vars.sass;

	
All Fonts placed in app/sass/_fonts.sass with "_mixins/font-face" mixin

	
All Bootstrap media queries placed in app/sass/_media.sass;

	
All JS libraries CSS styles placed in app/sass/_libs.sass;