AXE-WEB
/
block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/1/head
Roman Axelrod 4 years ago
parent
560c3fc6e0
commit
5818e8bd51
7 changed files with 91 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      README.md
  2. 3
      config/default.cjs
  3. 3
      config/development.cjs
  4. 3
      layouts/page-container.hbs
  5. 3
      layouts/page.hbs
  6. 2
      server.js
  7. 1
      src/styles/template.scss

82
README.md
View File

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

3
config/default.cjs
View File

@ -1,3 +1,4 @@
module.exports = { module.exports = {
"mode": "production" "mode": "production",
"cssUrl": "https://",
} }

3
config/development.cjs
View File

@ -1,3 +1,4 @@
module.exports = { module.exports = {
"mode": "development" "mode": "development",
"cssUrl": "https://",
} }

3
layouts/page-container.hbs
View File

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

3
layouts/page.hbs
View File

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

2
server.js
View File

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

1
src/styles/template.scss
View File

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

Write Preview
Loading…
Cancel
Save