Added Readme and updated config files with new config property - cssUrl.

4 years ago · 5818e8bd51
7 changed files with 91 additions and 6 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,82 @@
+# Development Setup
+
+Install required modules:
+
+```
+npm install
+```
+
+Run development environment:
+
+```
+npm component-dev
+```
+
+# Block Structure
+
+You will find all the block files in `/src` folder.
+
+```
+/src/images/
+    *.png, *jpg, *.svg
+    
+/src/scritps/
+    *.mjs, *js
+    
+/src/styles/
+    *.scss
+    
+/src/template.hbs
+```
+
+# Block rules
+
+We have a “blocks system”, means you will have to follow strict rules and use listed technologies:
+
+## Template Layout & Data
+
+### Handlebars
+
+In this project, [Handlebars](https://handlebarsjs.com/guide/ "What is Handlebars") used as a template engine.
+
+All the template layout must be in a single `*.hbs` file that located in `/src` folder.
+
+### Data
+
+In `/data` folder, you can find multiple `*.json` files.
+
+These files are used as data sources in layout. By reviewing these files you can understand what parameters you have and
+how the data is stored.
+
+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
+
+Use BEM naming system for class names: http://getbem.com/naming/
+
+## Styling rules
+
+### Mobile First
+
+Use Mobile First approach. Start with mobile device styling and then focus on other screen sizes by using @media (
+min-width: ...px).
+
+### CSS Units
+
+Use `rem` units instead of pixels. `1rem = 16pixels`.
+
+No need to use rem in situations of `1px` or `2px`. (usually used for borders width).
+
+It's important to mention that the block is "elastic". By using `rem` units we are able to scale the layout and keep the
+aspect ratio.
+
+### Global Styling
+
+The development environment includes CSS rules of the original project. The CSS file is embedded in served HTML.
+
+# Testing
+
+## Development Toolbar
+
+Use development toolbar to switch between data sources and test responsiveness of block.
--- a/config/default.cjs
+++ b/config/default.cjs
@ -1,3 +1,4 @@
 module.exports = {
-    "mode": "production"
+    "mode": "production",
+    "cssUrl": "https://",
 }
--- a/config/development.cjs
+++ b/config/development.cjs
@ -1,3 +1,4 @@
 module.exports = {
-    "mode": "development"
+    "mode": "development",
+    "cssUrl": "https://",
 }
--- a/layouts/page-container.hbs
+++ b/layouts/page-container.hbs
@ -1,7 +1,6 @@
 <html lang="en">
 <head>
-    <!-- <meta> tags> -->
-    <link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
+    <link rel="stylesheet" href="{{ config.cssUrl }}">
    <link rel="stylesheet" href="styles/template.min.css">
 </head>

--- a/layouts/page.hbs
+++ b/layouts/page.hbs
@ -1,7 +1,6 @@
 <html lang="en">
 <head>
-    <!-- <meta> tags> -->
-    <link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
+    <link rel="stylesheet" href="{{ config.cssUrl }}">
    <link rel="stylesheet" href="styles/template.min.css">
 </head>

--- a/server.js
+++ b/server.js
@ -42,6 +42,8 @@ app.get('/', async (req, res) => {
    const jsonFileName = (req.query.data) ? req.query.data : 'default';
    const data = await fs.readJson(`./data/${jsonFileName}.json`);

+    Object.assign(data, {config});
+
    res.render('page-container', data);
 });

--- a/src/styles/template.scss
+++ b/src/styles/template.scss
@ -5,6 +5,7 @@
 * Use BEM naming system for class names: http://getbem.com/naming/
 *
 * Use Mobile First approach.
+ *    Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
 *
 */