initial start of the base theme framework, based on tadejf84/HTML-sta…

…rter-theme

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+package-lock.json
+/.gitignore
+/.idea

README.md

@@ -1,2 +1,58 @@
-# impresscms-theme-bootup
-The base Twitter Bootstrap theme for ImpressCMS
+## HTML Boilerplate Starter Theme
+
+A modern, HTML starter theme. It comes out of the box with NPM, Gulp.js, Boostrap 4 and jQuery.
+
+## Installation
+Just clone the repo and run npm install in the root to install all the dependencies.
+
+## Folder structure
+
+```
+root
+│   .gitignore          # folders and files ignored by git
+│   README.md           # readme file
+│   package.json        # all npm dependencies  
+│   gulpconfig.json     # paths for gulp
+│   gulpfile.js         # gulp tasks
+│   index.html          # main index file      
+│   package-lock.json   # automatically generated by npm   
+│   rev-manifest.json   # automatically generated by gulp-rev
+└───dist              
+│   └───fonts           # fonts
+│   └───images          # compressed images
+│   └───scripts         # main.js and vendor.js minified
+│   └───styles          # compiled and minified stylesheets
+└───node_modules
+└───vendor              # bootstrap and jquery files
+└───src
+    └───fonts           # all your fonts go here
+    └───images          # all your images go here
+    └───scripts         # main.js for your custom js code
+    └───styles          # all your sass files go here
+```
+
+## How to use
+1. gulp watch - compile assets during development
+```javascript
+gulp watch
+```
+
+2. gulp prod - compile assets for distribution
+```javascript
+gulp prod
+```
+
+3. gulp distclean - delete all files in the dist folder
+```javascript
+gulp distclean
+```
+
+4. gulp copy-assets - copy all bootstrap and jquery files to vendor
+```javascript
+gulp copy-assets
+```
+
+## License
+
+GNU General Public License 3.0
+[GPL 3.0] https://www.gnu.org/licenses/gpl-3.0.en.html

gulpconfig.json

@@ -0,0 +1,20 @@
+{
+  "paths" : {
+    "src" : {
+      "js": "./src/scripts/*.js",
+      "css": "./src/styles/**/*.scss",
+      "img": "./src/images/**",
+      "fonts": "./src/fonts/**",
+      "jquery": "./vendor/js/jquery/jquery.js",
+      "bootstrapjs": "./vendor/js/bootstrap4/bootstrap.bundle.js"
+    },
+    "dest": {
+      "js": "./dist/scripts",
+      "css": "./dist/styles",
+      "img": "./dist/images",
+      "fonts": "./dist/fonts"
+    },
+    "vendor": "./vendor",
+    "node": "./node_modules"
+  }
+}

gulpfile.js

