23 changed files with 26576 additions and 12475 deletions
@ -1,155 +1,22 @@ |
|||
# Development Setup |
|||
# Create Block - Development Tool |
|||
|
|||
Install required modules: |
|||
This project used as: |
|||
|
|||
```sh |
|||
npm install |
|||
``` |
|||
|
|||
Run development environment: |
|||
|
|||
```sh |
|||
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. |
|||
1. Block generator |
|||
2. Development Environment |
|||
|
|||
# Block Structure |
|||
## Block Generator |
|||
|
|||
You will find all the block files in `/src` folder. |
|||
To create/generate new block by template use: |
|||
|
|||
``` |
|||
/src/images/ |
|||
*.png, *jpg, *.svg |
|||
|
|||
/src/scritps/ |
|||
*.mjs, *js |
|||
|
|||
/src/styles/ |
|||
*.scss |
|||
|
|||
/src/*.template.hbs |
|||
npm run generate-block |
|||
``` |
|||
|
|||
# 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](https://handlebarsjs.com/guide/ "What is 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](https://swiperjs.com/get-started). |
|||
|
|||
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](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 ✔️ |
|||
|
|||
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: |
|||
|
|||
1. 1920px in width... |
|||
2. 1680px |
|||
3. 1440px |
|||
4. 1360px |
|||
5. 1280px |
|||
6. 1024px |
|||
7. 980px |
|||
8. 768px |
|||
9. 600px |
|||
10. 414px |
|||
11. 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](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en) |
|||
or any other tool/approach that you're familiar with. |
|||
The idea is to have "pretty close" result to requested design. |
|||
The `/blocks` folder will be generated. Then you can run `npm install`, `npm start` to launch the development |
|||
environment. |
|||
|
|||
## 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) |
|||
## Development Environment |
|||
|
|||
If everything is OK - send a Pull Request to the git project or share a ZIP file with me directly. |
|||
Generated blocks are including this repository. |
|||
This project is running a nodejs script with `browsersync` and `gulp` which improves the development process. |
|||
|
|||
@ -1,7 +0,0 @@ |
|||
module.exports = { |
|||
mode: "development", |
|||
cssUrl: "https://", |
|||
blockName: "template", |
|||
baseView: "container", |
|||
remToPx: 16, |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
{ |
|||
"title": "Option Two", |
|||
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>", |
|||
"cta_text": "Our Success Stories", |
|||
"url": "https://google.com" |
|||
} |
|||
@ -0,0 +1,145 @@ |
|||
const path = require('path'); |
|||
const Generator = require('yeoman-generator'); |
|||
// const exec = require('child_process').exec; |
|||
|
|||
const baseDir = path.join(__dirname, '../../'); |
|||
|
|||
module.exports = class extends Generator { |
|||
async prompting() { |
|||
this.data = await this.prompt([ |
|||
{ |
|||
type: "input", |
|||
name: "name", |
|||
message: "Block Name", |
|||
validate: (str) => { |
|||
const matches = str.match(/\d+/g); |
|||
|
|||
if (matches != null) { |
|||
return false; |
|||
} |
|||
|
|||
return !!str; |
|||
} |
|||
}, |
|||
// { |
|||
// type: "input", |
|||
// name: "name", |
|||
// message: "Project ID" |
|||
// }, |
|||
{ |
|||
type: "list", |
|||
name: "baseView", |
|||
message: "View Template", |
|||
default: 'container', |
|||
choices: ['container', 'alignfull'], |
|||
}, |
|||
// { |
|||
// type: "confirm", |
|||
// name: "include_script", |
|||
// default: false, |
|||
// message: "Include script.js File?" |
|||
// }, |
|||
]); |
|||
} |
|||
|
|||
writing() { |
|||
const title = capitalize(this.data.name); |
|||
const data = Object.assign(this.data, { |
|||
title, |
|||
blockFilename: title.toLowerCase().replace(/ /ig, '-'), |
|||
blockClassName: title.toLowerCase().replace(/ /ig, '_'), |
|||
}); |
|||
|
|||
const pathDist = path.join(baseDir, 'blocks', data.blockFilename); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('src/template.template.hbs'), |
|||
this.destinationPath(path.join(pathDist, 'src', data.blockFilename + '.template.hbs')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('src/styles/template.scss'), |
|||
this.destinationPath(path.join(pathDist, 'src', 'styles', data.blockFilename + '.scss')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('src/scripts/template.mjs'), |
|||
this.destinationPath(path.join(pathDist, 'src', 'scripts', data.blockFilename + '.mjs')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('src/images/demo.jpeg'), |
|||
this.destinationPath(path.join(pathDist, 'src', 'images', 'demo.jpeg')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('config/default.cjs'), |
|||
this.destinationPath(path.join(pathDist, 'config', 'default.cjs')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('package.json'), |
|||
this.destinationPath(path.join(pathDist, 'package.json')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('data/default.json'), |
|||
this.destinationPath(path.join(pathDist, 'data', 'default.json')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('data/advanced.json'), |
|||
this.destinationPath(path.join(pathDist, 'data', 'advanced.json')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('README.md'), |
|||
this.destinationPath(path.join(pathDist, 'README.md')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('.editorconfig'), |
|||
this.destinationPath(path.join(pathDist, '.editorconfig')), |
|||
data |
|||
); |
|||
|
|||
this.fs.copyTpl( |
|||
this.templatePath('.gitignore'), |
|||
this.destinationPath(path.join(pathDist, '.gitignore')), |
|||
data |
|||
); |
|||
|
|||
// Run BUILD script |
|||
// var cmd = exec("npm run build", function (err, stdout, stderr) { |
|||
// if (err) { |
|||
// console.log('Issue with running - "npm run build"\n\n', err); |
|||
// } |
|||
// }); |
|||
|
|||
// console.log(`\n\nDon't forget to connect the Component in your functions.php file ;)\n\n`); |
|||
} |
|||
}; |
|||
|
|||
function capitalize(str) { |
|||
if (typeof str !== 'string') { |
|||
return ''; |
|||
} |
|||
|
|||
return str |
|||
.toLowerCase() |
|||
.split(/[ -_]/g) |
|||
.filter((word) => !!word) |
|||
.map((word) => { |
|||
return word.charAt(0).toUpperCase() + word.slice(1); |
|||
}) |
|||
.join(' '); |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
# This file is for unifying the coding style for different editors and IDEs |
|||
# editorconfig.org |
|||
|
|||
# WordPress Coding Standards |
|||
# https://make.wordpress.org/core/handbook/coding-standards/ |
|||
|
|||
root = true |
|||
|
|||
[*] |
|||
charset = utf-8 |
|||
end_of_line = lf |
|||
insert_final_newline = true |
|||
trim_trailing_whitespace = true |
|||
indent_style = space |
|||
indent_size = 2 |
|||
|
|||
[*.json] |
|||
indent_style = tab |
|||
indent_size = 4 |
|||
|
|||
[*.md] |
|||
trim_trailing_whitespace = false |
|||
|
|||
@ -0,0 +1,7 @@ |
|||
# Basic |
|||
.idea |
|||
.DS_Store |
|||
node_modules |
|||
vendor |
|||
|
|||
# Custom |
|||
@ -0,0 +1,155 @@ |
|||
# Development Setup |
|||
|
|||
Install required modules: |
|||
|
|||
```sh |
|||
npm install |
|||
``` |
|||
|
|||
Run development environment: |
|||
|
|||
```sh |
|||
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](https://handlebarsjs.com/guide/ "What is 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](https://swiperjs.com/get-started). |
|||
|
|||
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](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 ✔️ |
|||
|
|||
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: |
|||
|
|||
1. 1920px in width... |
|||
2. 1680px |
|||
3. 1440px |
|||
4. 1360px |
|||
5. 1280px |
|||
6. 1024px |
|||
7. 980px |
|||
8. 768px |
|||
9. 600px |
|||
10. 414px |
|||
11. 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](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en) |
|||
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. |
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
cssUrl: "https://", |
|||
blockName: "<%= blockFilename %>", |
|||
baseView: "<%= baseView %>", |
|||
} |
|||
@ -1,6 +1,8 @@ |
|||
module.exports = { |
|||
cssUrl: "https://", |
|||
blockName: "template", // snake_case |
|||
{ |
|||
"title": "Option Two", |
|||
"content": "<p><b>Delivering top results to industry leaders:</b></p>", |
|||
"cta_text": "Our Success Stories", |
|||
"url": "https://google.com" |
|||
} |
|||
|
|||
/** |
|||
@ -1,6 +1,6 @@ |
|||
{ |
|||
"title": "As a Global Salesforce Partner,\n we deliver Service Cloud solutions\n and complex Field Service Management\n in diverse industries worldwide", |
|||
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>", |
|||
"content": "<p><b>Delivering top results to industry leaders:</b></p>", |
|||
"cta_text": "Our Success Stories", |
|||
"url": "https://google.com" |
|||
} |
|||
@ -1,5 +1,5 @@ |
|||
{ |
|||
"name": "template-block", |
|||
"name": "<%= blockFilename %>", |
|||
"version": "1.0.0", |
|||
"scripts": { |
|||
"start": "component-dev" |
|||
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
File diff suppressed because it is too large
@ -1,2 +0,0 @@ |
|||
!function(o){console.log("Ready!"),console.log("jQuery =",o),console.log("Swiper =",window.Swiper)}(window.jQuery); |
|||
//# sourceMappingURL=template.min.js.map
|
|||
@ -1 +0,0 @@ |
|||
{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAETC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJjC,CAMGD,OAAOE","file":"template.min.js","sourcesContent":["(function ($) {\n\n console.log('Ready!');\n console.log('jQuery =', $);\n console.log('Swiper =', window.Swiper);\n\n})(window.jQuery);\n"]} |
|||
@ -1 +0,0 @@ |
|||
{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;AAwBA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n * No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n * Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).\n *\n */\n\n.template {\n padding: 1rem;\n\n // EXAMPLE OF BREAKPOINTS\n\n @media (min-width: 600px) {\n // Tablet\n }\n\n @media (min-width: 980px) {\n // Large Tablet\n }\n\n @media (min-width: 1024px) {\n // Laptop & Tablet\n }\n\n @media (min-width: 1336px) {\n // Laptop\n }\n\n @media (min-width: 1680px) {\n // Desktop\n }\n\n &__header {\n border-bottom: 2px solid green;\n\n &-heading {\n // Heading\n }\n }\n\n &__content {\n // Content\n }\n}"]} |
|||
@ -1,48 +0,0 @@ |
|||
/** |
|||
* Use "rem" instead of pixels. 1rem = 16pixels |
|||
* No need to use rem in situations of "1px". (usually used for borders width). |
|||
* |
|||
* Use BEM naming system for class names: http://getbem.com/naming/ |
|||
* |
|||
* Use Mobile First approach. |
|||
* Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px). |
|||
* |
|||
*/ |
|||
|
|||
.template { |
|||
padding: 1rem; |
|||
|
|||
// EXAMPLE OF BREAKPOINTS |
|||
|
|||
@media (min-width: 600px) { |
|||
// Tablet |
|||
} |
|||
|
|||
@media (min-width: 980px) { |
|||
// Large Tablet |
|||
} |
|||
|
|||
@media (min-width: 1024px) { |
|||
// Laptop & Tablet |
|||
} |
|||
|
|||
@media (min-width: 1336px) { |
|||
// Laptop |
|||
} |
|||
|
|||
@media (min-width: 1680px) { |
|||
// Desktop |
|||
} |
|||
|
|||
&__header { |
|||
border-bottom: 2px solid green; |
|||
|
|||
&-heading { |
|||
// Heading |
|||
} |
|||
} |
|||
|
|||
&__content { |
|||
// Content |
|||
} |
|||
} |
|||
Loading…
Reference in new issue