18 changed files with 258 additions and 209 deletions
@ -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 |
|||
|
|||
@ -1,4 +1,4 @@ |
|||
module.exports = { |
|||
cssUrl: "https://", |
|||
blockName: "template", |
|||
cssUrl: "https://", |
|||
blockName: "template", |
|||
} |
|||
|
|||
@ -1,5 +1,5 @@ |
|||
module.exports = { |
|||
mode: "development", |
|||
cssUrl: "https://", |
|||
blockName: "template", |
|||
mode: "development", |
|||
cssUrl: "https://", |
|||
blockName: "template", |
|||
} |
|||
|
|||
@ -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>", |
|||
"cta_text": "Our Success Stories", |
|||
"url": "https://google.com" |
|||
} |
|||
"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>", |
|||
"cta_text": "Our Success Stories", |
|||
"url": "https://google.com" |
|||
} |
|||
|
|||
@ -1,6 +1,6 @@ |
|||
{ |
|||
"title": "Option Two", |
|||
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>", |
|||
"cta_text": "Our Success Stories", |
|||
"url": "https://google.com" |
|||
} |
|||
"title": "Option Two", |
|||
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>", |
|||
"cta_text": "Our Success Stories", |
|||
"url": "https://google.com" |
|||
} |
|||
|
|||
@ -1,9 +1,9 @@ |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
|
|||
<link rel="stylesheet" href="{{ config.cssUrl }}"> |
|||
<link rel="stylesheet" href="styles/page--main.css"> |
|||
<link rel="stylesheet" href="styles/{{ config.blockName }}.min.css"> |
|||
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/> |
|||
<link rel="stylesheet" href="{{ config.cssUrl }}"> |
|||
<link rel="stylesheet" href="styles/page--main.css"> |
|||
<link rel="stylesheet" href="styles/{{ config.blockName }}.min.css"> |
|||
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/> |
|||
</head> |
|||
|
|||
@ -1,11 +1,11 @@ |
|||
<header class="page_toolbar"> |
|||
<div> |
|||
<label for="data-options">Data Options: </label> |
|||
<div> |
|||
<label for="data-options">Data Options: </label> |
|||
|
|||
<select name="data" id="data-options"> |
|||
{{#each config.dataFiles }} |
|||
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option> |
|||
{{/each}} |
|||
</select> |
|||
</div> |
|||
<select name="data" id="data-options"> |
|||
{{#each config.dataFiles }} |
|||
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option> |
|||
{{/each}} |
|||
</select> |
|||
</div> |
|||
</header> |
|||
|
|||
@ -1,13 +1,13 @@ |
|||
(function () { |
|||
|
|||
const dataOptionsSelect = document.getElementById('data-options'); |
|||
if (!dataOptionsSelect) { |
|||
return; |
|||
} |
|||
const dataOptionsSelect = document.getElementById('data-options'); |
|||
if (!dataOptionsSelect) { |
|||
return; |
|||
} |
|||
|
|||
dataOptionsSelect.addEventListener('change', function () { |
|||
console.log(this.value) |
|||
window.location = '?data=' + this.value; |
|||
}) |
|||
dataOptionsSelect.addEventListener('change', function () { |
|||
console.log(this.value) |
|||
window.location = '?data=' + this.value; |
|||
}) |
|||
|
|||
})(); |
|||
|
|||
@ -1,20 +1,20 @@ |
|||
body { |
|||
margin: 0; |
|||
font-size: 1rem; |
|||
margin: 0; |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
header.page_toolbar { |
|||
font-family: Arial, sans-serif; |
|||
background-color: #ccc; |
|||
padding: 1rem; |
|||
font-family: Arial, sans-serif; |
|||
background-color: #ccc; |
|||
padding: 1rem; |
|||
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-bottom: 2rem; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-bottom: 2rem; |
|||
} |
|||
|
|||
header.page_toolbar select { |
|||
font-size: 0.85rem; |
|||
padding: 0.25rem; |
|||
font-size: 0.85rem; |
|||
padding: 0.25rem; |
|||
} |
|||
|
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"name": "template-block", |
|||
"version": "1.0.0", |
|||
"scripts": { |
|||
"start": "component-dev" |
|||
}, |
|||
"devDependencies": { |
|||
"axe-web-component": "git+https://git.devdevdev.life/roman/axe-web-component.git#master" |
|||
} |
|||
} |
|||
@ -1 +1 @@ |
|||
{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJnC,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);"]} |
|||
{"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,7 +1,7 @@ |
|||
(function ($) { |
|||
|
|||
console.log('Ready!'); |
|||
console.log('jQuery =', $); |
|||
console.log('Swiper =', window.Swiper); |
|||
console.log('Ready!'); |
|||
console.log('jQuery =', $); |
|||
console.log('Swiper =', window.Swiper); |
|||
|
|||
})(window.jQuery); |
|||
})(window.jQuery); |
|||
|
|||
@ -1,70 +1,70 @@ |
|||
<section class="template"> |
|||
|
|||
{{! |
|||
Remove Everything Below: |
|||
}} |
|||
{{! |
|||
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> |
|||
<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="template__header"> |
|||
<h1 class="template__header-heading">Ready!</h1> |
|||
</header> |
|||
<header class="template__header"> |
|||
<h1 class="template__header-heading">Ready!</h1> |
|||
</header> |
|||
|
|||
<div class="template__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> |
|||
<div class="template__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> |
|||
<br><br> |
|||
<hr> |
|||
|
|||
<h2>Image Example</h2> |
|||
<div> |
|||
<img src="images/demo.jpeg" alt=""> |
|||
<br> |
|||
<code> |
|||
<img src="images/demo.jpeg" alt=""> |
|||
</code> |
|||
</div> |
|||
<h2>Image Example</h2> |
|||
<div> |
|||
<img src="images/demo.jpeg" alt=""> |
|||
<br> |
|||
<code> |
|||
<img src="images/demo.jpeg" alt=""> |
|||
</code> |
|||
</div> |
|||
|
|||
<br><br> |
|||
<hr> |
|||
<br><br> |
|||
<hr> |
|||
|
|||
<h2>Available Buttons Styling</h2> |
|||
<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> |
|||
<div> |
|||
<a href="#" class="btn btn--primary">Primary</a> |
|||
<br> |
|||
<code> |
|||
<a href="#" class="btn btn--primary">Primary</a> |
|||
</code> |
|||
</div> |
|||
|
|||
<br> |
|||
<br> |
|||
|
|||
<div> |
|||
<a href="#" class="btn btn--secondary">Secondary</a> |
|||
<br> |
|||
<code> |
|||
<a href="#" class="btn btn--secondary">Secondary</a> |
|||
</code> |
|||
</div> |
|||
<div> |
|||
<a href="#" class="btn btn--secondary">Secondary</a> |
|||
<br> |
|||
<code> |
|||
<a href="#" class="btn btn--secondary">Secondary</a> |
|||
</code> |
|||
</div> |
|||
</div> |
|||
|
|||
{{! |
|||
Remove END |
|||
}} |
|||
{{! |
|||
Remove END |
|||
}} |
|||
|
|||
</section> |
|||
</section> |
|||
|
|||
Loading…
Reference in new issue