Add Browsersync and Autoprefixer on gulp

build/css/custom.css

@@ -190,6 +190,7 @@
   width: 230px;
   padding: 0;
   position: absolute;
+  display: -ms-flexbox;
   display: flex;
   z-index: 9999; }
 
@@ -513,8 +514,6 @@ a:hover, a:focus {
   right: auto;
   width: 8px;
   z-index: 1;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
   border-radius: 50%; }
 
 .nav-md ul.nav.child_menu li:after {
@@ -556,13 +555,7 @@ a:hover, a:focus {
 
 .nav.side-menu > li.active > a {
   text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b6479), color-stop(100%, #4c5566)), #686e78;
-  background: -webkit-linear-gradient(#334556, #2C4257), #2A3F54;
-  background: -moz-linear-gradient(#334556, #2C4257), #2A3F54;
-  background: -o-linear-gradient(#334556, #2C4257), #2A3F54;
   background: linear-gradient(#334556, #2C4257), #2A3F54;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
-  -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
   box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0; }
 
 .navbar-brand, .navbar-nav > li > a {
@@ -726,8 +719,6 @@ article.media {
 
 /* *********  custom accordion  **************************** */
 *, *:before, *:after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box; }
 
 #integration-list {
@@ -824,10 +815,6 @@ h2 {
   -moz-column-break-inside: avoid;
   column-break-inside: avoid;
   opacity: 1;
-  -moz-transition: all .2s ease;
-  -o-transition: all .2s ease;
-  -webkit-transition: all .2s ease;
-  -ms-transition: all .2s ease;
   transition: all .2s ease; }
 
 .x_title {
@@ -1278,6 +1265,7 @@ div.box {
 ul.msg_list li {
   background: #f7f7f7;
   padding: 5px;
+  display: -ms-flexbox;
   display: flex;
   margin: 6px 6px 0;
   width: 96% !important; }
@@ -1357,8 +1345,6 @@ ul.to_do {
 
 ul.to_do li {
   background: #f3f3f3;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
   border-radius: 3px;
   position: relative;
   padding: 7px;
@@ -1428,6 +1414,7 @@ ul.quick-list li i {
 
 .widget_summary {
   width: 100%;
+  display: -ms-inline-flexbox;
   display: inline-flex; }
 
 .widget_summary .w_left {
@@ -1659,9 +1646,6 @@ h4.graph_title {
   border-radius: 5px;
   background-clip: padding-box;
   background: #FFF;
-  -moz-transition: all 300ms ease-in-out;
-  -o-transition: all 300ms ease-in-out;
-  -webkit-transition: all 300ms ease-in-out;
   transition: all 300ms ease-in-out; }
 
 .tile-stats:hover .icon i {
@@ -2043,8 +2027,6 @@ input.parsley-error, textarea.parsley-error, select.parsley-error {
   -webkit-animation: 0.7s 1 shake linear; }
 
 .item input, .item textarea {
-  -webkit-transition: 0.42s;
-  -moz-transition: 0.42s;
   transition: 0.42s; }
 
 /* alerts (when validation fails) */
@@ -2158,11 +2140,7 @@ a.btn-success, a.btn-primary, a.btn-warning, a.btn-danger {
   margin: 0 0 10px 10px;
   min-width: 80px;
   height: 60px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
   box-shadow: none;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
   border-radius: 0;
   text-align: center;
   color: #666;
@@ -2180,8 +2158,6 @@ a.btn-success, a.btn-primary, a.btn-warning, a.btn-danger {
   border-color: #aaa; }
 
 .btn.btn-app:active, .btn.btn-app:focus {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
 
 .btn.btn-app > .badge {
@@ -2215,10 +2191,6 @@ textarea:focus {
   color: #333333;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   background-color: #f5f5f5;
-  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
@@ -2227,11 +2199,7 @@ textarea:focus {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
   border: 1px solid #cccccc;
   border-bottom-color: #b3b3b3;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
   border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); }
 
 /* *********  /form textarea  **************************** */
@@ -2589,17 +2557,14 @@ ul.widget_tally .count {
 .pie_bg {
   border-bottom: 1px solid rgba(101, 204, 182, 0.16);
   padding-bottom: 15px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
   border-radius: 4px;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
   padding-bottom: 10px;
-  -webkit-box-shadow: 0 4px 6px -6px #222;
-  -moz-box-shadow: 0 4px 6px -6px #222;
   box-shadow: 0 4px 6px -6px #222; }
 
 .widget_tally_box .flex {
+  display: -ms-flexbox;
   display: flex; }
 
 ul.widget_profile_box {
@@ -2726,8 +2691,6 @@ ul.messages li img.avatar, img.avatar {
   width: 32px;
   float: left;
   display: inline-block;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
   border-radius: 2px;
   padding: 2px;
   background: #f7f7f7;
@@ -2773,6 +2736,7 @@ ul.user_data li .progress {
   background: #F5F7FA;
   border: 0;
   padding: 7px 0;
+  display: -ms-flexbox;
   display: flex; }
 
 ul.stats-overview {
@@ -2888,10 +2852,6 @@ ul.project_files li a i {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
   transform: rotate(45deg);
   padding: 7px 0;
   left: -5px;
@@ -3103,17 +3063,9 @@ ul.project_files li a i {
   right: -50px; }
 
 .sideways.tabs-right > li {
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
   transform: rotate(90deg); }
 
 .sideways.tabs-left > li {
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
   transform: rotate(-90deg); }
 
 /* *********  /verticle tabs  **************************** */
@@ -3327,22 +3279,10 @@ a.hiddenanchor {
 
 #signup:target ~ .login_wrapper .registration_form, #signin:target ~ .login_wrapper .login_form {
   z-index: 22;
-  -webkit-animation-name: fadeInLeft;
-  -moz-animation-name: fadeInLeft;
-  -ms-animation-name: fadeInLeft;
-  -o-animation-name: fadeInLeft;
   animation-name: fadeInLeft;
-  -webkit-animation-delay: .1s;
-  -moz-animation-delay: .1s;
-  -o-animation-delay: .1s;
-  -ms-animation-delay: .1s;
   animation-delay: .1s; }
 
 #signup:target ~ .login_wrapper .login_form, #signin:target ~ .login_wrapper .registration_form {
-  -webkit-animation-name: fadeOutLeft;
-  -moz-animation-name: fadeOutLeft;
-  -ms-animation-name: fadeOutLeft;
-  -o-animation-name: fadeOutLeft;
   animation-name: fadeOutLeft; }
 
 .animate {
@@ -3416,19 +3356,11 @@ a.hiddenanchor {
 
 .login_content h1:after {
   background: #7e7e7e;
-  background: -moz-linear-gradient(left, #7e7e7e 0%, white 100%);
-  background: -webkit-linear-gradient(left, #7e7e7e 0%, white 100%);
-  background: -o-linear-gradient(left, #7e7e7e 0%, white 100%);
-  background: -ms-linear-gradient(left, #7e7e7e 0%, white 100%);
   background: linear-gradient(left, #7e7e7e 0%, white 100%);
   right: 0; }
 
 .login_content h1:before {
   background: #7e7e7e;
-  background: -moz-linear-gradient(right, #7e7e7e 0%, white 100%);
-  background: -webkit-linear-gradient(right, #7e7e7e 0%, white 100%);
-  background: -o-linear-gradient(right, #7e7e7e 0%, white 100%);
-  background: -ms-linear-gradient(right, #7e7e7e 0%, white 100%);
   background: linear-gradient(right, #7e7e7e 0%, white 100%);
   left: 0; }
 
@@ -3441,19 +3373,11 @@ a.hiddenanchor {
 
 .login_content h1:after {
   background: #7e7e7e;
-  background: -moz-linear-gradient(left, #7e7e7e 0%, white 100%);
-  background: -webkit-linear-gradient(left, #7e7e7e 0%, white 100%);
-  background: -o-linear-gradient(left, #7e7e7e 0%, white 100%);
-  background: -ms-linear-gradient(left, #7e7e7e 0%, white 100%);
   background: linear-gradient(left, #7e7e7e 0%, white 100%);
   right: 0; }
 
 .login_content h1:before {
   background: #7e7e7e;
-  background: -moz-linear-gradient(right, #7e7e7e 0%, white 100%);
-  background: -webkit-linear-gradient(right, #7e7e7e 0%, white 100%);
-  background: -o-linear-gradient(right, #7e7e7e 0%, white 100%);
-  background: -ms-linear-gradient(right, #7e7e7e 0%, white 100%);
   background: linear-gradient(right, #7e7e7e 0%, white 100%);
   left: 0; }
 
@@ -3462,13 +3386,7 @@ a.hiddenanchor {
   position: relative; }
 
 .login_content form input[type="text"], .login_content form input[type="email"], .login_content form input[type="password"] {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
   border-radius: 3px;
-  -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
-  -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
   -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
   -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
   box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
@@ -3478,8 +3396,6 @@ a.hiddenanchor {
   width: 100%; }
 
 .login_content form input[type="text"]:focus, .login_content form input[type="email"]:focus, .login_content form input[type="password"]:focus {
-  -webkit-box-shadow: 0 0 2px #AA77B4 inset;
-  -moz-box-shadow: 0 0 2px #ed1c24 inset;
   -ms-box-shadow: 0 0 2px #ed1c24 inset;
   -o-box-shadow: 0 0 2px #ed1c24 inset;
   box-shadow: 0 0 2px #A97AAD inset;
@@ -3512,21 +3428,11 @@ a.hiddenanchor {
 
 .button {
   background: #f7f9fa;
-  background: -moz-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
-  background: -webkit-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
-  background: -o-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
-  background: -ms-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
   background: linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
   -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
   -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-  -webkit-border-radius: 0 0 5px 5px;
-  -moz-border-radius: 0 0 5px 5px;
-  -o-border-radius: 0 0 5px 5px;
-  -ms-border-radius: 0 0 5px 5px;
   border-radius: 0 0 5px 5px;
   border-top: 1px solid #CFD5D9;
   padding: 15px 0; }
@@ -3541,10 +3447,6 @@ a.hiddenanchor {
   font-size: 17px;
   padding: 2px 0 2px 40px;
   text-decoration: none;
-  -webkit-transition: all 0.3s ease;
-  -moz-transition: all 0.3s ease;
-  -ms-transition: all 0.3s ease;
-  -o-transition: all 0.3s ease;
   transition: all 0.3s ease; }
 
 .button a:hover {
@@ -3578,8 +3480,6 @@ header {
   height: 100%;
   box-shadow: 0 0 10px #29d, 0 0 5px #29d;
   opacity: 1.0;
-  -webkit-transform: rotate(3deg) translate(0px, -4px);
-  -ms-transform: rotate(3deg) translate(0px, -4px);
   transform: rotate(3deg) translate(0px, -4px); }
 
 /* Remove these to get rid of the spinner */
@@ -3598,7 +3498,6 @@ header {
   border-top-color: #29d;
   border-left-color: #29d;
   border-radius: 50%;
-  -webkit-animation: nprogress-spinner 400ms linear infinite;
   animation: nprogress-spinner 400ms linear infinite; }
 
 .nprogress-custom-parent {
@@ -3607,12 +3506,6 @@ header {
 
 .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar {
   position: absolute; }
-
-@-webkit-keyframes nprogress-spinner {
-  0% {
-    -webkit-transform: rotate(0deg); }
-  100% {
-    -webkit-transform: rotate(360deg); } }
 @keyframes nprogress-spinner {
   0% {
     transform: rotate(0deg); }
@@ -3627,7 +3520,6 @@ header {
   border: 1px solid #cccccc;
   padding: 4px;
   box-sizing: content-box;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.07451) 0px 1px 1px 0px inset;
   box-shadow: rgba(0, 0, 0, 0.07451) 0px 1px 1px 0px inset;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -3919,7 +3811,6 @@ fieldset {
   pointer-events: none;
   opacity: .65;
   filter: alpha(opacity=65);
-  -webkit-box-shadow: none;
   box-shadow: none; }
 
 .actionBar a {
@@ -4222,7 +4113,6 @@ ul.notifications {
 
 .xdisplay {
   background-color: #fff;
-  -webkit-background-clip: padding-box;
   background-clip: padding-box;
   border: 1px solid #ccc;
   margin-bottom: 20px;
@@ -4230,7 +4120,6 @@ ul.notifications {
   border-radius: 4px;
   width: 230px;
   overflow: hidden;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
 
 .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar, .daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
@@ -4259,23 +4148,15 @@ ul.notifications {
 
 .daterangepicker td.in-range {
   background: #E4E7EA;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
   border-radius: 0; }
 
 .daterangepicker td.available + td.start-date {
-  -webkit-border-radius: 4px 0 0 4px;
-  -moz-border-radius: 4px 0 0 4px;
   border-radius: 4px 0 0 4px; }
 
 .daterangepicker td.in-range + td.end-date {
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius: 0 4px 4px 0;
   border-radius: 0 4px 4px 0; }
 
 .daterangepicker td.start-date.end-date {
-  -webkit-border-radius: 4px !important;
-  -moz-border-radius: 4px !important;
   border-radius: 4px !important; }
 
 .daterangepicker td.active, .daterangepicker td.active:hover {
@@ -4362,8 +4243,6 @@ ul.notifications {
   color: #536A7F;
   padding: 3px 12px;
   margin-bottom: 8px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
   border-radius: 5px;
   cursor: pointer; }
 

gulpfile.js

@@ -2,7 +2,9 @@ var gulp = require('gulp'),
     concat = require('gulp-concat'),
     uglify = require('gulp-uglify'),
     rename = require('gulp-rename'),
-    sass = require('gulp-ruby-sass');
+    sass = require('gulp-ruby-sass'),
+    autoprefixer = require('gulp-autoprefixer'),
+    browserSync = require('browser-sync').create();
 
 var DEST = 'build/';
 
@@ -12,14 +14,17 @@ gulp.task('scripts', function() {
       .pipe(gulp.dest(DEST+'/js'))
       .pipe(rename({suffix: '.min'}))
       .pipe(uglify())
-      .pipe(gulp.dest(DEST+'/js'));
+      .pipe(gulp.dest(DEST+'/js'))
+      .pipe(browserSync.stream());
 });
 
 // TODO: Maybe we can simplify how sass compile the minify and unminify version
 var compileSASS = function (filename, options) {
   return sass('src/scss/*.scss', options)
+        .pipe(autoprefixer('last 2 versions', '> 5%'))
         .pipe(concat(filename))
-        .pipe(gulp.dest(DEST+'/css'));
+        .pipe(gulp.dest(DEST+'/css'))
+        .pipe(browserSync.stream());
 };
 
 gulp.task('sass', function() {
@@ -30,12 +35,23 @@ gulp.task('sass-minify', function() {
     return compileSASS('custom.min.css', {style: 'compressed'});
 });
 
+gulp.task('browser-sync', function() {
+    browserSync.init({
+        server: {
+            baseDir: './'
+        },
+        startPath: './production/index.html'
+    });
+});
+
 gulp.task('watch', function() {
-   // Watch .js files
+  // Watch .html files
+  gulp.watch('production/*.html', browserSync.reload);
+  // Watch .js files
   gulp.watch('src/js/*.js', ['scripts']);
-   // Watch .scss files
+  // Watch .scss files
   gulp.watch('src/scss/*.scss', ['sass', 'sass-minify']);
 });
 
 // Default Task
-gulp.task('default', ['watch']);
+gulp.task('default', ['browser-sync', 'watch']);

package.json

@@ -30,7 +30,9 @@
   },
   "homepage": "https://github.com/puikinsh/gentelella#readme",
   "devDependencies": {
+    "browser-sync": "^2.12.10",
     "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.6.0",
     "gulp-rename": "^1.2.2",
     "gulp-ruby-sass": "^2.0.6",