XIOLog / OptimizedHTML-5

Lightweight startup HTML5 template, based on Gulp

OptimizedHTML 5

Lightweight startup HTML5 template, based on Gulp.

OptimizedHTML 5 - lightweight startup HTML5 template with Gulp 4, Sass/Scss/Less/Stylus, 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 https://github.com/XIOLog/OptimizedHTML-5.git

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 (images, styles, scripts, browsersync, startwatch)
• cleanimg: Clean all compressed images
• styles, scripts, images, assets: build assets (css, js, images or all)
• rsync: project deployment via RSYNC

Basic rules

1. All custom scripts located in app/js/app.js
2. All custom styles located in app/{preprocessor}/main.sass|scss|less|styl
3. All preprocessor configs placed in app/{preprocessor}/_config.sass|scss|less|styl
4. You can delete folders of other preprocessors before work.
5. All images sources placed in app/images/src/ folder.

Included features

1. bootstrap-reboot - Bootstrap Reboot CSS collection
2. _breakpoints.scss - Bootstrap Breakpoints mixin (available only for sass and scss)
3. bootstrap-grid (optional) - Bootstrap Grid collection

Caching

Rename ht.access to .htaccess before place it in your web server. This file contain rules for htaccess resources caching.

Helpers

font-weight helper

• 100 - Extra Light or Ultra Light
• 200 - Light or Thin
• 300 - Book or Demi
• 400 - Regular or Normal
• 500 - Medium
• 600 - Semibold or Demibold
• 700 - Bold
• 800 - Black or Extra Bold or Heavy
• 900 - Extra Black or Fat or Ultra Blac

Issues

1. Long Preprocessor compile: Disable the "safe write" option in PHPStorm settings.