Initial commit
This commit is contained in:
+14
@@ -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>
|
||||
Generated
+1216
File diff suppressed because it is too large
Load Diff
@@ -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)
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
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="">
|
||||
Reference in New Issue
Block a user