From 5818e8bd5196f09c2d730c433626572195e7f4b4 Mon Sep 17 00:00:00 2001 From: Roman Axelrod Date: Fri, 22 Apr 2022 17:30:55 +0300 Subject: [PATCH] Added Readme and updated config files with new config property - cssUrl. --- README.md | 82 ++++++++++++++++++++++++++++++++++++++ config/default.cjs | 3 +- config/development.cjs | 3 +- layouts/page-container.hbs | 3 +- layouts/page.hbs | 3 +- server.js | 2 + src/styles/template.scss | 1 + 7 files changed, 91 insertions(+), 6 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..a3ccd3f --- /dev/null +++ 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. diff --git a/config/default.cjs b/config/default.cjs index f0b6e80..e9a946f 100644 --- a/config/default.cjs +++ b/config/default.cjs @@ -1,3 +1,4 @@ module.exports = { - "mode": "production" + "mode": "production", + "cssUrl": "https://", } diff --git a/config/development.cjs b/config/development.cjs index 52788f4..d246345 100644 --- a/config/development.cjs +++ b/config/development.cjs @@ -1,3 +1,4 @@ module.exports = { - "mode": "development" + "mode": "development", + "cssUrl": "https://", } diff --git a/layouts/page-container.hbs b/layouts/page-container.hbs index a24d970..bbdf5cc 100644 --- a/layouts/page-container.hbs +++ b/layouts/page-container.hbs @@ -1,7 +1,6 @@ - - + diff --git a/layouts/page.hbs b/layouts/page.hbs index a54202b..ef203f2 100644 --- a/layouts/page.hbs +++ b/layouts/page.hbs @@ -1,7 +1,6 @@ - - + diff --git a/server.js b/server.js index fcc02ba..cfd17b7 100755 --- 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); }); diff --git a/src/styles/template.scss b/src/styles/template.scss index 9b5b4b5..6935267 100644 --- 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). * */