@@ -0,0 +1,164 @@
+'use strict';
+
+// ## Globals
+const gulp          = require('gulp');
+const watch         = require('gulp-watch');
+const sass          = require('gulp-sass');
+const autoprefixer  = require('gulp-autoprefixer');
+const browserSync   = require('browser-sync').create();
+const uglify        = require('gulp-uglify');
+const plumber       = require('gulp-plumber');
+const cssnano       = require('gulp-cssnano');
+const sourcemaps    = require('gulp-sourcemaps');
+const imagemin      = require('gulp-imagemin');
+const concat        = require('gulp-concat');
+const del           = require('del');
+const gulpSequence  = require('gulp-sequence')
+const rev           = require('gulp-rev');
+const babel 				= require('gulp-babel');
+const jshint 				= require('gulp-jshint');
+
+// configs
+const config = require( './gulpconfig.json' );
+const paths = config.paths;
+
+const autoprefixerOptions = {
+  browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
+};
+
+// gulp main js
+gulp.task('mainjs', function () {
+	const mainScripts = [
+    paths.src.js
+	];
+	gulp.src(mainScripts)
+      	.pipe(plumber(function(error) {
+            console.error(error.message);
+            gulp.emit('finish');
+        }))
+      	.pipe(sourcemaps.init())
+        .pipe(babel({
+          presets: ['env']
+        }))
+        .pipe(jshint())
+        .pipe(jshint.reporter('default'))
+        .pipe(concat('main.js'))
+        .pipe(uglify())
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest(paths.dest.js))
+        .pipe(browserSync.stream());
+});
+
+// gulp vendor js
+gulp.task('vendorjs', function () {
+    const vendorScripts = [
+      paths.src.jquery,
+      paths.src.bootstrapjs
+    ];
+    gulp.src(vendorScripts)
+      	.pipe(plumber(function(error) {
+            console.error(error.message);
+            gulp.emit('finish');
+        }))
+      	.pipe(sourcemaps.init())
+        .pipe(concat('vendor.js'))
+				.pipe(uglify())
+      	.pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest(paths.dest.js))
+        .pipe(browserSync.stream());
+});
+
+// gulp minify css for production
+gulp.task('minify-css', function () {
+    return gulp.src(paths.src.css)
+        .pipe(plumber({
+          errorHandler: function( err ) {
+            console.log( err ) ;
+            this.emit( 'end' );
+          }
+        }))
+        .pipe(sass({
+          outputStyle: 'compressed',
+          errLogToConsole: true
+        }))
+        .pipe(autoprefixer(autoprefixerOptions))
+        .pipe(sourcemaps.init({loadMaps: true}))
+        .pipe(cssnano({
+          discardComments: {removeAll: true}
+        }))
+        .pipe( sourcemaps.write( './' ) )
+        .pipe(gulp.dest(paths.dest.css))
+        .pipe(browserSync.stream());
+});
+
+// compress images
+gulp.task( 'imagemin', function() {
+    gulp.src( paths.src.img )
+        .pipe( imagemin([
+          imagemin.jpegtran({progressive: true}),
+          imagemin.gifsicle({interlaced: true}),
+          imagemin.svgo({plugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]})
+        ]) )
+        .pipe( gulp.dest( paths.dest.img ) )
+        .pipe(browserSync.stream());
+});
+
+// move all fonts to dist folder
+gulp.task('fonts', function() {
+    return gulp.src(paths.src.fonts)
+        .pipe(gulp.dest(paths.dest.fonts))
+        .pipe(browserSync.stream());
+});
+
+// gulp watch sequence
+gulp.task('watchsequence', function(callback) {
+    gulpSequence( 'minify-css', ['mainjs', 'vendorjs'], ['imagemin', 'fonts'], callback );
+});
+
+// gulp watch task
+gulp.task('watch', ['watchsequence'], function () {
+    browserSync.init([paths.src.css, paths.src.js, './index.html', paths.src.img, paths.src.fonts], {
+      server: {
+        baseDir: "./"
+      }
+    });
+    gulp.watch(paths.src.css, ['minify-css']);
+    gulp.watch(paths.src.js, ['mainjs']);
+	  gulp.watch(paths.src.fonts, ['fonts']);
+  	gulp.watch(paths.src.img, ['imagemin']);
+});
+
+// Deleting any file inside the dist folder
+gulp.task('distclean', del.bind(null, ['./dist/**/*']));
+
+// gulp rev for production
+gulp.task( 'rev', function() {
+  gulp.src([paths.dest.css + '/main.css', paths.dest.js + '/main.js'], {base: './'})
+    .pipe(rev())
+    .pipe(gulp.dest('./'))
+    .pipe(rev.manifest())
+    .pipe(gulp.dest('./'));
+});
+
+// gulp production task
+gulp.task('prod', function (callback) {
+    gulpSequence( 'distclean', 'minify-css', ['mainjs', 'vendorjs'], ['imagemin', 'fonts'], 'rev', callback );
+});
+
+// copy assets to vendor folder
+gulp.task( 'copy-assets', function() {
+
+    // bootstrap js
+    var stream = gulp.src( paths.node + '/bootstrap/dist/js/**/*.js' )
+        .pipe( gulp.dest( paths.vendor + '/js/bootstrap4' ) );
+
+    // bootstrap sass
+    gulp.src( paths.node + '/bootstrap/scss/**/*.scss' )
+        .pipe( gulp.dest( paths.vendor + '/sass/bootstrap4' ) );
+
+    // jquery
+    gulp.src( paths.node + '/jquery/dist/**/*.js' )
+        .pipe( gulp.dest( paths.vendor + '/js/jquery' ) );
+
+    return stream;
+});

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>HTML Starter Theme</title>
+    <!-- all external stylesheets -->
+    <link rel="stylesheet" href="dist/styles/main.css">
+  </head>
+  <body>
+
+    <!--[if lt IE 8]>
+        <p>You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
+    <![endif]-->
+
+    <header class="header-main">
+
+    </header>
+
+    <main class="content-main">
+
+    </main>
+
+    <footer class="footer-main">
+
+    </footer>
+
+    <!-- all external scripts -->
+    <script src="dist/scripts/vendor.js"></script>
+    <script src="dist/scripts/main.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "html-starter-theme",
+  "version": "1.0.0",
+  "author": "Tadej Fuks",
+  "description": "html boilerplate starter theme with Bootstrap 4 and jQuery",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tadejf84/HTML-starter-theme"
+  },
+  "license": "GPL-3.0",
+  "engines": {
+    "node": ">= 4.5"
+  },
+  "scripts": {
+    "postinstall": "gulp copy-assets"
+  },
+  "keywords": [
+    "theme",
+    "framework",
+    "bootstrap",
+    "jQuery",
+    "gulp"
+  ],
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "browser-sync": "^2.24.4",
+    "del": "^3.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-babel": "^7.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-cssnano": "^2.1.3",
+    "gulp-imagemin": "^4.1.0",
+    "gulp-jshint": "^2.1.0",
+    "gulp-plumber": "^1.2.0",
+    "gulp-rev": "^8.1.1",
+    "gulp-sass": "^4.0.1",
+    "gulp-sequence": "^1.0.0",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-uglify": "^3.0.0",
+    "gulp-watch": "^5.0.0",
+    "jshint": "^2.9.5"
+  },
+  "dependencies": {
+    "bootstrap": "^4.1.1",
+    "jquery": "^3.3.1"
+  }
+}

src/fonts/README.md

@@ -0,0 +1 @@
+"#osnovna-starter - all fonts go here" 

src/scripts/main.js

@@ -0,0 +1,11 @@
+(function ($, main, undefined) {
+
+	'use strict';
+
+  $( document ).ready(function() {
+
+    console.log('main script loaded!');
+
+  });
+
+}(jQuery, window.main = window.main || {}));