Skip to content

Instantly share code, notes, and snippets.

@JBreit
Created July 10, 2017 23:43
Show Gist options
  • Save JBreit/80782988f3c33cdfc743c508b708e038 to your computer and use it in GitHub Desktop.
Save JBreit/80782988f3c33cdfc743c508b708e038 to your computer and use it in GitHub Desktop.
@import url("common.css");
.app {
height: 100%;
}
@media only screen {
}
@media only screen and (min-width: 40.063em) {
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
}
@media only screen and (min-width: 64.063em) {
}
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
}
@media only screen and (min-width: 90.063em) {
}
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
}
@media only screen and (min-width: 120.063em) {
}
const Model = require('./models/model');
const View = require('./views/view');
const Controller = require('./controllers/controller');
require('./app.css');
const App = class {
constructor(options) {
this.model = new Model();
this.view = new View();
this.controller = new Controller(this.model, this.view);
}
init() {
this.controller.init();
}
};
module.exports = App;
@import url(http://fonts.googleapis.com/css?family=Roboto);
* {
box-sizing: border-box;
}
:root {
font-size: 16px;
};
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
font: 62.5% 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {}
a,
a:active,
a:hover,
a:focus {
text-decoration: none;
}
[type=reset], [type=submit], button, html [type=button] {
appearance: button;
}
@media only screen {
}
@media only screen and (min-width: 40.063em) {
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
}
@media only screen and (min-width: 64.063em) {
}
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
}
@media only screen and (min-width: 90.063em) {
}
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
}
@media only screen and (min-width: 120.063em) {
}
const Controller = class {
constructor(model, view) {
this.model = model;
this.view = view;
}
init() {
this.model.set('title', 'Test');
this.model.set('content', 'Lorem ipsum doler');
this.view.render(this.model);
}
};
module.exports = Controller;
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Jason Breitigan">
<!-- <link rel="icon" href="img/favicon.ico"> -->
<title class="title">ECMAScript 2015 Webpack 2.0 Starter Kit</title>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="app" class="app">
<header></header>
<nav></nav>
<main id="view" class="view">
<h1 class="title">ECMAScript 2015 Webpack 2.0 Starter Kit</h1>
<div id="content" class="content"></div>
</main>
<footer>ECMAScript 2015 Seed</footer>
</div>
</body>
</html>
const App = require('./app/app');
const app = new App({
name: 'app',
});
app.init();
const Model = class {
constructor() {
console.log(this);
this.name = 'App';
}
get(property) {
return this[property];
}
set(property, value) {
return this[property] = value;
}
};
module.exports = Model;
require('./view.css');
const View = class {
constructor() {
this.el = document.getElementById('view');
this.title = this.el.querySelector('.title');
this.content = this.el.querySelector('.content');
}
render(data) {
this.title.textContent = data.title;
this.content.innerHTML = data.content;
}
};
module.exports = View;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment