History

Roman Axelrod 9173efe9c9 Added the logic of wrapper + responsiveness controllers.		3 years ago
..
config	Added "activeDataFile" parameter in hbs templates.	4 years ago
data	Added Image_URL property to default data.json files.	4 years ago
src	Added the logic of wrapper + responsiveness controllers.	3 years ago
.editorconfig	Add block generator logic.	4 years ago
.gitignore	Add block generator logic.	4 years ago
README.md	Added delivery test to README file.	4 years ago
package.json	Add block generator logic.	4 years ago

README.md

Development Setup

Install required modules:

npm install

Run development environment:

npm start

How it works ⚙️

The project runs gulp and browsersync beyond the scenes.
Each change in template, styling or script files will reload the page. The idea is to have a comfortable development environment.

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

Data

You will find multiple *.json files in /data folder after the first run of npm start.

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.

Don't change or edit these files - use the data as it is!

Handlebars

Handlebars used as a template engine in the project.

All the template layout must be in a single *.hbs file that located in /src folder.

Use the data that is available in /data folder.
Avoid using any kind of "freestyle" input/content. Your template file must contain only HTML tags and Handlebars parameters.

Static Media Files 🖼️

Use the /src/images folder in case you need to upload images or video files to the template.
These files will be available by the next URL: http://localhost:3000/images/${filename}

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.
For example, 1rem = 16pixels depends on project.

No need to use rem in situations of 1px, 2px or 3px. (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. This is including fonts, CSS variables, container logic etc...

The CSS file is already embedded in served HTML.

JavaScript

Sliders

For any kind of slides animations - use SwiperJS.

The lib is included in the project and ready for use. Test with window.Swiper in browser console.

Summary

Short Video Review

Check the Video Guide

PRO TIP
Use x2 speed in the player 😜

Testing ✅

Use development toolbar to switch between data sources.

Conditional Statements

Make sure the data is available in Handlebars template.
If there is a chance that some data/property will be missing - wrap the HTML layout with conditional verification:

Example:
Render the link only if URL exists

{{#if link_cta_url }}
<a href="{{link_cta_url}}">Click Here</a>
{{ endif }}

Hover/Focus States ✔️

Make sure all "clickable" elements have &:hover & &:focus states in CSS rules.
This might be related to links, buttons or any other interactive elements.

Responsiveness ✔️

Make sure the layout is rendered correctly on all standard breakpoint size:

1920px in width...
1680px
1440px
1360px
1280px
1024px
980px
768px
600px
414px
375px

If you follow the rules of REM unit - your layout must be "elastic" and most of the breakpoints should be rendered properly.

Pixel Perfect Test ✔️

Compare the final result with provided screenshots.

You can use available Browser Extensions or any other tool/approach that you're familiar with.
The idea is to have "pretty close" result to requested design.

Delivery

Once you finished with the task, before letting me know - please review the next [Google Form link](https://forms.gle/w4sJjAyRDSSBRuGLA](https://forms.gle/w4sJjAyRDSSBRuGLA)

If everything is OK - send a Pull Request to the git project or share a ZIP file with me directly.