readme and project example updated

ssidorenkoJustcoded · ssidorenkoJustcoded · commit 7595f4eafa37 · 2019-06-18T17:12:14.000+03:00
diff --git a/README.md b/README.md
@@ -46,6 +46,7 @@ This is not to say that Web Starter Kit cannot be used in browsers older than th
 | Performance optimization               | Minify and concatenate JavaScript, CSS, HTML and images to help keep your pages lean (Run `gulp` to create an optimised version of your project to `/assets`).                                                                                                |
 | Code Linting               | JavaScript code linting is done using [esLint](https://www.npmjs.com/package/gulp-eslint) - a linter tool for identifying and reporting on patterns in JavaScript (used airbnb-base rules https://www.npmjs.com/package/eslint-config-airbnb-base). HTML code hinting is done using [HtmlHint](https://www.npmjs.com/package/gulp-htmlhint).                                                                                             |
 | ES2015(ES6) Support                   | Optional ES2015 support .You can use all kind of ES6 features here. ES2015 source code will be automatically transpiled to ES5 for wide browser support.  |
+| HTML templating                       | Used [gulp-file-include](https://www.npmjs.com/package/gulp-file-include) for templating html files. |
 | Built-in HTTP Server                   | A built-in server for previewing your site locally while you develop and iterate.                                                                                                                                                                            |
 | Live Browser Reloading                 | Reload the browser in real-time anytime an edit is made without the need for an extension (Run `gulp` and edit your files).                                                                                                                           |
 | Cross-device Synchronization           | Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by [BrowserSync](http://browsersync.io) (Run `gulp` and open up the IP provided on other devices on your network).                       |
@@ -179,6 +180,9 @@ In `src` folder you can find all sources for the project (images, sass , javascr
 ## `src` folder structure
 
 ```
+├── html
+   ├── partials                 #Folder for html components, that we can include into the templates 
+   ├── templates                #Folder for source html templates of pages
 ├── images                      #Folder for storing images
 ├── js                          #Folder for storing js files
    ├── modules                  #Folder for storing js modules
@@ -273,6 +277,7 @@ Also, you might want to add these sass files to the ignore list (check `getPathe
 | build-styles-vendors                 | Compiles and minifies all plugins  scss from `src/vendor_entries` to `production`   folder.                                                                                                                                                                            |
 | clean-production                | `production` folder removing.                                                                                                                           |
 | copy-folders           | Need to copy all folders from sources to assets.                       |
+| file-include           | Compiles all html templates into html files.                       |
 | templates           | Compiles all pug files into html files.                       |
 | html-hint           | Need to hint html files.                    |
 | es-lint           | Need to lint js files.                      |
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
+  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Starter Kit</title>
@@ -13,8 +13,9 @@
 <body>
   <div id="wrapper">
     <div class="entry-section">
-      <div id="home-canvas"></div>
-    </div>
+  <div id="home-canvas"></div>
+</div>
+
     <section class="starter-box">
   <h1>JustCoded</h1>
   <p>Web Starter Kit</p>
diff --git a/src/html/partials/components/entry-section.html b/src/html/partials/components/entry-section.html
@@ -0,0 +1,3 @@
+<div class="entry-section">
+  <div id="home-canvas"></div>
+</div>
diff --git a/src/html/partials/components/home-canvas.html b/src/html/partials/components/home-canvas.html
diff --git a/src/html/partials/components/sections/starter-box.html b/src/html/partials/components/sections/starter-box.html
diff --git a/src/html/partials/components/starter-box.html b/src/html/partials/components/starter-box.html
@@ -0,0 +1,4 @@
+<section class="starter-box">
+  <h1>@@title</h1>
+  <p>@@intro-text</p>
+</section>
diff --git a/src/html/partials/head/head.html b/src/html/partials/head/head.html
@@ -0,0 +1,7 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Web Starter Kit</title>
+  <link media="all" rel="stylesheet" href="assets/css/vendor.min.css">
+  <link media="all" rel="stylesheet" href="assets/css/style.min.css">
+</head>
diff --git a/src/html/templates/index.html b/src/html/templates/index.html
@@ -2,20 +2,16 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Web Starter Kit</title>
-  <link media="all" rel="stylesheet" href="assets/css/vendor.min.css">
-  <link media="all" rel="stylesheet" href="assets/css/style.min.css">
-</head>
+  @@include('../partials/head/head.html')
 
 <body>
   <div id="wrapper">
-    <div class="entry-section">
-      @@include('../partials/components/home-canvas.html')
-    </div>
-    @@include('../partials/components/sections/starter-box.html')
+    @@include('../partials/components/entry-section.html')
+
+    @@include('../partials/components/starter-box.html',  {
+      "title": "JustCoded",
+      "intro-text": "Web Starter Kit"
+    })
   </div>
   <script src="assets/js/vendor.min.js" defer></script>
   <script src="assets/js/app.js" defer></script>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<div class="entry-section">`
	`2`	`+ <div id="home-canvas"></div>`
	`3`	`+</div>`