Add block generator logic.
Now we are able to generate new blocks with yeoman.
This commit is contained in:
@@ -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 %>",
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"title": "Option Two",
|
||||
"content": "<p><b>Delivering top results to industry leaders:</b></p>",
|
||||
"cta_text": "Our Success Stories",
|
||||
"url": "https://google.com"
|
||||
}
|
||||
|
||||
/**
|
||||
* Tips for good data.json example:
|
||||
* - Provide Short and Long version of text (title/content).
|
||||
* - Put <a> and <strong> elements in content.
|
||||
* - Upload different sizes and ratios of images.
|
||||
* - Provide options with and without CTA to test conditional logic.
|
||||
*/
|
||||
@@ -0,0 +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",
|
||||
"content": "<p><b>Delivering top results to industry leaders:</b></p>",
|
||||
"cta_text": "Our Success Stories",
|
||||
"url": "https://google.com"
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= blockFilename %>",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "component-dev"
|
||||
},
|
||||
"devDependencies": {
|
||||
"create-block-dev-tool": "git+https://roman-axe-web@bitbucket.org/axeweb/create-block-dev-tool.git#master"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,7 @@
|
||||
(function ($) {
|
||||
|
||||
console.log('Ready!');
|
||||
console.log('jQuery =', $);
|
||||
console.log('Swiper =', window.Swiper);
|
||||
|
||||
})(window.jQuery);
|
||||
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* 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).
|
||||
*
|
||||
*/
|
||||
|
||||
.<%= blockClassName %> {
|
||||
|
||||
&__header {
|
||||
// Header Mobile.
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
// Header Desktop.
|
||||
}
|
||||
|
||||
&-heading {
|
||||
// Child Element.
|
||||
}
|
||||
}
|
||||
|
||||
&__visual {
|
||||
&-image {
|
||||
// Example of BEM usage.
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<section class="<%= blockClassName %>">
|
||||
|
||||
{{!
|
||||
Remove Everything Below:
|
||||
}}
|
||||
|
||||
<style>
|
||||
code {
|
||||
background-color: #eee;
|
||||
color: #333;
|
||||
padding: 1rem 1.5rem;
|
||||
border: 2px solid #d8d8d8;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header class="<%= blockClassName %>__header">
|
||||
<h1 class="<%= blockClassName %>__header-heading">Ready!</h1>
|
||||
</header>
|
||||
|
||||
<div class="<%= blockClassName %>__content">
|
||||
<p>
|
||||
Review the `/data` folder with JSON data files.<br>
|
||||
Don't change data JSON files - use the data as it is.
|
||||
</p>
|
||||
<p>Build the layout based on provided data structure.</p>
|
||||
|
||||
<br><br>
|
||||
<hr>
|
||||
|
||||
<h2>Image Example</h2>
|
||||
<div>
|
||||
<img src="images/demo.jpeg" alt="">
|
||||
<br>
|
||||
<code>
|
||||
<img src="images/demo.jpeg" alt="">
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<hr>
|
||||
|
||||
<h2>Available Buttons Styling</h2>
|
||||
|
||||
<div>
|
||||
<a href="#" class="btn btn--primary">Primary</a>
|
||||
<br>
|
||||
<code>
|
||||
<a href="#" class="btn btn--primary">Primary</a>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<a href="#" class="btn btn--secondary">Secondary</a>
|
||||
<br>
|
||||
<code>
|
||||
<a href="#" class="btn btn--secondary">Secondary</a>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{!
|
||||
Remove END
|
||||
}}
|
||||
|
||||
</section>
|
||||
Reference in New Issue
Block a user