Development Setup

Install required modules:

npm install

Run development environment:

npm start

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