Browse Source

Update README file.

pull/1/head
Roman Axelrod 4 years ago
parent
commit
07a23192d8
  1. 30
      README.md

30
README.md

@ -12,7 +12,7 @@ Run development environment:
npm start
```
## How it works
## 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
@ -62,7 +62,7 @@ All the template layout must be in a single `*.hbs` file that located in `/src`
> 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
### 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}
@ -71,9 +71,9 @@ These files will be available by the next URL: http://localhost:3000/images/${fi
Use BEM naming system for class names: http://getbem.com/naming/
## Styling rules
## Styling rules 🎨
### Mobile First
### Mobile First 📱
Use Mobile First approach. Start with mobile device styling and then focus on other screen sizes by using @media (
min-width: ...px).
@ -102,18 +102,26 @@ For any kind of slides animations - use [SwiperJS](https://swiperjs.com/get-star
The lib is included in the project and ready for use. Test with `window.Swiper` in browser console.
# Testing
# Summary
## Development Toolbar
## Short Video Review
Check the [Video Guide](https://www.loom.com/share/1c707a4ea14e48b7a35a49d7b0a6f1e0)
> PRO TIP
> Use x2 speed in the player 😜
## Testing ✅
### Development Toolbar ✔️
Use development toolbar to switch between data sources.
## Hover/Focus States
### 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
### Responsiveness ✔️
Make sure the layout is rendered correctly on all standard breakpoint size:
@ -132,7 +140,7 @@ Make sure the layout is rendered correctly on all standard breakpoint size:
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
### Pixel Perfect Test ✔️
Compare the final result with provided screenshots.
@ -141,3 +149,7 @@ available [Browser Extensions](https://chrome.google.com/webstore/detail/perfect
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.

Loading…
Cancel
Save