Add basic dev setup

.gitignore

@@ -3,4 +3,5 @@ npm-debug.log
 .DS_Store
 .idea
 .vscode
-package-lock.json
+package-lock.json
+yarn-error.log

assets/css/demo.css

@@ -1,78 +0,0 @@
-/*
-::: Ignore!
-::: Some quick styles for the demo page
-*/
-
-* {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 1.4em;
-    line-height: 1.4em;
-    color: #7d7d7d;
-}
-
-p {
-    margin-bottom: 0.5em;
-}
-
-h1 {
-    font-size: 1.5em;
-    margin-bottom: 0.75em;
-}
-
-a.btn {
-    padding: 10px;
-    text-decoration: none;
-    border-radius: 5px;
-    font-size: 16px;
-}
-
-.btn-dark {
-    background: #000000;
-    color: white;
-}
-
-.btn-light {
-    background: whitesmoke;
-    color: #2d2d2d;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    color: #2d2d2d;
-}
-
-pre {
-    margin: 1.25em 0;
-    background: whitesmoke;
-    padding: 10px 0;
-    line-height: 1.75em;
-}
-
-.page-wrap {
-    display: block;
-    padding: 50px;
-    max-width: 700px;
-    margin: auto;
-}
-
-section.header {
-    margin-top: 150px;
-    text-align: center;
-    margin-bottom: 125px;
-}
-
-section.header .btn {
-    margin-left: 3px;
-}
-
-section.header h1 {
-    font-size: 3em;
-}
-
-section.header p {
-    margin-bottom: 1em;
-}

assets/styles/scss/base.scss

@@ -0,0 +1,157 @@
+$global-guttering: 24px;
+$global-font-size-h1: 32px;
+$global-font-size-h2: 24px;
+$global-font-size-h3: 20px;
+$global-font-size-h4: 18px;
+$global-font-size-h5: 16px;
+$global-font-size-h6: 14px;
+
+/*=============================================
+=            Generic styling                  =
+=============================================*/
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+}
+
+*, *:before, *:after {
+  box-sizing: border-box
+}
+
+html, body {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 16px;
+  line-height: 1.4;
+  color: #FFFFFF;
+  background-color: #333;
+  overflow-x: hidden;
+}
+
+label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+p {
+  margin-top: 0;
+}
+
+hr {
+  display: block;
+  margin: $global-guttering*1.25 0;
+  border: 0;
+  border-bottom: 1px solid #eaeaea;
+  height: 1px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: $global-guttering/2;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+a, a:visited, a:focus {
+  color: #FFFFFF;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  background-color: #f9f9f9;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 2.5px;
+  font-size: 14px;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: $global-guttering;
+}
+
+h1, .h1 {
+  font-size: $global-font-size-h1;
+}
+
+h2, .h2 {
+  font-size: $global-font-size-h2;
+}
+
+h3, .h3 {
+  font-size: $global-font-size-h3;
+}
+
+h4, .h4 {
+  font-size: $global-font-size-h4;
+}
+
+h5, .h5 {
+  font-size: $global-font-size-h5;
+}
+
+h6, .h6 {
+  font-size: $global-font-size-h6;
+}
+
+.container {
+  display: block;
+  margin: auto;
+  max-width: 40em;
+  padding: $global-guttering*2;
+  @media (max-width: 620px) {
+    padding: 0;
+  }
+}
+
+.section {
+  background-color: #FFFFFF;
+  padding: $global-guttering;
+  color: #333;
+  a, a:visited, a:focus {
+    color: #00bcd4;
+  }
+}
+
+.logo {
+  display: block;
+  margin-bottom: $global-guttering/2;
+}
+
+.logo__img {
+  width: 100%;
+  height: auto;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: top;
+  padding: $global-guttering/4 0;
+}
+
+.visible-ie {
+  display: none;
+}
+
+.zero-bottom {
+  margin-bottom: 0;
+}
+
+.zero-top {
+  margin-top: 0;
+}
+
+.text-center {
+  text-align: center;
+}
+
+/*=====  End of Section comment block  ======*/

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Sholo</title>
-    <link rel="stylesheet" href="assets/css/demo.css">
+    <link rel="stylesheet" href="./assets/styles/css/sholo.min.css">
 </head>
 <body>
 <div class="page-wrap">
@@ -26,5 +26,7 @@
 </pre>
     </section>
 </div>
+
+<script src="./assets/scripts/dist/sholo.min.js"></script>
 </body>
 </html>

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "sholo",
+  "version": "1.0.0",
+  "description": "A light-weight, vanilla JS library to bring certain parts of page in spotlight",
+  "main": "./assets/scripts/dist/sholo.min.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "repository": "https://github.com/kamranahmedse/sholo",
+  "author": "Kamran Ahmed <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "opn": "^5.2.0",
+    "webpack": "^4.0.1",
+    "webpack-dev-server": "^3.1.0"
+  }
+}

server.js

@@ -0,0 +1,19 @@
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const config = require('./webpack.dev.config');
+const opn = require('opn');
+
+const PORT = 3000;
+const HOST = 'localhost';
+const URL = `http://${HOST}:${PORT}`;
+
+new WebpackDevServer(webpack(config), {
+    publicPath: config.output.publicPath
+}).listen(PORT, HOST, function (error, result) {
+    if (error) {
+        console.error(error);
+    }
+
+    opn(URL);
+    console.log(`Listening at ${URL}`);
+});

webpack.dev.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: [
+        "./assets/scripts/src/sholo.js"
+    ],
+    output: {
+        publicPath: '/assets/scripts/dist/',
+        path: path.join(__dirname, 'dist'),
+        filename: 'sholo.min.js',
+        libraryTarget: "umd",
+        library: "Sholo"
+    }
+};