Merge pull request #24 from tksheppard/master

Lots of changes/fixes

Author: nvisionative

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
-build/
+build/
+dist/css/style.min.css
+dist/css/bootstrap.min.css

default.ascx

@@ -22,15 +22,15 @@
 
   <div class="container">
     <div class="row">
-      <div id="DoublePaneOneOne" class="col-md-6 pr-5" runat="server"></div>
-      <div id="DoublePaneOneTwo" class="col-md-6 bg-light-grey" runat="server"></div>
+      <div id="DoublePaneOneOne" class="col-md-6 cpr-5" runat="server"></div>
+      <div id="DoublePaneOneTwo" class="col-md-6 bg-light-grey cp-5" runat="server"></div>
     </div>
   </div>   
 
   <div class="container-fluid bg-tertiary">
     <div class="container">
       <div class="row align-items-center">
-        <div id="FullWidthBGDoublePaneOne" class="col-md-6" runat="server"></div>
+        <div id="FullWidthBGDoublePaneOne" class="col-md-6 cpy-5" runat="server"></div>
         <div id="FullWidthBGDoublePaneTwo" class="col-md-6" runat="server"></div>
       </div>
     </div>

dist/css/bootstrap.min.css

@@ -1,12 +1,3 @@
-var project       = 'nvQuickTheme', // If using dev environment in live instance, this needs to be the same as your root folder name.
-    version       = '1.0.0',
-    author        = 'TK Sheppard & David Poindexter', 
-    company       = 'nvisionative',
-    url           = 'www.nvquicktheme.com',
-    email         = 'support@nvisionative.com',
-    description   = 'A DNN Theme Building Framework';
-
-var manifest      = './manifest.json';
 var gulp          = require('gulp'),
     autoprefixer  = require('gulp-autoprefixer'),
     jshint        = require('gulp-jshint'),
@@ -20,23 +11,38 @@ var gulp          = require('gulp'),
     zip           = require('gulp-zip'),
     clean         = require('gulp-clean'),
     path          = require('path'),
-    config        = require( manifest ),
+    details       = require('./project-details.json'),
+    project       = details.project,
+    version       = details.version,
+    author        = details.author,
+    company       = details.company,
+    url           = details.url,
+    email         = details.email,
+    description   = details.description,
+    config        = require('./pathing.json'),
     node          = ( config.node.length )? config.node+'/' : '',
     assets        = ( config.assets.length )? config.assets+'/' : '',
     src           = ( config.src.length )? config.src+'/' : '',
     dist          = ( config.dist.length )? config.dist+'/' : '',
     temp          = ( config.temp.length )? config.temp+'/' : '',
-    build          = ( config.build.length )? config.build+'/' : '';
+    build         = ( config.build.length )? config.build+'/' : '';
+    
+
 
 /*
 *	IMAGE/SVG TASKS
 ------------------------------------------------------*/
 
 // Compresses images for production.
 gulp.task('images', function() {
-	return gulp.src( './'+src+'images/**/*.{jpg,jpeg,png,gif}' )
-		.pipe(imagemin())
-		.pipe(gulp.dest( './'+dist+'images/' ));
+	return gulp.src( './images/**/*.{jpg,jpeg,png,gif}' )
+		.pipe(imagemin({
+      interlaced: true,
+      progressive: true,
+      optimizationLevel: 5,
+      svgoPlugins: [{removeViewBox: true}]
+    }))
+		.pipe(gulp.dest( './dist/images/' ));
 });
 
 
@@ -56,15 +62,15 @@ gulp.task('scss', function() {
 		.pipe(notify({message: 'Styles compiled successfully!', title : 'sass', sound: false}));
 });
 
-// Dev Bootstrap creation.
+// Development Bootstrap creation.
 // Checks for errors and concats. Minifies. All Bootstrap CSS
 gulp.task('bscss', function() {
   return gulp.src('./'+src+assets+'bootstrap/scss/**/*.scss')
     .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
     .pipe(rename({suffix: '.min'}))
     .pipe(autoprefixer({browsers: ['last 2 versions', 'ie >= 9', '> 1%']}))
-		.pipe(gulp.dest( './'+dist+'/css/'))
-		.pipe(notify({message: 'Styles compiled successfully!', title : 'sass', sound: false}));
+		.pipe(gulp.dest( './'+dist+'css/'))
+		.pipe(notify({message: 'Styles compiled successfully!', title : 'bootstrap', sound: false}));
 })
 
 
@@ -87,7 +93,6 @@ gulp.task('js', function() {
         return { message : 'JS much excellent success!',
           title : file.relative,
           sound: false,
-          icon: path.join('node_modules/gulp-notify/node', 'gulp.png'),
         };
       }
       var errors = file.jshint.results.map(function (data) {
@@ -96,9 +101,8 @@ gulp.task('js', function() {
         }
       }).join("\n");
       return { message : file.relative + " (" + file.jshint.results.length + " errors)\n" + errors,
-        sound: "Frog",
+        sound: false,
         emitError : true,
-        icon: path.join('node_modules/gulp-notify/node', 'gulp-error.png'),
         title : 'JSLint'
       };
     }))
