Local dev server, homepage loads

.gitignore

@@ -14,6 +14,9 @@ Session.vim
 *~
 # auto-generated tag files
 tags
+public/assets/css/masonstrap.css
+public/assets/css/masonstrap.min.css
+public/assets/css/*.map
 masonstrap/*.css
 masonstrap/*.min.css
 masonstrap/*.map
@@ -24,4 +27,9 @@ build
 _site
 .sass-cache/
 bower_components
-.vscode
\ No newline at end of file
+.vscode
+public/assets/js/bootstrap.min.js
+public/assets/js/jquery.min.js
+public/assets/js/jquery.min.map
+public/assets/js/popper.min.js
+public/assets/js/popper.min.js.map
\ No newline at end of file

.gitlab-ci.yml

@@ -7,4 +7,4 @@ build:
     - npm run build-masonstrap
   artifacts:
     paths:
-      - masonstrap/masonstrap.min.css
+      - public/assets/css/masonstrap.min.css

package.json

@@ -9,9 +9,11 @@
     "autoprefixer": "^7.1.2",
     "bootstrap": "4.0.0-beta",
     "clean-css-cli": "^4.1.6",
+    "http-server": "^0.10.0",
     "jquery": "^3.2.1",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
+    "onchange": "^3.2.1",
     "popper.js": "^1.11.1",
     "postcss-cli": "^4.1.0",
     "stylelint": "^8.0.0",
@@ -19,9 +21,13 @@
   },
   "scripts": {
     "sass-lint": "stylelint ./masonstrap/*.scss --syntax scss",
-    "sass-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 ./masonstrap/masonstrap.scss ./masonstrap/masonstrap.css",
-    "sass-prefix": "npx postcss masonstrap/masonstrap.css --use autoprefixer -d ./masonstrap/",
-    "sass-minify": "cleancss --source-map --source-map-inline-sources -o masonstrap/masonstrap.min.css masonstrap/masonstrap.css",
-    "build-masonstrap": "npm-run-all sass-lint sass-compile sass-prefix sass-minify"
+    "sass-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 ./masonstrap/masonstrap.scss ./public/assets/css/masonstrap.css",
+    "sass-prefix": "npx postcss ./public/assets/css/masonstrap.css --use autoprefixer -d ./public/assets/css/",
+    "sass-minify": "cleancss --source-map --source-map-inline-sources -o ./public/assets/css/masonstrap.min.css ./public/assets/css/masonstrap.css",
+    "copy-js": "cp ./node_modules/jquery/dist/jquery.min.js ./public/assets/js/jquery.min.js && cp ./node_modules/jquery/dist/jquery.min.map ./public/assets/js/jquery.min.map && cp ./node_modules/bootstrap/dist/js/bootstrap.min.js ./public/assets/js/bootstrap.min.js && cp ./node_modules/popper.js/dist/umd/popper.min.js ./public/assets/js/popper.min.js && cp ./node_modules/popper.js/dist/umd/popper.min.js.map ./public/assets/js/popper.min.js.map",
+    "build-masonstrap": "npm-run-all copy-js sass-lint sass-compile sass-prefix sass-minify",
+    "sass-watch": "onchange './masonstrap/*.scss' -- npm run build-masonstrap",
+    "http": "http-server -p 8000",
+    "start": "npm-run-all copy-js sass-watch"
   }
 }

public/assets/css/demo.css

-body {
-    padding-top: 100px
-}
-
-body>.navbar {
-    -webkit-transition: background-color .3s ease-in;
-    transition: background-color .3s ease-in
-}
-
-pre {
-    background: #f7f7f9
-}
-
-@media (min-width: 768px) {
-    body>.navbar-transparent {
-        background-color:transparent!important
-    }
-
-    body>.navbar-transparent .navbar-nav>.open>a {
-        background-color: transparent!important
-    }
-}
-
-#home {
-    padding-top: 0
-}
-
-#home .logo .nav-link {
-    display: inline-block;
-    margin-right: -30px
-}
-
-#home .logo img {
-    display: inline-block;
-    margin: 0 10px;
-    width: 20%
-}
-
-#banner {
-    min-height: 300px;
-    border-bottom: none
-}
-
-.table-of-contents {
-    margin-top: 1em
-}
-
-.bs-docs-section {
-    margin-top: 6em
-}
-
-.bs-docs-section .page-header h1 {
-    padding: 5rem 0 2rem;
-    font-size: 4em
-}
-
-.bs-component {
-    position: relative
-}
-
-.bs-component+.bs-component {
-    margin-top: 1rem
-}
-
-.bs-component .card {
-    margin-bottom: 1rem
-}
-
-.bs-component .modal {
-    position: relative;
-    top: auto;
-    right: auto;
-    left: auto;
-    bottom: auto;
-    z-index: 1;
-    display: block
-}
-
-.bs-component .modal-dialog {
-    width: 90%
-}
-
-.bs-component .popover {
-    position: relative;
-    display: inline-block;
-    width: 220px;
-    margin: 20px
-}
-
-#source-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 100;
-    font-weight: 700
-}
-
-.nav-tabs {
-    margin-bottom: 15px
-}
-
-.progress {
-    margin-bottom: 10px
-}
-
-#footer {
-    margin: 3em 0
-}
-
-#footer li {
-    float: left;
-    margin-right: 1.5em;
-    margin-bottom: 1.5em
-}
-
-#footer p {
-    clear: left;
-    margin-bottom: 0
-}
-
-
-.section-tout {
-    padding: 5em 0 2em;
-    border-bottom: 1px solid rgba(0,0,0,.05);
-    background-color: #eaf1f1
-}
-
-.section-tout .fa {
-    margin-right: .5em
-}
-
-.section-tout p {
-    margin-bottom: 3em
-}
-
-.section-preview {
-    padding: 4em 0 4em
-}
-
-.section-preview .preview {
-    margin-bottom: 4em;
-    background-color: #eaf1f1
-}
-
-.section-preview .preview img {
-    max-width: 100%
-}
-
-.section-preview .preview .image {
-    position: relative
-}
-
-.section-preview .preview .image:before {
-    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    content: "";
-    pointer-events: none
-}
-
-.section-preview .preview .options {
-    padding: 1em 2em 2em;
-    border: 1px solid rgba(0,0,0,.05);
-    border-top: none;
-    text-align: center
-}
-
-.section-preview .preview .options p {
-    margin-bottom: 2em
-}
-
-.section-preview .dropdown-menu {
-    text-align: left
-}
-
-.section-preview .lead {
-    margin-bottom: 2em
-}
-
-@media (max-width: 767px) {
-    .section-preview .image img {
-        width:100%
-    }
-}
-
-@media (max-width: 767px) {
-    .splash {
-        padding-top:4em
-    }
-
-    .splash .logo {
-        width: 100px
-    }
-
-    .splash h1 {
-        font-size: 2em
-    }
-
-    #banner {
-        margin-bottom: 2em;
-        text-align: center
-    }
-}
-/*
- * Style tweaks
- * --------------------------------------------------
- */
-html,
-body {
-  overflow-x: hidden; /* Prevent scroll on narrow devices */
-}
-body {
-  padding-top: 70px;
-}
-
-/*
- * Off Canvas
- * --------------------------------------------------
- */
-@media screen and (max-width: 767px) {
-  .row-offcanvas {
-    position: relative;
-    -webkit-transition: all .25s ease-out;
-         -o-transition: all .25s ease-out;
-            transition: all .25s ease-out;
-  }
-
-  .row-offcanvas-right {
-    right: 0;
-  }
-
-  .row-offcanvas-left {
-    left: 0;
-  }
-
-  .row-offcanvas-right
-  .sidebar-offcanvas {
-    right: -100%; /* 12 columns */
-  }
-
-  .row-offcanvas-right.active
-  .sidebar-offcanvas {
-    right: -50%; /* 6 columns */
-  }
-
-  .row-offcanvas-left
-  .sidebar-offcanvas {
-    left: -100%; /* 12 columns */
-  }
-
-  .row-offcanvas-left.active
-  .sidebar-offcanvas {
-    left: -50%; /* 6 columns */
-  }
-
-  .row-offcanvas-right.active {
-    right: 50%; /* 6 columns */
-  }
-
-  .row-offcanvas-left.active {
-    left: 50%; /* 6 columns */
-  }
-
-  .sidebar-offcanvas {
-    position: absolute;
-    top: 0;
-    width: 50%; /* 6 columns */
-  }
-}
\ No newline at end of file

