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