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

2022-04-22 17:30:55 +03:00
parent 560c3fc6e0
commit 5818e8bd51
7 changed files with 91 additions and 6 deletions
@@ -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.
@@ -1,3 +1,4 @@
 module.exports = {
-    "mode": "production"
+    "mode": "production",
+    "cssUrl": "https://",
 }
@@ -1,3 +1,4 @@
 module.exports = {
-    "mode": "development"
+    "mode": "development",
+    "cssUrl": "https://",
 }
@@ -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>

@@ -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>

@@ -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);
 });

@@ -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).
 *
 */