Added CSS lint to gulp file

code/gulpfile.js

@@ -37,6 +37,7 @@ const inlineImages = require('gulp-css-base64');
 const favicon = require('gulp-base64-favicon');
 const htmllint = require('gulp-htmllint');
 const gutil = require('gulp-util');
+const csslint = require('gulp-csslint');
 
 const dataFolder = 'espurna/data/';
 const staticFolder = 'espurna/static/';
@@ -89,6 +90,12 @@ gulp.task('build_certs', function() {
     toHeader('server.key');
 });
 
+gulp.task('csslint', function() {
+    gulp.src('html/*.css')
+        .pipe(csslint({ids: false}))
+        .pipe(csslint.formatter());
+});
+
 gulp.task('buildfs_embeded', ['buildfs_inline'], function() {
     toHeader('index.html.gz');
 });

code/html/custom.css

@@ -8,7 +8,7 @@
 }
 
 .pure-g {
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 
 .pure-form legend {
@@ -29,7 +29,7 @@
     color: #777777;
 }
 
-.header h2 {
+h2 {
     font-size: 1em;
 }
 
@@ -37,17 +37,21 @@
     display: none;
 }
 
+.block {
+    display: block;
+}
+
 .content {
-    margin: 0px;
+    margin: 0;
 }
 
 .page {
     margin-top: 10px;
 }
 
-div.hint {
-    font-size: 80%;
+.hint {
     color: #ccc;
+    font-size: 80%;
     margin: -10px 0 10px 0;
 }
 
@@ -64,26 +68,13 @@ input[name=upgrade] {
     display: none;
 }
 
-.panel.block {
-    display: block;
-}
-
 select {
-    width: 100%;
     margin-bottom: 10px;
-}
-
-hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #eee;
-    margin: 1em 0;
-    padding: 0;
+    width: 100%;
 }
 
 input.center {
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 
 div.center {
@@ -96,14 +87,14 @@ div.center {
 
 #credentials {
     font-size: 200%;
-    text-align: center;
     height: 100px;
-    width: 400px;
-    position: fixed;
-    top: 50%;
     left: 50%;
-    margin-top: -50px;
     margin-left: -200px;
+    margin-top: -50px;
+    position: fixed;
+    text-align: center;
+    top: 50%;
+    width: 400px;
 }
 
 div.state {
@@ -130,12 +121,12 @@ div.state {
    -------------------------------------------------------------------------- */
 
 .pure-button {
-    color: white;
-    padding: 8px 8px;
     border-radius: 4px;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    color: white;
     letter-spacing: 0;
     margin-bottom: 10px;
+    padding: 8px 8px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .main-buttons {
@@ -193,40 +184,40 @@ input.slider {
 
 span.slider {
     font-size: 70%;
+    letter-spacing: 0;
     margin-left: 10px;
     margin-top: 7px;
-    letter-spacing: 0;
 }
 
 /* -----------------------------------------------------------------------------
     Loading
    -------------------------------------------------------------------------- */
 
-div.loading {
+.loading {
     background-image: url('images/loading.gif');
-    width: 20px;
+    display: none;
     height: 20px;
     margin: 8px 0 0 10px;
-    display: none;
+    width: 20px;
 }
 
 /* -----------------------------------------------------------------------------
     Menu
    -------------------------------------------------------------------------- */
 
-#menu span.small {
+#menu .small {
     font-size: 60%;
     padding-left: 9px;
 }
 
 #menu div.footer {
-    padding: 10px;
-    font-size: 80%;
     color: #999;
+    font-size: 80%;
+    padding: 10px;
 }
 #menu div.footer a {
+    padding: 0;
     text-decoration: none;
-    padding: 0px;
 }
 
 /* -----------------------------------------------------------------------------
@@ -256,9 +247,9 @@ div.loading {
 
 #upgrade-progress {
     display: none;
-    width: 100%;
     height: 20px;
     margin-top: 10px;
+    width: 100%;
 }
 
 #uploader,
@@ -272,9 +263,9 @@ div.loading {
 
 #networks .pure-g,
 #schedules .pure-g {
-    padding: 10px 0 10px 0;
-    margin-bottom: 10px;
     border-bottom: 1px solid #eee;
+    margin-bottom: 10px;
+    padding: 10px 0 10px 0;
 }
 
 #networks .more {
@@ -282,8 +273,8 @@ div.loading {
 }
 
 #scanResult {
-    margin-top: 10px;
-    font-size: 60%;
     color: #888;
     font-family: 'Courier New', monospace;
+    font-size: 60%;
+    margin-top: 10px;
 }

code/html/custom.js

@@ -21,14 +21,14 @@ var ago = 0;
 // -----------------------------------------------------------------------------
 
 function initMessages() {
-    messages[ 1] = "Remote update started";
-    messages[ 2] = "OTA update started";
-    messages[ 3] = "Error parsing data!";
-    messages[ 4] = "The file does not look like a valid configuration backup or is corrupted";
-    messages[ 5] = "Changes saved. You should reboot your board now";
-    messages[ 7] = "Passwords do not match!";
-    messages[ 8] = "Changes saved";
-    messages[ 9] = "No changes detected";
+    messages[1]  = "Remote update started";
+    messages[2]  = "OTA update started";
+    messages[3]  = "Error parsing data!";
+    messages[4]  = "The file does not look like a valid configuration backup or is corrupted";
+    messages[5]  = "Changes saved. You should reboot your board now";
+    messages[7]  = "Passwords do not match!";
+    messages[8]  = "Changes saved";
+    messages[9]  = "No changes detected";
     messages[10] = "Session expired, please reload page...";
 }
 
@@ -40,7 +40,7 @@ function sensorName(id) {
         "SHT3X I2C", "BH1750"
     ];
     if (1 <= id && id <= names.length) {
-        return names[id-1];
+        return names[id - 1];
     }
     return null;
 }
@@ -54,7 +54,7 @@ function magnitudeType(type) {
         "PM1.0", "PM2.5", "PM10", "CO2", "Lux"
     ];
     if (1 <= type && type <= types.length) {
-        return types[type-1];
+        return types[type - 1];
     }
     return null;
 }
@@ -75,7 +75,7 @@ function magnitudeError(error) {
 // -----------------------------------------------------------------------------
 
 function keepTime() {
-    if (now === 0) return;
+    if (now === 0) { return; }
     var date = new Date(now * 1000);
     var text = date.toISOString().substring(0, 19).replace("T", " ");
     $("input[name='now']").val(text);
@@ -123,8 +123,7 @@ function loadTimeZones() {
         $("select[name='ntpOffset']").append(
             $("<option></option>").
                 attr("value",value).
-                text(text)
-        );
+                text(text));
     }
 
 }
@@ -971,10 +970,10 @@ function processData(data) {
 
         if (key === "wifi") {
             for (i in data.wifi) {
-                var line = addNetwork();
+                var nwk_line = addNetwork();
                 var wifi = data.wifi[i];
                 Object.keys(wifi).forEach(function(key) {
-                    $("input[name='" + key + "']", line).val(wifi[key]);
+                    $("input[name='" + key + "']", nwk_line).val(wifi[key]);
                 });
             }
             return;
@@ -994,14 +993,13 @@ function processData(data) {
         }
 
         if (key === "schedule") {
-            var schedule = data.schedule;
-            for (i in schedule) {
-                var line = addSchedule();
+            for (i in data.schedule) {
+                var sch_line = addSchedule();
                 var schedule = data.schedule[i];
                 Object.keys(schedule).forEach(function(key) {
-                    $("input[name='" + key + "']", line).val(schedule[key]);
-                    $("select[name='" + key + "']", line).prop("value", schedule[key]);
-                    $(":checkbox", line).prop("checked", schedule[key]);
+                    $("input[name='" + key + "']", sch_line).val(schedule[key]);
+                    $("select[name='" + key + "']", sch_line).prop("value", schedule[key]);
+                    $(":checkbox", sch_line).prop("checked", schedule[key]);
                 });
             }
             return;
@@ -1113,33 +1111,33 @@ function processData(data) {
         var post;
 
         // Look for INPUTs
-        var element = $("input[name='" + key + "']");
-        if (element.length > 0) {
-            if (element.attr("type") === "checkbox") {
-                element.
+        var input = $("input[name='" + key + "']");
+        if (input.length > 0) {
+            if (input.attr("type") === "checkbox") {
+                input.
                     prop("checked", data[key]).
                     iphoneStyle("refresh");
-            } else if (element.attr("type") === "radio") {
-                element.val([data[key]]);
+            } else if (input.attr("type") === "radio") {
+                input.val([data[key]]);
             } else {
-                pre = element.attr("pre") || "";
-                post = element.attr("post") || "";
-                element.val(pre + data[key] + post);
+                pre = input.attr("pre") || "";
+                post = input.attr("post") || "";
+                input.val(pre + data[key] + post);
             }
         }
 
         // Look for SPANs
-        var element = $("span[name='" + key + "']");
-        if (element.length > 0) {
-            pre = element.attr("pre") || "";
-            post = element.attr("post") || "";
-            element.html(pre + data[key] + post);
+        var span = $("span[name='" + key + "']");
+        if (span.length > 0) {
+            pre = span.attr("pre") || "";
+            post = span.attr("post") || "";
+            span.html(pre + data[key] + post);
         }
 
         // Look for SELECTs
-        var element = $("select[name='" + key + "']");
-        if (element.length > 0) {
-            element.val(data[key]);
+        var select = $("select[name='" + key + "']");
+        if (select.length > 0) {
+            select.val(data[key]);
         }
 
     });

code/package.json

@@ -11,6 +11,7 @@
     "gulp-base64-favicon": "^1.0.2",
     "gulp-clean-css": "^3.4.2",
     "gulp-css-base64": "^1.3.4",
+    "gulp-csslint": "^1.0.0",
     "gulp-gzip": "^1.4.0",
     "gulp-htmllint": "0.0.14",
     "gulp-htmlmin": "^2.0.0",