├── .bowerrc ├── .gitignore ├── app ├── css │ └── app.min.css ├── fonts │ ├── roboto-bold-webfont.woff2 │ ├── roboto-bolditalic-webfont.woff2 │ ├── roboto-italic-webfont.woff2 │ └── roboto-regular-webfont.woff2 ├── images │ ├── dist │ │ └── preview.jpg │ ├── favicon.png │ └── src │ │ └── preview.jpg ├── index.html ├── js │ ├── app.js │ └── app.min.js ├── parts │ ├── footer.html │ └── header.html └── styles │ ├── less │ ├── _config.less │ ├── blocks │ │ ├── _general.less │ │ └── example-block.less │ └── main.less │ ├── sass │ ├── _config.sass │ ├── blocks │ │ ├── _general.sass │ │ ├── example-block.sass │ │ └── example-block.scss │ └── main.sass │ └── styl │ ├── _config.styl │ ├── blocks │ ├── _general.styl │ └── example-block.styl │ └── main.styl ├── dist ├── css │ └── app.min.css ├── fonts │ ├── roboto-bold-webfont.woff2 │ ├── roboto-bolditalic-webfont.woff2 │ ├── roboto-italic-webfont.woff2 │ └── roboto-regular-webfont.woff2 ├── images │ ├── dist │ │ └── preview.jpg │ └── favicon.png ├── index.html └── js │ └── app.min.js ├── gulpfile.js ├── package.json └── readme.md /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory" : "app/libs/" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /**/node_modules/ 2 | /.git/ 3 | /**/Thumbs.db 4 | /**/*.DS_Store 5 | /**/package-lock.json 6 | /**/debug.log 7 | -------------------------------------------------------------------------------- /app/css/app.min.css: -------------------------------------------------------------------------------- 1 | :root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33,37,41,.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33,37,41,.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0,0,0,.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0,0,0,.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0,0,0,.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0,0,0,.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0,0,0,.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13,110,253,.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222,226,230,.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222,226,230,.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:hsla(0,0%,100%,.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{background-color:var(--bs-body-bg);color:var(--bs-body-color);font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);margin:0;text-align:var(--bs-body-text-align);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}hr{border:0;border-top:var(--bs-border-width) solid;color:inherit;margin:1rem 0;opacity:.25}h1,h2,h3,h4,h5,h6{color:var(--bs-heading-color);font-weight:500;line-height:1.2;margin-bottom:.5rem;margin-top:0}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-bottom:1rem;margin-top:0}abbr[title]{cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{font-style:normal;line-height:inherit;margin-bottom:1rem}ol,ul{padding-left:2rem}dl,ol,ul{margin-bottom:1rem;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{background-color:var(--bs-highlight-bg);color:var(--bs-highlight-color);padding:.1875em}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;font-size:.875em;margin-bottom:1rem;margin-top:0;overflow:auto}pre code{color:inherit;font-size:inherit;word-break:normal}code{color:var(--bs-code-color);font-size:.875em;word-wrap:break-word}a>code{color:inherit}kbd{background-color:var(--bs-body-color);border-radius:.25rem;color:var(--bs-body-bg);font-size:.875em;padding:.1875rem .375rem}kbd kbd{font-size:1em;padding:0}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{border-collapse:collapse;caption-side:bottom}caption{color:var(--bs-secondary-color);padding-bottom:.5rem;padding-top:.5rem;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border:0 solid;border-color:inherit}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{border-style:none;padding:0}textarea{resize:vertical}fieldset{border:0;margin:0;min-width:0;padding:0}legend{float:left;font-size:calc(1.275rem + .3vw);line-height:inherit;margin-bottom:.5rem;padding:0;width:100%}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::file-selector-button{-webkit-appearance:button;font:inherit}output{display:inline-block}iframe{border:0}summary{cursor:pointer;display:list-item}progress{vertical-align:baseline}[hidden]{display:none!important}@font-face{font-family:roboto-oh5;font-style:normal;font-weight:400;src:url(../fonts/roboto-regular-webfont.woff2) format("woff2")}@font-face{font-family:roboto-oh5;font-style:italic;font-weight:400;src:url(../fonts/roboto-italic-webfont.woff2) format("woff2")}@font-face{font-family:roboto-oh5;font-style:normal;font-weight:700;src:url(../fonts/roboto-bold-webfont.woff2) format("woff2")}@font-face{font-family:roboto-oh5;font-style:italic;font-weight:700;src:url(../fonts/roboto-bolditalic-webfont.woff2) format("woff2")}::-webkit-input-placeholder{color:#666}::-moz-placeholder{color:#666}:-ms-input-placeholder{color:#666}::-ms-input-placeholder{color:#666}::placeholder{color:#666}::-moz-selection{background-color:orange;color:#fff}::selection{background-color:orange;color:#fff}input,textarea{outline:none}input:focus:required:invalid,textarea:focus:required:invalid{border-color:red}input:required:valid,textarea:required:valid{border-color:green}body{color:#333;font-family:roboto-oh5,sans-serif;font-size:16px;line-height:1.65;min-width:320px;overflow-x:hidden;position:relative}.heading{font-size:27px;font-weight:700;margin:15px 0 20px} -------------------------------------------------------------------------------- /app/fonts/roboto-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/app/fonts/roboto-bold-webfont.woff2 -------------------------------------------------------------------------------- /app/fonts/roboto-bolditalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/app/fonts/roboto-bolditalic-webfont.woff2 -------------------------------------------------------------------------------- /app/fonts/roboto-italic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/app/fonts/roboto-italic-webfont.woff2 -------------------------------------------------------------------------------- /app/fonts/roboto-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/app/fonts/roboto-regular-webfont.woff2 -------------------------------------------------------------------------------- /app/images/dist/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/app/images/dist/preview.jpg -------------------------------------------------------------------------------- /app/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/app/images/favicon.png -------------------------------------------------------------------------------- /app/images/src/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/app/images/src/preview.jpg -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | Start HTML5 Template

