/mamon

Primary LanguageHTML

OptimizedHTML 5

Lightweight startup HTML5 template, based on Gulp.

Start HTML Template

OptimizedHTML 5 - lightweight startup HTML5 template with Gulp 4, Sass/Scss, 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/agragregra/oh5
  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, assets: build assets (css, js, images)
  • rsync: project deployment via RSYNC

Basic rules

  1. All custom scripts located in app/js/app.js
  2. All custom styles located in app/sass/main.sass|scss
  3. All Sass config placed in app/sass/config.sass
  4. All images sources placed in app/images/src/ folder.

Included features

  1. bootstrap-reboot.scss - Bootstrap Reboot CSS collection
  2. _breakpoints.scss - Bootstrap Breakpoints mixin

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