Upgrade compiling assets and small improvements (Say hello to the Lar…

…avel Mix v4.0)

.gitignore

@@ -1,5 +1,4 @@
 .idea/
-.vscode/
 
 # Dependency directories
 node_modules/

LICENSE → LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Prismify
+Copyright (c) 2019 Prismify
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,21 +1,25 @@
-###### Introduction
+### Introduction
 
 Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
 
-###### Links to documentation to help you get started!
+### Quick start installation
+
+To install from the [Marketplace](https://octobercms.com/theme/prismify-bootstrap-starter-kit), click on the "Add to Project" button and then select the project you wish to add it to before updating the project to pull in the plugin.
+
+To install from the backend, go to Settings -> Front-end Themes -> Find more themes and then search for Prismify.Bootstrap.
+
+To install from [the repository](https://github.com/prismify/oc-bootstrap-theme), `git clone https://github.com/prismify/oc-bootstrap-theme.git themes/bootstrap` and then run `npm install` from your theme root in order to pull in the dependencies.
+
+
+### Links to documentation to help you get started!
+
 * https://getbootstrap.com/docs/4.1/getting-started/introduction
 * https://getbootstrap.com/docs/4.1/getting-started/webpack
 * https://octobercms.com/docs/themes/development
 * https://octobercms.com/docs/cms/themes
 * https://laravel.com/docs/5.6/mix
 * https://webpack.js.org
 
-###### Pull Requests
-Your contributions to the project are very welcome. If you would like to fix a bug or propose a new feature, you can submit a Pull Request.
-Thank you for your contributions!
-
-
-###### Like this theme?
-If you like this theme, give this theme a good review.
+### Open to your ideas!
 
-### Good luck!
+Let us know if you have any questions, ideas or suggestions! Just drop a line at [[email protected]](mailto:[email protected]).

assets/public/webfonts/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

assets/src/js/app.js

@@ -0,0 +1,22 @@
+/**
+ * Bootstrap - Starter Kit
+ *
+ * @author Prismify
+ * @version 1.0.3
+ */
+
+window.$ = window.jQuery = require('jquery');
+require('popper.js');
+require('bootstrap');
+
+// require('more-packages-installed-with-npm-install');
+
+$(function() {
+    "use strict";
+    // Helpers
+    require('./helpers/bootstrap');
+    // require('.helpers/more-helpers');
+
+    // Components
+    // require('./components/more-components');
+});

assets/src/js/components/_componentPrototype.js

@@ -0,0 +1,18 @@
+$(function() {
+    "use strict";
+
+    var componentName = function() {
+
+        function init() {
+            bindEventHandlers();
+        }
+
+        function bindEventHandlers() {
+            //...
+        }
+
+        init();
+    };
+
+    new componentName();
+});

assets/src/js/helpers/bootstrap.js

@@ -0,0 +1,18 @@
+$(function() {
+    "use strict";
+
+    var bootstrapHelpers = function() {
+
+        function init() {
+            bindEventHandlers();
+        }
+
+        function bindEventHandlers() {
+            $('[data-toggle="tooltip"]').tooltip();
+        }
+
+        init();
+    };
+
+    new bootstrapHelpers();
+});

sources/sass/app.scss → assets/src/scss/app.scss

@@ -1,30 +1,36 @@
+/**
+ * Bootstrap - Starter Kit
+ *
+ * @author Prismify
+ * @version 1.0.3
+ */
+
 // -------------------------------------------------------------------------------- //
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 // -------------------------------------------------------------------------------- //
 
-// Helpers: Variables, Functions, Mixins
+// Helpers
 // -------------------------------------------------------------------------------- //
 @import "helpers/+import.helpers";
 
-// Vendors: Bootstrap
+// Vendors
 // -------------------------------------------------------------------------------- //
 @import "vendors/+import.vendors";
 
-// Components:
+// Components
 // -------------------------------------------------------------------------------- //
 @import "components/+import.components";
 
-// Layouts:
+// Layouts
 // -------------------------------------------------------------------------------- //
 @import "layouts/+import.layouts";
 
-// -------------------------------------------------------------------------------- //
-// Pages: Home
+// Pages
 // -------------------------------------------------------------------------------- //
 @import "pages/+import.pages";
 
-// Utilities:
+// Utilities
 // -------------------------------------------------------------------------------- //
 @import "utilities/+import.utilities";

sources/sass/layouts/_+import.layouts.scss → assets/src/scss/layouts/_+import.layouts.scss

@@ -1,3 +1,5 @@
 // ======================================================================== //
 // Import
-// ======================================================================== //
+// ======================================================================== //
+
+@import "default";

assets/src/webfonts/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

config/f.yaml

@@ -0,0 +1,14 @@
+# Theme customization.
+########################################################################################################################
+
+fields:
+    app_name:
+        label: App Name
+        type: text
+        span: left
+        default: Bootstrap Starter Kit
+    app_href:
+        label: App Href
+        type: text
+        default: "https://example.org"
+        span: right

config/r.yaml

@@ -0,0 +1,5 @@
+# Theme dependencies.
+#
+# Example:
+# - Acme.User
+########################################################################################################################

config/t.yaml

@@ -0,0 +1,9 @@
+# Theme translate.
+#
+# Require: - RainLab:Translate
+# Example:
+#   en:
+#     site.name: 'Bootstrap'
+# Use:
+#   {{ 'site.name'|_ }}
+########################################################################################################################

layouts/default.htm

@@ -3,29 +3,41 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <!-- Required meta tags -->
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <meta name="description" content="{% if this.page.description %}{{ this.page.description }}{% else %}{{ this.theme.meta_description }}{% endif %}">
-        <meta name="keywords" content="{% if this.page.keywords %}{{ this.page.keywords }}{% else %}{{ this.theme.meta_keywords }}{% endif %}">
-        <meta name="title" content="{% if this.page.title %}{{ this.page.title }}{% else %}{{ this.theme.meta_title }}{% endif %}">
-        <meta name="author" content="{{ this.theme.website_author }}">
-        <link rel="icon" href="{{ 'assets/images/favicon.ico'|theme }}">
-        <link href="{{ 'assets/css/app.css'|theme }}" rel="stylesheet">
+        <meta name="description" content="{{ this.page.meta_description }}">
+        <meta name="title" content="{{ this.page.meta_title }}">
+
+        <!-- App styles -->
+        <link rel="icon" href="{{ 'assets/public/images/favicon.ico'|theme }}">
+        <link rel="stylesheet" href="{{ 'assets/public/css/app.css'|theme }}">
         {% styles %}
-        <title>{% if this.page.title %}{{ this.page.title }}{% else %}{{ this.theme.meta_title }}{% endif %} - {{ this.theme.website_name }}</title>
+
+        <title>{{ this.page.title }} - {{ this.theme.app_name }}</title>
     </head>
     <body class="layout-{{ this.layout.id }} page-{{ this.page.id }}">
-        <div id="site-header" class="site-header">
-            {% partial 'site/header' %}
-        </div>
-        <div id="site-content" class="site-content">
-            {% partial 'site/content' %}
-        </div>
-        <div id="site-footer" class="site-footer">
-            {% partial 'site/footer' %}
+
+        <div class="app-container">
+
+            <header id="app-header" class="app-header">
+                {% partial 'app/header' %}
+            </header>
+
+            <main id="app-content" class="app-content" role="main">
+                {% partial 'app/content' %}
+            </main>
+
+            <footer id="app-footer" class="app-footer">
+                {% partial 'app/footer' %}
+            </footer>
+
         </div>
 
-        <script src="{{ 'assets/js/app.js'|theme }}"></script>
+        <!-- App scripts -->
+        <script type="text/javascript" src="{{ 'assets/public/js/manifest.js'|theme }}"></script>
+        <script type="text/javascript" src="{{ 'assets/public/js/vendor.js'|theme }}"></script>
+        <script type="text/javascript" src="{{ 'assets/public/js/app.js'|theme }}"></script>
         {% framework extras %}
         {% scripts %}
     </body>

package.json

@@ -1,13 +1,15 @@
 {
   "name": "oc-bootstrap-theme",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Build responsive, mobile-first themes on the web with the world's most popular front-end component library.",
-  "main": "sources/js/app.js",
+  "main": "src/js/app.js",
   "scripts": {
-    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "build": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "npm run development -- --watch",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "repository": {
     "type": "git",
@@ -27,11 +29,15 @@
   "license": "MIT",
   "homepage": "https://github.com/prismify/oc-bootstrap-theme",
   "devDependencies": {
-    "laravel-mix": "^3.0.0"
+    "cross-env": "^5.2.0",
+    "laravel-mix": "^4.0.*",
+    "sass": "^1.17.2",
+    "sass-loader": "7.*",
+    "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^4.3.*",
     "jquery": "^3.3.1",
-    "popper.js": "^1.14.6"
+    "popper.js": "^1.15.*"
   }
 }