7 |

Welcome to startup HTML template OptimizedHTML 5!

8 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam reprehenderit nulla alias expedita a qui, pariatur doloremque ipsa fugit laboriosam odio iure recusandae laborum delectus praesentium magni reiciendis voluptatem. Sed.

9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /app/js/app.js: -------------------------------------------------------------------------------- 1 | // // Import vendor jQuery plugin example 2 | // import '~/app/libs/mmenu/dist/mmenu.js' 3 | 4 | document.addEventListener('DOMContentLoaded', () => { 5 | 6 | // Custom JS 7 | // document.body.hidden = true // test 8 | 9 | }) 10 | -------------------------------------------------------------------------------- /app/js/app.min.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";document.addEventListener("DOMContentLoaded",(function(){}))}(); -------------------------------------------------------------------------------- /app/parts/footer.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/parts/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <!--#echo var="title" --> 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /app/styles/less/_config.less: -------------------------------------------------------------------------------- 1 | // USER VARIABLES SECTION 2 | 3 | @accent: orange; // Accent Color 4 | @fontsize: 16px; // Body Font Size 5 | @textcolor: #333; // Text Color 6 | @lineheight: 1.65; // Document Line Height 7 | @userfont: roboto-oh5, sans-serif; // User Font Family 8 | @systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif; // System Font Family 9 | 10 | // IMPORT SECTION 11 | 12 | @import (less) 'node_modules/bootstrap/dist/css/bootstrap-reboot.css'; // Bootstrap Reboot collection 13 | // @import (less) 'node_modules/bootstrap/dist/css/bootstrap-grid.css'; // Optional Bootstrap Grid 14 | 15 | // FONTS LOAD SECTION 16 | 17 | .font(@fname, @fstyle, @fweight, @furl) { 18 | @font-face { 19 | font-family: @fname; 20 | font-style: @fstyle; 21 | font-weight: @fweight; 22 | src: url(@furl) format('woff2'); 23 | } 24 | } 25 | 26 | .font('roboto-oh5', normal, 400, '../fonts/roboto-regular-webfont.woff2'); 27 | .font('roboto-oh5', italic, 400, '../fonts/roboto-italic-webfont.woff2'); 28 | .font('roboto-oh5', normal, 700, '../fonts/roboto-bold-webfont.woff2'); 29 | .font('roboto-oh5', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2'); 30 | 31 | // GENERAL CSS SETTINGS 32 | 33 | ::placeholder { 34 | color: #666; 35 | } 36 | 37 | ::selection { 38 | background-color: @accent; 39 | color: #fff; 40 | } 41 | 42 | input, textarea { 43 | outline: none; 44 | &:focus:required:invalid { border-color: red } 45 | &:required:valid { border-color: green } 46 | } 47 | 48 | body { 49 | font-family: @userfont; 50 | font-size: @fontsize; 51 | line-height: @lineheight; 52 | color: @textcolor; 53 | min-width: 320px; 54 | position: relative; 55 | overflow-x: hidden; 56 | } 57 | -------------------------------------------------------------------------------- /app/styles/less/blocks/_general.less: -------------------------------------------------------------------------------- 1 | // GENERAL PROJECT STYLES 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/styles/less/blocks/example-block.less: -------------------------------------------------------------------------------- 1 | // body { 2 | // display: none; 3 | // } -------------------------------------------------------------------------------- /app/styles/less/main.less: -------------------------------------------------------------------------------- 1 | @import '_config'; 2 | @import 'blocks/**/*'; -------------------------------------------------------------------------------- /app/styles/sass/_config.sass: -------------------------------------------------------------------------------- 1 | // USER VARIABLES SECTION 2 | 3 | $accent: orange // Accent Color 4 | $fontsize: 16px // Body Font Size 5 | $textcolor: #333 // Text Color 6 | $lineheight: 1.65 // Document Line Height 7 | $userfont: roboto-oh5, sans-serif // User Font Family 8 | $systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif // System Font Family 9 | 10 | // Bootstrap compatible gutter variable => $gutter 11 | $grid-gutter-width: 30px 12 | $gutter: $grid-gutter-width 13 | 14 | // IMPORT SECTION 15 | 16 | @import 'node_modules/bootstrap/scss/bootstrap-reboot.scss' // Bootstrap Reboot collection 17 | @import 'node_modules/bootstrap/scss/mixins/_breakpoints.scss' // Bootstrap Breakpoints mixin 18 | // @import 'node_modules/bootstrap/scss/bootstrap-grid.scss' // Optional Bootstrap Grid 19 | // @import 'node_modules/bootstrap/scss/_utilities.scss' // Optional Bootstrap Utilites 20 | 21 | // FONTS LOAD SECTION 22 | 23 | @mixin font($fname, $fstyle, $fweight, $furl) 24 | @font-face 25 | font-family: $fname 26 | font-style: $fstyle 27 | font-weight: $fweight 28 | src: url($furl) format('woff2') 29 | 30 | @include font('roboto-oh5', normal, 400, '../fonts/roboto-regular-webfont.woff2') 31 | @include font('roboto-oh5', italic, 400, '../fonts/roboto-italic-webfont.woff2') 32 | @include font('roboto-oh5', normal, 700, '../fonts/roboto-bold-webfont.woff2') 33 | @include font('roboto-oh5', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2') 34 | 35 | // GENERAL CSS SETTINGS 36 | 37 | ::placeholder 38 | color: #666 39 | 40 | ::selection 41 | background-color: $accent 42 | color: #fff 43 | 44 | input, textarea 45 | outline: none 46 | &:focus:required:invalid 47 | border-color: red 48 | &:required:valid 49 | border-color: green 50 | 51 | body 52 | font-family: $userfont 53 | font-size: $fontsize 54 | line-height: $lineheight 55 | color: $textcolor 56 | min-width: 320px 57 | position: relative 58 | overflow-x: hidden 59 | -------------------------------------------------------------------------------- /app/styles/sass/blocks/_general.sass: -------------------------------------------------------------------------------- 1 | // GENERAL PROJECT STYLES 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/styles/sass/blocks/example-block.sass: -------------------------------------------------------------------------------- 1 | // body 2 | // display: none 3 | -------------------------------------------------------------------------------- /app/styles/sass/blocks/example-block.scss: -------------------------------------------------------------------------------- 1 | .heading { 2 | font-weight: 700; 3 | margin: math.div($gutter, 2) 0 math.div($gutter, 1.5); 4 | font-size: 27px; 5 | } 6 | -------------------------------------------------------------------------------- /app/styles/sass/main.sass: -------------------------------------------------------------------------------- 1 | @use 'sass:math' 2 | @use 'sass:color' 3 | 4 | @import config 5 | @import 'blocks/**/*' 6 | -------------------------------------------------------------------------------- /app/styles/styl/_config.styl: -------------------------------------------------------------------------------- 1 | // USER VARIABLES SECTION 2 | 3 | accent = orange // Accent Color 4 | fontsize = 16px // Body Font Size 5 | textcolor = #333 // Text Color 6 | lineheight = 1.65 // Document Line Height 7 | userfont = roboto-oh5, sans-serif // User Font Family 8 | systemfont = -apple-system, BlinkMacSystemFont, Arial, sans-serif // System Font Family 9 | 10 | // IMPORT SECTION 11 | 12 | @import '../../../node_modules/bootstrap/dist/css/bootstrap-reboot.css' // Bootstrap Reboot collection 13 | // @import '../../../node_modules/bootstrap/dist/css/bootstrap-grid.css' // Optional Bootstrap Grid 14 | 15 | // FONTS LOAD SECTION 16 | 17 | font(fname, fstyle, fweight, furl) 18 | @font-face 19 | font-family fname 20 | font-style fstyle 21 | font-weight fweight 22 | src url(furl) format('woff2') 23 | 24 | 25 | font('roboto-oh5', normal, 400, '../fonts/roboto-regular-webfont.woff2') 26 | font('roboto-oh5', italic, 400, '../fonts/roboto-italic-webfont.woff2') 27 | font('roboto-oh5', normal, 700, '../fonts/roboto-bold-webfont.woff2') 28 | font('roboto-oh5', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2') 29 | 30 | // GENERAL CSS SETTINGS 31 | 32 | ::placeholder 33 | color #666 34 | 35 | ::selection 36 | background-color accent 37 | color #fff 38 | 39 | input, textarea 40 | outline none 41 | &:focus:required:invalid 42 | border-color red 43 | &:required:valid 44 | border-color green 45 | 46 | body 47 | font-family userfont 48 | font-size fontsize 49 | line-height lineheight 50 | color textcolor 51 | min-width 320px 52 | position relative 53 | overflow-x hidden 54 | -------------------------------------------------------------------------------- /app/styles/styl/blocks/_general.styl: -------------------------------------------------------------------------------- 1 | // GENERAL PROJECT STYLES 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/styles/styl/blocks/example-block.styl: -------------------------------------------------------------------------------- 1 | // body 2 | // display: none -------------------------------------------------------------------------------- /app/styles/styl/main.styl: -------------------------------------------------------------------------------- 1 | @import _config 2 | @import 'blocks/**/*' -------------------------------------------------------------------------------- /dist/css/app.min.css: -------------------------------------------------------------------------------- 1 | :root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33,37,41,.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33,37,41,.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0,0,0,.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0,0,0,.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0,0,0,.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0,0,0,.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0,0,0,.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13,110,253,.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222,226,230,.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222,226,230,.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:hsla(0,0%,100%,.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{background-color:var(--bs-body-bg);color:var(--bs-body-color);font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);margin:0;text-align:var(--bs-body-text-align);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}hr{border:0;border-top:var(--bs-border-width) solid;color:inherit;margin:1rem 0;opacity:.25}h1,h2,h3,h4,h5,h6{color:var(--bs-heading-color);font-weight:500;line-height:1.2;margin-bottom:.5rem;margin-top:0}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-bottom:1rem;margin-top:0}abbr[title]{cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{font-style:normal;line-height:inherit;margin-bottom:1rem}ol,ul{padding-left:2rem}dl,ol,ul{margin-bottom:1rem;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{background-color:var(--bs-highlight-bg);color:var(--bs-highlight-color);padding:.1875em}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;font-size:.875em;margin-bottom:1rem;margin-top:0;overflow:auto}pre code{color:inherit;font-size:inherit;word-break:normal}code{color:var(--bs-code-color);font-size:.875em;word-wrap:break-word}a>code{color:inherit}kbd{background-color:var(--bs-body-color);border-radius:.25rem;color:var(--bs-body-bg);font-size:.875em;padding:.1875rem .375rem}kbd kbd{font-size:1em;padding:0}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{border-collapse:collapse;caption-side:bottom}caption{color:var(--bs-secondary-color);padding-bottom:.5rem;padding-top:.5rem;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border:0 solid;border-color:inherit}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{border-style:none;padding:0}textarea{resize:vertical}fieldset{border:0;margin:0;min-width:0;padding:0}legend{float:left;font-size:calc(1.275rem + .3vw);line-height:inherit;margin-bottom:.5rem;padding:0;width:100%}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::file-selector-button{-webkit-appearance:button;font:inherit}output{display:inline-block}iframe{border:0}summary{cursor:pointer;display:list-item}progress{vertical-align:baseline}[hidden]{display:none!important}@font-face{font-family:roboto-oh5;font-style:normal;font-weight:400;src:url(../fonts/roboto-regular-webfont.woff2) format("woff2")}@font-face{font-family:roboto-oh5;font-style:italic;font-weight:400;src:url(../fonts/roboto-italic-webfont.woff2) format("woff2")}@font-face{font-family:roboto-oh5;font-style:normal;font-weight:700;src:url(../fonts/roboto-bold-webfont.woff2) format("woff2")}@font-face{font-family:roboto-oh5;font-style:italic;font-weight:700;src:url(../fonts/roboto-bolditalic-webfont.woff2) format("woff2")}::-webkit-input-placeholder{color:#666}::-moz-placeholder{color:#666}:-ms-input-placeholder{color:#666}::-ms-input-placeholder{color:#666}::placeholder{color:#666}::-moz-selection{background-color:orange;color:#fff}::selection{background-color:orange;color:#fff}input,textarea{outline:none}input:focus:required:invalid,textarea:focus:required:invalid{border-color:red}input:required:valid,textarea:required:valid{border-color:green}body{color:#333;font-family:roboto-oh5,sans-serif;font-size:16px;line-height:1.65;min-width:320px;overflow-x:hidden;position:relative}.heading{font-size:27px;font-weight:700;margin:15px 0 20px} -------------------------------------------------------------------------------- /dist/fonts/roboto-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/dist/fonts/roboto-bold-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/roboto-bolditalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/dist/fonts/roboto-bolditalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/roboto-italic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/dist/fonts/roboto-italic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/roboto-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/dist/fonts/roboto-regular-webfont.woff2 -------------------------------------------------------------------------------- /dist/images/dist/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/dist/images/dist/preview.jpg -------------------------------------------------------------------------------- /dist/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-5/d950970367a9c19018d9cdeb94cbaa2ccb91bef2/dist/images/favicon.png -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | OptimizedHTML 5 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | Start HTML5 Template

