diff --git a/README.md b/README.md index 26e12ba..87728ec 100644 --- a/README.md +++ b/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 diff --git a/config/default.cjs b/config/default.cjs index e9a946f..c20c4ad 100644 --- a/config/default.cjs +++ b/config/default.cjs @@ -1,4 +1,4 @@ module.exports = { - "mode": "production", - "cssUrl": "https://", + cssUrl: "https://", + blockName: "template", } diff --git a/config/development.cjs b/config/development.cjs index d246345..8c9e1cb 100644 --- a/config/development.cjs +++ b/config/development.cjs @@ -1,4 +1,5 @@ module.exports = { - "mode": "development", - "cssUrl": "https://", + mode: "development", + cssUrl: "https://", + blockName: "template", } diff --git a/layouts/page-container.hbs b/layouts/page-container.hbs index e58dd23..e19ea35 100644 --- a/layouts/page-container.hbs +++ b/layouts/page-container.hbs @@ -8,7 +8,7 @@
- {{> src/template }} + {{> (include_block_template) }}
diff --git a/layouts/page.hbs b/layouts/page.hbs index b77c1ee..b99b842 100644 --- a/layouts/page.hbs +++ b/layouts/page.hbs @@ -7,7 +7,7 @@ {{> (include_partial "layouts/partials/toolbar") }}
- {{> src/template }} + {{> (include_block_template) }}
{{> (include_partial "layouts/partials/scripts") }} diff --git a/layouts/partials/head.hbs b/layouts/partials/head.hbs index 5af5aab..f5408b7 100644 --- a/layouts/partials/head.hbs +++ b/layouts/partials/head.hbs @@ -4,6 +4,6 @@ - + diff --git a/layouts/partials/scripts.hbs b/layouts/partials/scripts.hbs index 7c814e9..02942e2 100644 --- a/layouts/partials/scripts.hbs +++ b/layouts/partials/scripts.hbs @@ -1,4 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/server.js b/server.js index 257c340..18c5670 100755 --- a/server.js +++ b/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); diff --git a/src/template.hbs b/src/template.hbs deleted file mode 100644 index 2f085bb..0000000 --- a/src/template.hbs +++ /dev/null @@ -1,13 +0,0 @@ -
-
-

Ready!

-
- -
-

- Review the `/data` folder with JSON data files.
- Don't change data JSON files - use the data as it is. -

-

Build the layout based on provided data structure.

-
-
\ No newline at end of file diff --git a/src/template.template.hbs b/src/template.template.hbs new file mode 100644 index 0000000..cf91e69 --- /dev/null +++ b/src/template.template.hbs @@ -0,0 +1,70 @@ +
+ + {{! + Remove Everything Below: + }} + + + +
+

Ready!

+
+ +
+

+ Review the `/data` folder with JSON data files.
+ Don't change data JSON files - use the data as it is. +

+

Build the layout based on provided data structure.

+ +

+
+ +

Image Example

+
+ +
+ + <img src="images/demo.jpeg" alt=""> + +
+ +

+
+ +

Available Buttons Styling

+ +
+ Primary +
+ + <a href="#" class="btn btn--primary">Primary</a> + +
+ +
+ +
+ Secondary +
+ + <a href="#" class="btn btn--secondary">Secondary</a> + +
+
+ + {{! + Remove END + }} + +
\ No newline at end of file