commit
392868b0ca
15 changed files with 1402 additions and 0 deletions
@ -0,0 +1,14 @@ |
|||||
|
# Basic |
||||
|
.idea |
||||
|
.DS_Store |
||||
|
node_modules |
||||
|
vendor |
||||
|
|
||||
|
# Deploy scripts |
||||
|
deploy.sh |
||||
|
deploy-*.sh |
||||
|
|
||||
|
# Custom |
||||
|
assets/css/**/*.min.css* |
||||
|
assets/css-old/**/*.min.css* |
||||
|
components/**/*.min.css* |
||||
@ -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", |
||||
|
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>", |
||||
|
"cta_text": "Our Success Stories", |
||||
|
"url": "https://google.com" |
||||
|
} |
||||
@ -0,0 +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" |
||||
|
} |
||||
@ -0,0 +1,17 @@ |
|||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<!-- <meta> tags> --> |
||||
|
<link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css"> |
||||
|
<link rel="stylesheet" href="styles/template.css"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div class="container"> |
||||
|
{{> src/template }} |
||||
|
</div> |
||||
|
|
||||
|
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> |
||||
|
<script src="scripts/template.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<!-- <meta> tags> --> |
||||
|
<link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
{{> src/template }} |
||||
|
|
||||
|
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,16 @@ |
|||||
|
{ |
||||
|
"name": "axe-web-component", |
||||
|
"version": "1.0.0", |
||||
|
"scripts": {}, |
||||
|
"license": "ISC", |
||||
|
"main": "server.js", |
||||
|
"type": "module", |
||||
|
"dependencies": { |
||||
|
"express": "^4.17.3", |
||||
|
"express-handlebars": "^6.0.4", |
||||
|
"fs-extra": "^10.0.1" |
||||
|
}, |
||||
|
"bin": { |
||||
|
"component-dev": "./server.js" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,39 @@ |
|||||
|
#!/usr/bin/env node
|
||||
|
|
||||
|
import express from 'express'; |
||||
|
import {create} from 'express-handlebars'; |
||||
|
import fs from 'fs-extra'; |
||||
|
|
||||
|
const app = express(); |
||||
|
|
||||
|
const hbs = create({ |
||||
|
extname: '.hbs', defaultLayout: false, |
||||
|
partialsDir: ['.'], |
||||
|
}) |
||||
|
|
||||
|
app.engine('.hbs', hbs.engine); |
||||
|
app.set('view engine', '.hbs'); |
||||
|
app.set('views', './layouts'); |
||||
|
|
||||
|
app.get('/', async (req, res) => { |
||||
|
const jsonFileName = (req.query.data) ? req.query.data : 'default'; |
||||
|
const data = await fs.readJson(`./data/${jsonFileName}.json`); |
||||
|
|
||||
|
res.render('page-container', data); |
||||
|
}); |
||||
|
|
||||
|
app.use(express.static('src')); |
||||
|
|
||||
|
const PORT = 3002; |
||||
|
app.listen(PORT, () => { |
||||
|
console.log(`The web server has started on port ${PORT}`); |
||||
|
}); |
||||
|
|
||||
|
// TODO:
|
||||
|
// Add Gulp for CSS/JS Styling
|
||||
|
// Add Browsersync that will refresh the page on changes
|
||||
|
// Top Panel with options to switch data (select input)
|
||||
|
// Options to resize the page and test Responsiveness (select input)
|
||||
|
|
||||
|
|
||||
|
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
@ -0,0 +1,5 @@ |
|||||
|
(function ($) { |
||||
|
|
||||
|
console.log('Ready!', $); |
||||
|
|
||||
|
})(window.jQuery); |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
* |
||||
|
*/ |
||||
|
.clients { |
||||
|
background-color: red; |
||||
|
} |
||||
|
|
||||
|
/*# sourceMappingURL=template.css.map */ |
||||
@ -0,0 +1 @@ |
|||||
|
{"version":3,"sourceRoot":"","sources":["template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE","file":"template.css"} |
||||
@ -0,0 +1,42 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
.clients { |
||||
|
background-color: red; |
||||
|
|
||||
|
&__sub_level { |
||||
|
// 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 |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&__sub_level_two { |
||||
|
// |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
<section class="template clients"> |
||||
|
<div class="clients__intro"><h2 class="clients__title title">{{title}}</h2></div> |
||||
|
|
||||
|
<div class="clients__content"> |
||||
|
<div class="clients__content-text"><p>{{phrase}}</p></div> |
||||
|
</div> |
||||
|
|
||||
|
<footer class="clients__actions actions"> |
||||
|
<a href="{{ url }}" target="_self" class="btn btn--secondary">{{ cta_text }}</a> |
||||
|
</footer> |
||||
|
</section> |
||||
|
|
||||
|
<img src="images/demo.jpeg" alt=""> |
||||
Loading…
Reference in new issue