28 |

Welcome to startup HTML template OptimizedHTML 5!

29 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam reprehenderit nulla alias expedita a qui, pariatur doloremque ipsa fugit laboriosam odio iure recusandae laborum delectus praesentium magni reiciendis voluptatem. Sed.

30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /dist/js/app.min.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";document.addEventListener("DOMContentLoaded",(function(){}))}(); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | let preprocessor = 'sass', // Preprocessor (sass, less, styl); 'sass' also work with the Scss syntax in blocks/ folder. 2 | fileswatch = 'html,htm,txt,json,md,woff2' // List of files extensions for watching & hard reload 3 | 4 | import pkg from 'gulp' 5 | const { src, dest, parallel, series, watch } = pkg 6 | 7 | import browserSync from 'browser-sync' 8 | import bssi from 'browsersync-ssi' 9 | import ssi from 'ssi' 10 | import webpackStream from 'webpack-stream' 11 | import webpack from 'webpack' 12 | import TerserPlugin from 'terser-webpack-plugin' 13 | import gulpSass from 'gulp-sass' 14 | import * as dartSass from 'sass' 15 | const sass = gulpSass(dartSass) 16 | import sassglob from 'gulp-sass-glob' 17 | import less from 'gulp-less' 18 | import lessglob from 'gulp-less-glob' 19 | import styl from 'gulp-stylus' 20 | import stylglob from 'gulp-noop' 21 | import postCss from 'gulp-postcss' 22 | import cssnano from 'cssnano' 23 | import autoprefixer from 'autoprefixer' 24 | import imagemin from 'imagemin' 25 | import imageminMozjpeg from 'imagemin-mozjpeg' 26 | import imageminPngquant from 'imagemin-pngquant' 27 | import imageminSvgo from 'imagemin-svgo' 28 | import path from 'path' 29 | import fs from 'fs-extra' 30 | import concat from 'gulp-concat' 31 | import rsync from 'gulp-rsync' 32 | import {deleteAsync} from 'del' 33 | 34 | function browsersync() { 35 | browserSync.init({ 36 | server: { 37 | baseDir: 'app/', 38 | middleware: bssi({ baseDir: 'app/', ext: '.html' }) 39 | }, 40 | ghostMode: { clicks: false }, 41 | notify: false, 42 | online: true, 43 | // tunnel: 'yousutename', // Attempt to use the URL https://yousutename.loca.lt 44 | }) 45 | } 46 | 47 | function scripts() { 48 | return src(['app/js/*.js', '!app/js/*.min.js']) 49 | .pipe(webpackStream({ 50 | mode: 'production', 51 | performance: { hints: false }, 52 | plugins: [ 53 | new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), // jQuery (npm i jquery) 54 | ], 55 | module: { 56 | rules: [ 57 | { 58 | test: /\.m?js$/, 59 | exclude: /(node_modules)/, 60 | use: { 61 | loader: 'babel-loader', 62 | options: { 63 | presets: ['@babel/preset-env'], 64 | plugins: ['babel-plugin-root-import'] 65 | } 66 | } 67 | } 68 | ] 69 | }, 70 | optimization: { 71 | minimize: true, 72 | minimizer: [ 73 | new TerserPlugin({ 74 | terserOptions: { format: { comments: false } }, 75 | extractComments: false 76 | }) 77 | ] 78 | }, 79 | }, webpack, (err, stats) => { 80 | if (err) { 81 | console.error('❌ Webpack Error:', err); 82 | this.emit('end'); 83 | } 84 | if (stats.hasErrors()) { 85 | console.error('❌ Webpack Stats Errors:', stats.toString({ colors: true })); 86 | this.emit('end'); 87 | } 88 | })) 89 | .on('error', function (err) { 90 | console.error('❌ Error in Gulp task scripts:', err.message); 91 | this.emit('end'); 92 | }) 93 | .pipe(concat('app.min.js')) 94 | .pipe(dest('app/js')) 95 | .pipe(browserSync.stream()) 96 | } 97 | 98 | function styles() { 99 | return src([`app/styles/${preprocessor}/*.*`, `!app/styles/${preprocessor}/_*.*`]) 100 | .pipe(eval(`${preprocessor}glob`)()) 101 | .pipe(eval(preprocessor)({ 102 | 'include css': true, 103 | silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin', 'import'], 104 | loadPaths: ['./'] 105 | })).on('error', function handleError(err) { 106 | console.error('❌ Preprocessor error:', err.message); 107 | this.emit('end'); 108 | }) 109 | .pipe(postCss([ 110 | autoprefixer({ grid: 'autoplace' }), 111 | cssnano({ preset: ['default', { discardComments: { removeAll: true } }] }) 112 | ])) 113 | .pipe(concat('app.min.css')) 114 | .pipe(dest('app/css')) 115 | .pipe(browserSync.stream()) 116 | } 117 | 118 | async function images() { 119 | try { 120 | const files = await imagemin([`app/images/src/**/*`], { 121 | plugins: [ 122 | imageminMozjpeg({ quality: 90 }), 123 | imageminPngquant({ quality: [0.6, 0.8] }), 124 | imageminSvgo() 125 | ] 126 | }) 127 | for (const v of files) { 128 | const relativePath = path.relative('app/images/src', v.sourcePath) 129 | const destPath = path.join('app/images/dist', relativePath) 130 | fs.ensureDirSync(path.dirname(destPath)) 131 | fs.writeFileSync(destPath, v.data) 132 | } 133 | console.log('✅ Images optimized successfully.') 134 | } catch (err) { 135 | console.error('❌ Image Minification Error:', err.message || err) 136 | } 137 | } 138 | 139 | function buildcopy() { 140 | return src([ 141 | '{app/js,app/css}/*.min.*', 142 | 'app/images/**/*.*', 143 | '!app/images/src/**/*', 144 | 'app/fonts/**/*' 145 | ], { base: 'app/', encoding: false }) 146 | .pipe(dest('dist')) 147 | } 148 | 149 | async function buildhtml() { 150 | let includes = new ssi('app/', 'dist/', '/**/*.html') 151 | includes.compile() 152 | await deleteAsync('dist/parts', { force: true }) 153 | } 154 | 155 | async function cleandist() { 156 | await deleteAsync('dist/**/*', { force: true }) 157 | } 158 | 159 | function deploy() { 160 | return src('dist/') 161 | .pipe(rsync({ 162 | root: 'dist/', 163 | hostname: 'username@yousite.com', 164 | destination: 'yousite/public_html/', 165 | clean: true, // Mirror copy with file deletion 166 | // include: ['*.htaccess'], // Includes files to deploy 167 | exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy 168 | recursive: true, 169 | archive: true, 170 | silent: false, 171 | compress: true 172 | })) 173 | } 174 | 175 | function startwatch() { 176 | watch([`app/styles/${preprocessor}/**/*`], { usePolling: true }, styles) 177 | watch(['app/js/**/*.js', '!app/js/**/*.min.js'], { usePolling: true }, scripts) 178 | watch(['app/images/src/**/*'], { usePolling: true }, images) 179 | watch([`app/**/*.{${fileswatch}}`], { usePolling: true }).on('change', browserSync.reload) 180 | } 181 | 182 | export { scripts, styles, images, deploy } 183 | export let assets = series(scripts, styles, images) 184 | export let build = series(cleandist, images, scripts, styles, buildcopy, buildhtml) 185 | 186 | export default series(scripts, styles, images, parallel(browsersync, startwatch)) 187 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "optimizedhtml", 3 | "version": "5.1.0", 4 | "description": "OptimizedHTML 5 - Lightweight Gulp Starter", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "dev": "gulp", 9 | "build": "gulp build" 10 | }, 11 | "browserslist": [ 12 | "last 10 versions" 13 | ], 14 | "author": "WebDesign Master", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@babel/core": "^7.26.10", 18 | "@babel/preset-env": "^7.26.9", 19 | "autoprefixer": "^10.4.21", 20 | "babel-loader": "^10.0.0", 21 | "babel-plugin-module-resolver": "^5.0.2", 22 | "babel-plugin-root-import": "^6.6.0", 23 | "bootstrap": "^5.3.3", 24 | "browser-sync": "^3.0.4", 25 | "browsersync-ssi": "^0.2.4", 26 | "cssnano": "^7.0.6", 27 | "del": "^8.0.0", 28 | "gulp": "^5.0.0", 29 | "gulp-concat": "^2.6.1", 30 | "gulp-less": "^5.0.0", 31 | "gulp-less-glob": "^1.0.0", 32 | "gulp-noop": "^1.0.1", 33 | "gulp-postcss": "^10.0.0", 34 | "gulp-rsync": "0.1.0", 35 | "gulp-sass": "^6.0.1", 36 | "gulp-sass-glob": "^1.1.0", 37 | "gulp-stylus": "^3.0.1", 38 | "imagemin": "^9.0.1", 39 | "imagemin-mozjpeg": "^10.0.0", 40 | "imagemin-pngquant": "^10.0.0", 41 | "imagemin-svgo": "^11.0.1", 42 | "postcss": "^8.5.3", 43 | "sass": "^1.86.2", 44 | "terser-webpack-plugin": "^5.3.14", 45 | "webpack": "^5.98.0", 46 | "webpack-stream": "^7.0.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