public/assets/css/index.css

-html { 
-  background: url(../img/expl.jpg) no-repeat center fixed; 
-  background-repeat:no-repeat;
-  -webkit-background-size:cover;
-  -moz-background-size:cover;
-  -o-background-size:cover;
-  background-size:cover;
-  background-position:center;
-}
-
-body {
-  background: transparent !important;
-}
-

public/assets/css/styles.css

-html {
-  font-size: 14px;
-}
-
-body {
-  padding-top: 100px;
-}
-
-@include media-breakpoint-up(sm) {
-  html {
-    font-size: 16px;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  html {
-    font-size: 20px;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  html {
-    font-size: 28px;
-  }
-}
\ No newline at end of file

public/assets/js/custom.js

-(function(){
-  $(window).scroll(function () {
-      var top = $(document).scrollTop();
-      $('.splash').css({
-        'background-position': '0px -'+(top/3).toFixed(2)+'px'
-      });
-      if(top > 50)
-        $('#home > .navbar').removeClass('navbar-transparent');
-      else
-        $('#home > .navbar').addClass('navbar-transparent');
-  });
-
-  $("a[href='#']").click(function(e) {
-    e.preventDefault();
-  });
-
-  var $button = $("<div id='source-button' class='btn btn-primary btn-xs'>&lt; &gt;</div>").click(function(){
-    var html = $(this).parent().html();
-    html = cleanSource(html);
-    $("#source-modal pre").text(html);
-    $("#source-modal").modal();
-  });
-
-  $('.bs-component [data-toggle="popover"]').popover();
-  $('.bs-component [data-toggle="tooltip"]').tooltip();
-
-  $(".bs-component").hover(function(){
-    $(this).append($button);
-    $button.show();
-  }, function(){
-    $button.hide();
-  });
-
-  function cleanSource(html) {
-    html = html.replace(/×/g, "&times;")
-               .replace(/«/g, "&laquo;")
-               .replace(/»/g, "&raquo;")
-               .replace(/←/g, "&larr;")
-               .replace(/→/g, "&rarr;");
-
-    var lines = html.split(/\n/);
-
-    lines.shift();
-    lines.splice(-1, 1);
-
-    var indentSize = lines[0].length - lines[0].trim().length,
-        re = new RegExp(" {" + indentSize + "}");
-
-    lines = lines.map(function(line){
-      if (line.match(re)) {
-        line = line.substring(indentSize);
-      }
-
-      return line;
-    });
-
-    lines = lines.join("\n");
-
-    return lines;
-  }
-
-})();

public/assets/js/version.js

-let version = $.fn.tooltip.Constructor.VERSION;
-document.getElementById('version').innerHTML = version;

public/index.html

@@ -33,10 +33,7 @@
 
     <!-- Load in static content -->
     <link rel="icon" href="assets/img/favicon.ico" sizes="16x16">
-    <link rel="stylesheet" href="masonstrap/masonstrap.css" media="screen">
-    <link rel="stylesheet" href="assets/css/styles.css">
-    <link rel="stylesheet" href="assets/css/index.css">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/masonstrap.min.css" media="screen">
   </head>
 
   <!-- Body content -->
@@ -131,9 +128,9 @@
     </div>
 
     <!-- load in external js -->
-    <script src="bower_components/jquery/dist/jquery.slim.min.js"></script>
-    <script src="bower_components/tether/dist/js/tether.min.js"></script>
-    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="/assets/js/jquery.min.js"></script>
+    <script src="/assets/js/popper.min.js"></script>
+    <script src="/assets/js/bootstrap.min.js"></script>
   </body>
 
 </html>
\ No newline at end of file