Support BlockName config - allows to rename the block.

README.md

@@ -26,7 +26,7 @@ You will find all the block files in `/src` folder.
 /src/styles/
     *.scss
     
-/src/template.hbs
+/src/*.template.hbs
 ```
 
 # Block rules
@@ -51,7 +51,12 @@ how the data is stored. Don't change or edit these files - use the data as it is
 There are multiple data sources since the block can be reused in different situations with different data. We have to
 make sure that the block is always rendered properly.
 
-## Class Naming Convention
+### Static Media Files
+
+Use the `/src/images` folder in case you need to upload images or video files to the template. These files will be
+available by the next URL: http://localhost:3000/images/${filename}
+
+### Class Naming Convention
 
 Use BEM naming system for class names: http://getbem.com/naming/
 
@@ -90,7 +95,26 @@ The lib is included in the project and ready for use. Test with `window.Swiper`
 
 ## Development Toolbar
 
-Use development toolbar to switch between data sources and test responsiveness of block.
+Use development toolbar to switch between data sources.
+
+## Responsiveness
+
+Make sure the layout is rendered correctly on all standard breakpoint size:
+
+1. 1920px in width...
+2. 1680px
+3. 1440px
+4. 1360px
+5. 1280px
+6. 1024px
+7. 980px
+8. 768px
+9. 600px
+10. 414px
+11. 375px
+
+If you follow the rules of REM unit - your layout must be "elastic" and most of the breakpoints should be rendered
+properly.
 
 ## Pixel Perfect Test
 

config/default.cjs

@@ -1,4 +1,4 @@
 module.exports = {
-    "mode": "production",
-    "cssUrl": "https://",
+    cssUrl: "https://",
+    blockName: "template",
 }

config/development.cjs

@@ -1,4 +1,5 @@
 module.exports = {
-    "mode": "development",
-    "cssUrl": "https://",
+    mode: "development",
+    cssUrl: "https://",
+    blockName: "template",
 }

layouts/page-container.hbs

@@ -8,7 +8,7 @@
 
 <main>
     <div class="container">
-        {{> src/template }}
+        {{> (include_block_template) }}
     </div>
 </main>
 

layouts/page.hbs

@@ -7,7 +7,7 @@
 {{> (include_partial "layouts/partials/toolbar") }}
 
 <main>
-    {{> src/template }}
+    {{> (include_block_template) }}
 </main>
 
 {{> (include_partial "layouts/partials/scripts") }}

layouts/partials/head.hbs

@@ -4,6 +4,6 @@
 
     <link rel="stylesheet" href="{{ config.cssUrl }}">
     <link rel="stylesheet" href="styles/page--main.css">
-    <link rel="stylesheet" href="styles/template.min.css">
+    <link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
     <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
 </head>

layouts/partials/scripts.hbs

@@ -1,4 +1,4 @@
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
 <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
 <script src="scripts/page--toolbar.js"></script>
-<script src="scripts/template.min.js"></script>
+<script src="scripts/{{ config.blockName }}.min.js"></script>

server.js

@@ -58,12 +58,14 @@ app.get('/', async (req, res) => {
                     active: jsonFileName === name,
                 };
             }),
-            cssUrl: config.get('cssUrl')
+            cssUrl: config.get('cssUrl'),
+            blockName: config.get('blockName')
         }
     });
 
     data.helpers = {
         include_partial: (path) => projectDir + path,
+        include_block_template: (path) => 'src/' + config.get('blockName') + '.template',
     }
 
     res.render('page-container', data);

src/template.hbs

@@ -1,13 +0,0 @@
-<section class="template">
-    <header class="template__header">
-        <h1 class="template__header-heading">Ready!</h1>
-    </header>
-
-    <div class="template__content">
-        <p>
-            Review the `/data` folder with JSON data files.<br>
-            Don't change data JSON files - use the data as it is.
-        </p>
-        <p>Build the layout based on provided data structure.</p>
-    </div>
-</section>

src/template.template.hbs

@@ -0,0 +1,70 @@
+<section class="template">
+
+    {{!
+    Remove Everything Below:
+    }}
+
+    <style>
+        code {
+            background-color: #eee;
+            color: #333;
+            padding: 1rem 1.5rem;
+            border: 2px solid #d8d8d8;
+            display: inline-block;
+            border-radius: 2px;
+            font-size: 14px;
+        }
+    </style>
+
+    <header class="template__header">
+        <h1 class="template__header-heading">Ready!</h1>
+    </header>
+
+    <div class="template__content">
+        <p>
+            Review the `/data` folder with JSON data files.<br>
+            Don't change data JSON files - use the data as it is.
+        </p>
+        <p>Build the layout based on provided data structure.</p>
+
+        <br><br>
+        <hr>
+
+        <h2>Image Example</h2>
+        <div>
+            <img src="images/demo.jpeg" alt="">
+            <br>
+            <code>
+                &lt;img src=&quot;images/demo.jpeg&quot; alt=&quot;&quot;&gt;
+            </code>
+        </div>
+
+        <br><br>
+        <hr>
+
+        <h2>Available Buttons Styling</h2>
+
+        <div>
+            <a href="#" class="btn btn--primary">Primary</a>
+            <br>
+            <code>
+                &lt;a href=&quot;#&quot; class=&quot;btn btn--primary&quot;&gt;Primary&lt;/a&gt;
+            </code>
+        </div>
+
+        <br>
+
+        <div>
+            <a href="#" class="btn btn--secondary">Secondary</a>
+            <br>
+            <code>
+                &lt;a href=&quot;#&quot; class=&quot;btn btn--secondary&quot;&gt;Secondary&lt;/a&gt;
+            </code>
+        </div>
+    </div>
+
+    {{!
+    Remove END
+    }}
+
+</section>