OptimizedHTML 5

2 |

Lightweight production-ready Gulp starter.

3 | 4 |

5 | Start HTML Template 6 |

7 | 8 |

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

9 | 10 |

How to use OptimizedHTML 5

11 | 12 |

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

13 | 14 | 
git clone https://github.com/agragregra/OptimizedHTML-5 .; rm -rf trunk .gitignore readme.md .git .editorconfig
15 | 16 |
    17 |
  1. Clone or Download OptimizedHTML 5 from GitHub
    2. 18 |
  2. Install Node Modules: npm i
    3. 19 |
  3. Run: npm run dev
    4. 20 |
  4. Build: npm run build
    5. 21 |
22 | 23 |

Main Gulpfile.js options:

24 | 25 | 29 | 30 |

Main Gulp tasks:

31 | 32 | 38 | 39 |

Basic rules

40 | 41 |

src's & dist's:

42 | 43 |
    44 |
  1. All src | dist scripts located in app/js/app.js | app.min.js
    2. 45 |
  2. Main Sass|Less|Styl src files located in app/styles/{preprocessor}/main.*
    3. 46 |
  3. All compressed styles located in app/css/main.min.css
    4. 47 |
  4. Project styles config placed in app/styles/{preprocessor}/_config.*
    5. 48 |
  5. All src images placed in app/images/src/ folder
    6. 49 |
  6. All compressed images placed in app/images/dist/ folder
    7. 50 |