@@ -112,7 +116,7 @@ gulp.task('js', function() {
 
 gulp.task('containers', function() {
   gulp.src('./containers/*')
-    .pipe(gulp.dest('../../Containers/' +project+ '/'))
+    .pipe(gulp.dest('../../Containers/'+project+'/'))
     .pipe(notify({message: 'Containers updated!', title : 'containers', sound: false}));
 });
 
@@ -147,9 +151,9 @@ gulp.task('init', function() {
 
 });
 
-// Takes the information provided at the top of this file and populates it into the dnn-manifest file.
+// Takes the information provided at the top of this file and populates it into the manifest.dnn file.
 gulp.task('manifest', function() {
-  gulp.src('./dnn-manifest.dnn')
+  gulp.src('./manifest.dnn')
     .pipe(replace(/\<package name\=\"(.*?)(?=\")/, '<package name="'+company+ '.' +project))
     .pipe(replace(/type\=\"Skin\" version\=\"(.*?)(?=\")/, 'type="Skin" version="'+version))
     .pipe(replace(/\<friendlyName\>(.*?)(?=\<)/, '<friendlyName>'+project))
@@ -187,7 +191,7 @@ gulp.task('zipcontainers', function() {
 
 // Zips everything else
 gulp.task('zipelse', function() {
-  return gulp.src(['./menus/**/*', './partials/*', '*.ascx', '*.xml', '*.html', '*.htm'], {base: '.'})
+  return gulp.src(['./menus/**/*', './partials/*', '*.{ascx,xml,html,htm}'], {base: '.'})
     .pipe(gulp.dest('./'+temp))
     .pipe(replace('dist/', ''))
     .pipe(zip('else.zip'))
@@ -225,6 +229,7 @@ gulp.task('watch', function () {
     gulp.watch( src+assets+"bootstrap/scss/**/*.scss", ['bscss'])
     gulp.watch([ src+"js/**/*.js"], ['js'])
     gulp.watch( './containers/*', ['containers'])
+    gulp.watch( './project-details.json', ['manifest'])
 });
 
 // gulp build

dist/css/style.min.css

@@ -1,8 +1,8 @@
 <dotnetnuke type="Package" version="9.0">
   <packages>
-    <package name="nvisionative.nvQuickTheme" type="Skin" version="1.0.0">
+    <package name="nvisionative.nvQuickTheme" type="Skin" version="1.2.0">
       <friendlyName>nvQuickTheme</friendlyName>
-      <description>A DNN Theme Building Framework</description>
+      <description>A DNN Theme Dev Framework</description>
       <iconFile>MyIcon.png</iconFile>
       <owner>
         <name>TK Sheppard &amp; David Poindexter</name>

gulpfile.js

@@ -1,6 +1,6 @@
-<footer>
+<footer class="bg-light-grey">
   <div class="container upper">
-    <div class="row">
+    <div class="row py-5">
       <div id="FooterPaneOne" class="col-md-4" runat="server"></div>
       <div id="FooterPaneTwo" class="col-md-4" runat="server"></div>
       <div id="FooterPaneThree" class="col-md-4" runat="server"></div>

dnn-manifest.dnn manifest.dnn

@@ -1,5 +1,5 @@
-<header>
-  <div class="container-fluid user-controls">
+<header class="bg-light-grey">
+  <div class="container-fluid user-controls bg-tertiary">
     <div class="container">
       <div class="row justify-content-end">
         <ul>

partials/_footer.ascx

@@ -0,0 +1,9 @@
+{
+	"project": "nvQuickTheme",
+	"version": "1.2.0",
+	"author": "TK Sheppard & David Poindexter",
+	"company": "nvisionative",
+	"url": "www.nvquicktheme.com",
+    "email": "support@nvisionative.com",
+    "description": "A DNN Theme Dev Framework"
+}

partials/_header.ascx

@@ -195,7 +195,7 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns:                12 !default;
-$grid-gutter-width:           30px !default;
+$grid-gutter-width:           2rem !default;
 
 // Components
 //

manifest.json pathing.json

@@ -19,10 +19,7 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-h1, h2, h3, {
-	font-family: $open-sans;
-}
-h4, h5 {
+h1, h2, h3, h4, h5 {
 	font-family: $open-sans;
 }
 

project-details.json

@@ -1,7 +1,6 @@
 @import 'dnn';
 @import 'buttons';
 @import 'fonts';
-@import 'forms';
 @import 'grid';
 @import 'helpers';
 @import 'nav';

default.doctype.xml skin.doctype.xml

@@ -3304,9 +3304,8 @@ div.actionMenu .dnn_mact {
 
 /* On Page Editor */
 .eipbackimg {
-  margin-top:-41px !important;
-  margin-left:-9px !important;
   height:30px !important;
+  z-index:1250;
 
   &.editMode {
     border:none !important;

src/assets/bootstrap/scss/_variables.scss

@@ -1,43 +1,37 @@
-// Bootstrap Grid Changes
-
-/* Changes the default gutter size */
-$xgutter:2rem;
-$ygutter:4rem;
-
-// Sets gutters on all cols
-[class^='col-'] {
-  padding-left:$xgutter;
-  padding-right:$xgutter;
-  margin-top:$ygutter;
-  margin-bottom:$ygutter;
+// bg clipping at gutter for cols
+[class*="col"] {
+  &[class*="bg-"] {
+    background-clip:content-box;
+  }
 }
 
-@each $breakpoint in $breakpoints {
-  $size: nth($breakpoint, 1);
-  $width: nth($breakpoint, 2);
+// Pulls information for each breakpoint
+@each $size, $width in $breakpoints {
 
-  // Upon collapse of cols at the appropriate breakpoint, adds a margin
+  // Upon collapse of cols at the appropriate breakpoint:
   @include mq-max-width($width) {
+
+    // adds a margin to the top cols that come after cols
     [class^='col-#{$size}'] + [class^='col-#{$size}'] {
-      margin-top:0;
-      margin-bottom:$ygutter;
+      margin-top:($cspacer * 2); 
     }
-    .container { 
-      max-width:1200px; 
+
+    // adds padding to the child div of the col to even spacing
+    .container [class^="col-#{$size}"] > div {
+      padding-left:$cspacer !important;
+      padding-right:$cspacer !important;
     }
+
+    // removes padding for container within fluid container
     .container-fluid .container {
       padding:0;
+    }
 
-      .row {
-        margin-left:0;
-        margin-right:0;
+    // switches bg clipping back to the edge of padding
+    [class^="col-#{$size}"] {
+      &[class*="bg-"] {
+        background-clip:padding-box !important;
       }
     }
-    // Adds the gutter to the left and right when collapsed
-    [class^='col-'] {       
-      padding-left:$xgutter;
-      padding-right:$xgutter;
-    }
   }
-}
-
+}

src/scss/_base.scss

@@ -1,9 +1,9 @@
-/* Position */
+// position 
 .pos-relative{
     position: relative
 }
 
-/* Cover Links */
+// cover links
 .cover-link {
 	position:absolute;
 	top:0;
@@ -13,10 +13,10 @@
 	z-index:100;
 }
 
-/* BG Color Helpers */
+// bg colors
 [class*="bg-"] {
   color:white;
-    
+
   &[class*="-primary"] {
     background-color:$primary-color !important;
   }
@@ -33,4 +33,28 @@
   pre {
     background:white;
   }
+}
+
+// padding on div below contentpane
+// usage: adding cpy-4 class to a div would add padding to top and bottom of the div underneath it
+// mostly useful for cols with a bg color
+@each $size, $length in $cspacers {
+
+  .cp-#{$size} > div { padding: $length !important; }
+  .cpt-#{$size} > div,
+  .cpy-#{$size} > div {
+    padding-top: $length !important;
+  }
+  .cpr-#{$size} > div,
+  .cpx-#{$size} > div {
+    padding-right: $length !important;
+  }
+  .cpb-#{$size} > div,
+  .cpy-#{$size} > div {
+    padding-bottom: $length !important;
+  }
+  .cpl-#{$size} > div,
+  .cpx-#{$size} > div {
+    padding-left: $length !important;
+  }
 }

src/scss/components/_components.scss

@@ -2,23 +2,20 @@
   @return $num / ($num * 0 + 1);
 }
 
-// REM Font-size with PX falleback
-// usage
-// @include font-size(13);
-// Output: font-size: 13px;
-//         font-size: 1.3rem;
+// rem font-size with px fallback
+// usage: @include font-size(16)
 @mixin font-size($sizeValue) {
   font-size: $sizeValue + px;
   font-size: ($sizeValue / 16) + rem;
 }
 
-// Vertical rhythm
-// @include font-baseline(16,24);
+// vertical rhythm
+// usage: @include font-baseline(16,24);
 @mixin font-baseline($font-size, $lineheight){
 	font-size: $font-size + px;
 	font-size: ($font-size / $base-font-size ) + rem;
 	line-height: ( $lineheight / $font-size / 1 );
-    margin: 0 0 ( ($lineheight / $font-size * ( 1 / ( $lineheight / $defaultlineheight))) * .5em ) 0; 
+  margin: 0 0 ( ($lineheight / $font-size * ( 1 / ( $lineheight / $defaultlineheight))) * .5em ) 0; 
 }
 
 @mixin background-cover(){

src/scss/components/_dnn.scss

@@ -0,0 +1,3 @@
+main div.container, main div.container-fluid {
+    margin-bottom: 4rem;
+}