axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update README file.

Browse Source
This commit is contained in:
Roman Axelrod
2022-04-24 14:34:42 +03:00
parent 2e1f9873d0
commit 07a23192d8
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+22 -10
View File
@@ -12,7 +12,7 @@ Run development environment:
npm start npm start
``` ```
## How it works ## How it works ⚙️
The project runs `gulp` and `browsersync` beyond the scenes. 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 Each change in template, styling or script files will reload the page. The idea is to have a comfortable development
@@ -46,7 +46,7 @@ We have a “blocks system”, means you will have to follow strict rules and us
You will find multiple `*.json` files in `/data` folder after the first run of `npm start`. 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 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. 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 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. make sure that the block is always rendered properly.
@@ -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. > 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. > 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. 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} 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/ 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 ( Use Mobile First approach. Start with mobile device styling and then focus on other screen sizes by using @media (
min-width: ...px). 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. 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. 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. Make sure all "clickable" elements have `&:hover` & `&:focus` states in CSS rules.
This might be related to links, buttons or any other interactive elements. 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: 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 If you follow the rules of REM unit - your layout must be "elastic" and most of the breakpoints should be rendered
properly. properly.
## Pixel Perfect Test ### Pixel Perfect Test ✔️
Compare the final result with provided screenshots. 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. or any other tool/approach that you're familiar with.
The idea is to have "pretty close" result to requested design. 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.