Skip to content

imiracl/Movee

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 2, 2021
941f598 · Nov 2, 2021

History

32 Commits
Nov 2, 2021
Nov 2, 2021
May 30, 2021
May 30, 2021
May 30, 2021
Nov 2, 2021
May 31, 2021
May 30, 2021

Repository files navigation

OptimizedHTML 5

Lightweight production-ready Gulp starter.

Start HTML Template

OptimizedHTML 5 - lightweight startup environment with Gulp 4, Preprocessors (Sass, Scss, Less, Stylus), clean-css, Browsersync, Autoprefixer, webpack-stream, Babel, Rsync, CSS Reboot (Bootstrap reboot), Server-side HTML imports (SSI), build. It uses best practices for responsive images, JavaScript, CSS optimizing and contains a .htaccess code for resources caching (images, fonts, HTML, CSS, JS and other content types).

How to use OptimizedHTML 5

Clone into the current folder and remove all unnecessary (one command):

git clone https://github.com/agragregra/oh5 .; rm -rf trunk .gitignore readme.md .git dist
  1. Clone or Download OptimizedHTML 5 from GitHub
  2. Install Node Modules: npm i
  3. Run: gulp

Main Gulpfile.js options:

  • preprocessor: Optional preprocessor (sass, less, styl). 'sass' also work with the Scss syntax in "styles/sass/blocks/" import folder
  • fileswatch: List of files extensions for watching & hard reload

Main Gulp tasks:

  • gulp: run default gulp task (scripts, images, styles, browsersync, startwatch)
  • scripts, styles, images, assets: build assets (css, js, images or all)
  • deploy: project deployment via RSYNC
  • build: project build

Basic rules

src's & dist's:

  1. All src | dist scripts located in app/js/app.js | app.min.js
  2. Main Sass|Less|Styl src files located in app/styles/{preprocessor}/main.*
  3. All compressed styles located in app/css/main.min.css
  4. Project styles config placed in app/styles/{preprocessor}/_config.*
  5. All src images placed in app/images/src/ folder
  6. All compressed images placed in app/images/dist/ folder

Include parts of HTML code:

Include parts of html code is implemented using SSI Browsersync server side. You can import any part of the code using construction in any of html files:

<!--#include virtual="/parts/header.html" -->

Variables? No problem:

<!--#set var="title" value="OptimizedHTML 5" -->
<!--#include virtual="/parts/header.html" -->

In "/parts/header.html":

<title><!--#echo var="title" --></title>

Include parts of Preprocessor code:

All included parts of preprocessor files placed in the folder "styles/{preprocessor}/blocks/". Any number of preprocessor files can be placed here and in any order. They will be automatically included in the "styles/{preprocessor}/main.*" file and processed by the selected preprocessor.

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

Helpers

Fonts

The woff2 fonts are currently recommended.

Converter recommended: https://www.fontsquirrel.com/tools/webfont-generator
Or get from google-webfonts-helper: https://google-webfonts-helper.herokuapp.com/fonts

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 or Heavy

Caching

Create or open .htaccess file in root folder of website (Apache). Place this code for resources caching:

<ifModule mod_expires.c>

# Add correct content-type for fonts & SVG
AddType application/font-woff2 .woff2
AddType image/svg+xml .svg

ExpiresActive On
ExpiresDefault "access plus 5 seconds"

# Cache Images
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache Fonts
ExpiresByType application/font-woff2 "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache other content types (CSS, JS, HTML, XML)
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

</ifModule>

<ifModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript application/font-woff2 image/svg+xml

</ifModule>

Issues

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

About

Movee template from figma

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published