51 | 52 |

Include parts of HTML code:

53 | 54 |

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:

55 | 56 | 
<!--#include virtual="/parts/header.html" -->
57 | 58 |

Variables? No problem:

59 | 60 | 
 61 | <!--#set var="title" value="OptimizedHTML 5" -->
 62 | <!--#include virtual="/parts/header.html" -->
 63 |
64 | 65 |

In "/parts/header.html":

66 | 67 | 
 68 | <title><!--#echo var="title" --></title>
 69 |
70 | 71 |

Include parts of Preprocessor code:

72 | 73 |

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.

74 | 75 |

Included features

76 | 77 |
    78 |
  1. bootstrap-reboot - Bootstrap Reboot CSS collection
    2. 79 |
  2. bootstrap-grid (optional) - Bootstrap Grid collection
    3. 80 |
81 | 82 |

Helpers

83 | 84 |

Fonts

85 | 86 |

The woff2 fonts are currently recommended.

87 | 88 |

Converter recommended: https://www.fontsquirrel.com/tools/webfont-generator
89 | 90 |

font-weight helper

91 | 92 | 103 | 104 |

Caching

105 | 106 |

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

107 | 108 | 
109 | <ifModule mod_expires.c>
110 | 
111 | # Add correct content-type for fonts & SVG
112 | AddType application/font-woff2 .woff2
113 | AddType image/svg+xml .svg
114 | 
115 | ExpiresActive On
116 | ExpiresDefault "access plus 5 seconds"
117 | 
118 | # Cache Images
119 | ExpiresByType image/x-icon "access plus 2592000 seconds"
120 | ExpiresByType image/jpeg "access plus 2592000 seconds"
121 | ExpiresByType image/png "access plus 2592000 seconds"
122 | ExpiresByType image/gif "access plus 2592000 seconds"
123 | ExpiresByType image/svg+xml "access plus 2592000 seconds"
124 | 
125 | # Cache Fonts
126 | ExpiresByType application/font-woff2 "access plus 2592000 seconds"
127 | ExpiresByType image/svg+xml "access plus 2592000 seconds"
128 | 
129 | # Cache other content types (CSS, JS, HTML, XML)
130 | ExpiresByType text/css "access plus 604800 seconds"
131 | ExpiresByType text/javascript "access plus 2592000 seconds"
132 | ExpiresByType application/javascript "access plus 2592000 seconds"
133 | ExpiresByType application/x-javascript "access plus 2592000 seconds"
134 | ExpiresByType text/html "access plus 600 seconds"
135 | ExpiresByType application/xhtml+xml "access plus 600 seconds"
136 | 
137 | </ifModule>
138 | 
139 | <ifModule mod_deflate.c>
140 | 
141 | 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
142 | 
143 | </ifModule>
144 |
145 | 146 |

Issues

147 | 148 |
    149 |
  1. Long Preprocessor compile: Disable the "safe write" option in PHPStorm/WebStorm settings.
    2. 150 |
151 | --------------------------------------------------------------------------------