yannbertrand/index.css

## index.css
html,
body {
	padding: 0;
	margin: 0;
}

body {
	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
	-webkit-app-region: drag;
}

header {
	position: absolute;
	width: 500px;
	height: 250px;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -250px;
	text-align: center;
}

header h1 {
	font-size: 60px;
	font-weight: 100;
	margin: 0;
	padding: 0;
}

## index.html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Electron boilerplate</title>
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div class="container">
			<header>
				<h1>Electron boilerplate</h1>
			</header>
			<section class="main"></section>
			<footer></footer>
		</div>
	</body>
</html>

## index.js
'use strict';
const electron = require('electron');

const app = electron.app;

// adds debug features like hotkeys for triggering dev tools and reload
require('electron-debug')();

// prevent window being garbage collected
let mainWindow;

function onClosed() {
	// dereference the window
	// for multiple windows store them in an array
	mainWindow = null;
}

function createMainWindow() {
	const win = new electron.BrowserWindow({
		width: 600,
		height: 400,
		frame: false,
		titleBarStyle: 'hidden-inset',
	});

	win.loadURL(`file://${__dirname}/index.html`);
	win.on('closed', onClosed);

	return win;
}

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit();
	}
});

app.on('activate', () => {
	if (!mainWindow) {
		mainWindow = createMainWindow();
	}
});

app.on('ready', () => {
	mainWindow = createMainWindow();
});

## package.json
{
  "name": "test-drag",
  "productName": "TestDrag",
  "version": "0.0.0",
  "description": "My luminous app",
  "license": "MIT",
  "repository": "YannBertrand/test-drag",
  "author": {
    "name": "Yann Bertrand",
    "email": "yann@bertrand.com",
    "url": "yann-bertrand.fr"
  },
  "scripts": {
    "test": "xo",
    "start": "electron .",
    "build": "electron-packager . --out=dist --asar --overwrite --all"
  },
  "files": [
    "index.js",
    "index.html",
    "index.css"
  ],
  "keywords": [
    "electron-app",
    "electron"
  ],
  "dependencies": {
    "electron-debug": "^1.0.0"
  },
  "devDependencies": {
    "devtron": "^1.1.0",
    "electron-packager": "^8.0.0",
    "electron": "^1.3.3",
    "xo": "^0.16.0"
  },
  "xo": {
    "esnext": true,
    "envs": [
      "node",
      "browser"
    ]
  }
}
	html,
	body {
	padding: 0;
	margin: 0;
	}

	body {
	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
	-webkit-app-region: drag;
	}

	header {
	position: absolute;
	width: 500px;
	height: 250px;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -250px;
	text-align: center;
	}

	header h1 {
	font-size: 60px;
	font-weight: 100;
	margin: 0;
	padding: 0;
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Electron boilerplate</title>
	<link rel="stylesheet" href="index.css">
	</head>
	<body>
	<div class="container">
	<header>
	<h1>Electron boilerplate</h1>
	</header>
	<section class="main"></section>
	<footer></footer>
	</div>
	</body>
	</html>
	'use strict';
	const electron = require('electron');

	const app = electron.app;

	// adds debug features like hotkeys for triggering dev tools and reload
	require('electron-debug')();

	// prevent window being garbage collected
	let mainWindow;

	function onClosed() {
	// dereference the window
	// for multiple windows store them in an array
	mainWindow = null;
	}

	function createMainWindow() {
	const win = new electron.BrowserWindow({
	width: 600,
	height: 400,
	frame: false,
	titleBarStyle: 'hidden-inset',
	});

	win.loadURL(`file://${__dirname}/index.html`);
	win.on('closed', onClosed);

	return win;
	}

	app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
	app.quit();
	}
	});

	app.on('activate', () => {
	if (!mainWindow) {
	mainWindow = createMainWindow();
	}
	});

	app.on('ready', () => {
	mainWindow = createMainWindow();
	});
	{
	"name": "test-drag",
	"productName": "TestDrag",
	"version": "0.0.0",
	"description": "My luminous app",
	"license": "MIT",
	"repository": "YannBertrand/test-drag",
	"author": {
	"name": "Yann Bertrand",
	"email": "yann@bertrand.com",
	"url": "yann-bertrand.fr"
	},
	"scripts": {
	"test": "xo",
	"start": "electron .",
	"build": "electron-packager . --out=dist --asar --overwrite --all"
	},
	"files": [
	"index.js",
	"index.html",
	"index.css"
	],
	"keywords": [
	"electron-app",
	"electron"
	],
	"dependencies": {
	"electron-debug": "^1.0.0"
	},
	"devDependencies": {
	"devtron": "^1.1.0",
	"electron-packager": "^8.0.0",
	"electron": "^1.3.3",
	"xo": "^0.16.0"
	},
	"xo": {
	"esnext": true,
	"envs": [
	"node",
	"browser"
	]
	}
	}