Added Readme and updated config files with new config property - cssUrl.
This commit is contained in:
@@ -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.
|
||||||
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
"mode": "production"
|
"mode": "production",
|
||||||
|
"cssUrl": "https://",
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
"mode": "development"
|
"mode": "development",
|
||||||
|
"cssUrl": "https://",
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- <meta> tags> -->
|
<link rel="stylesheet" href="{{ config.cssUrl }}">
|
||||||
<link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
|
|
||||||
<link rel="stylesheet" href="styles/template.min.css">
|
<link rel="stylesheet" href="styles/template.min.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
+1
-2
@@ -1,7 +1,6 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- <meta> tags> -->
|
<link rel="stylesheet" href="{{ config.cssUrl }}">
|
||||||
<link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
|
|
||||||
<link rel="stylesheet" href="styles/template.min.css">
|
<link rel="stylesheet" href="styles/template.min.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@@ -42,6 +42,8 @@ app.get('/', async (req, res) => {
|
|||||||
const jsonFileName = (req.query.data) ? req.query.data : 'default';
|
const jsonFileName = (req.query.data) ? req.query.data : 'default';
|
||||||
const data = await fs.readJson(`./data/${jsonFileName}.json`);
|
const data = await fs.readJson(`./data/${jsonFileName}.json`);
|
||||||
|
|
||||||
|
Object.assign(data, {config});
|
||||||
|
|
||||||
res.render('page-container', data);
|
res.render('page-container', data);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
* Use BEM naming system for class names: http://getbem.com/naming/
|
* Use BEM naming system for class names: http://getbem.com/naming/
|
||||||
*
|
*
|
||||||
* Use Mobile First approach.
|
* Use Mobile First approach.
|
||||||
|
* Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user