Update npm packages, remove grunt, lint css, add print styles

Gruntfile.js

@@ -1,20 +0,0 @@
-module.exports = function (grunt) {
-    'use strict';
-
-    grunt.loadNpmTasks('grunt-php');
-
-    grunt.initConfig({
-        php: {
-            dist: {
-                options: {
-                    keepalive: true,
-                    open: true,
-                    port: 8085,
-                    router: "index.php"
-                }
-            }
-        }
-    });
-
-    grunt.registerTask('default', ['php']);
-};

gulpfile.js

@@ -1,11 +1,11 @@
-
+var cssnano = require('cssnano'),
-var gulp = require('gulp'),
+    gulp = require('gulp'),
-    php = require('gulp-connect-php'),
     less = require('gulp-less'),
     rename = require('gulp-rename'),
     plumber = require('gulp-plumber'),
     postcss = require('gulp-postcss'),
-    sourcemaps = require('gulp-sourcemaps');
+    sourcemaps = require('gulp-sourcemaps'),
+    stylelint = require('gulp-stylelint');
 
 var resources = {
     daux_blue:{source: "themes/daux/less/theme-blue.less", dest: "themes/daux/css/"},
@@ -16,93 +16,76 @@ var resources = {
     daux_singlepage:{source: "themes/daux_singlepage/less/main.less", dest: "themes/daux_singlepage/css/"}
 };
 
-function createTask(source, dest) {
+var stylelintRules = {
-    return function() {
+    "indentation": 4,
-        var nano_options = {
+    "selector-list-comma-newline-after": "always-multi-line",
-            safe: true,           // Disable dangerous optimisations
+    "selector-no-id": true,
-            filterPlugins: false, // This does very weird stuff
+
-            autoprefixer: {
+    // Autoprefixer
-                add: true,                // Add needed prefixes
+    "at-rule-no-vendor-prefix": true,
-                remove: true              // Remove unnecessary prefixes
+    "media-feature-name-no-vendor-prefix": true,
-            }
+    "property-no-vendor-prefix": true,
-        };
+    "selector-no-vendor-prefix": true,
+    "value-no-vendor-prefix": true
+};
+
+var cssnanoOptions = {
+    safe: true,           // Disable dangerous optimisations
+    filterPlugins: false, // This does very weird stuff
+    autoprefixer: {
+        add: true,        // Add needed prefixes
+        remove: true      // Remove unnecessary prefixes
+    }
+};
+
+function createCSSTask(source, dest) {
+    return function () {
+
 
         return gulp.src(source)
             //.pipe(sourcemaps.init())
             .pipe(plumber())
             .pipe(less())
-            .pipe(postcss([
+            .pipe(postcss([cssnano(cssnanoOptions)]))
-                require('cssnano')(nano_options)
-            ]))
             .pipe(rename({suffix: '.min'}))
             //.pipe(sourcemaps.write())
             .pipe(gulp.dest(dest));
     }
 }
 
-
+gulp.task('lint-css', function () {
-function createLinter() {
-    var gulpStylelint = require('gulp-stylelint');
-
-    var rules = {
-        "indentation": 4,
-        "selector-list-comma-newline-after": "always-multi-line",
-        "selector-no-id": true,
-
-        // Autoprefixer
-        "at-rule-no-vendor-prefix": true,
-        "media-feature-name-no-vendor-prefix": true,
-        "property-no-vendor-prefix": true,
-        "selector-no-vendor-prefix": true,
-        "value-no-vendor-prefix": true
-    };
-
     return gulp
         .src(['themes/**/less/**/*.less', '!themes/**/vendor/**/*.less'])
-        .pipe(gulpStylelint({
+        .pipe(stylelint({
             failAfterError: true,
             config: {
-                extends: "stylelint-config-standard",
+                extends: 'stylelint-config-standard',
-                rules: rules
+                rules: stylelintRules
             },
-            syntax: "less",
+            syntax: 'less',
-            reporters: [
+            reporters: [{
-                {formatter: 'string', console: true}
+                formatter: 'string',
-            ],
+                console: true
+            }],
             debug: true
         }));
-}
+});
-
-
 
 var style_tasks = [];
 for (var style in resources) {
     if (resources.hasOwnProperty(style)) {
-        gulp.task('style_' + style, createTask(resources[style].source, resources[style].dest));
+        gulp.task('style_' + style, createCSSTask(resources[style].source, resources[style].dest));
         style_tasks.push('style_' + style);
     }
 }
 
-gulp.task('lint-css', createLinter);
 style_tasks.push('lint-css');
 
 gulp.task("styles", style_tasks);
 
-
+gulp.task('watch', function () {
-gulp.task('watch', function() {
-
     // Watch .less files
     gulp.watch('themes/**/less/**/*.less', ['styles']);
-
 });
 
-gulp.task('php', function() {
+gulp.task('default', ['styles']);
-    php.server({
-        keepalive: true,
-        open: true,
-        port: 8085,
-        router: "index.php"
-    });
-});
-
-gulp.task('default', ['php']);

package.json

@@ -1,19 +1,16 @@
 {
   "name": "daux.io",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "private": true,
   "devDependencies": {
-    "cssnano": "^3.5.2",
+    "cssnano": "^3.7.3",
-    "grunt": "^0.4.1",
-    "grunt-php": "^1.0.0",
     "gulp": "^3.9.1",
-    "gulp-connect-php": "^0.0.7",
+    "gulp-less": "^3.1.0",
-    "gulp-less": "^3.0.3",
     "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.1.0",
+    "gulp-postcss": "^6.1.1",
     "gulp-rename": "^1.2.2",
-    "gulp-sourcemaps": "^2.0.0-alpha",
+    "gulp-sourcemaps": "^1.6.0",
-    "gulp-stylelint": "^2.0.2",
+    "gulp-stylelint": "^3.0.0",
-    "stylelint-config-standard": "^6.0.0"
+    "stylelint-config-standard": "^12.0.0"
   }
 }

templates/layout/05_page.php

@@ -7,11 +7,11 @@
 
 } ?>
 
-<div class="Navbar hidden-print">
+<header class="Navbar hidden-print">
     <?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
-</div>
+</header>
 <div class="Columns content">
-    <div class="Columns__left hidden-print Collapsible">
+    <aside class="Columns__left Collapsible">
         <div class="Collapsible__container">
             <button type="button" class="Button Collapsible__trigger">
                 <span class="Collapsible__trigger--bar"></span>
@@ -93,12 +93,8 @@
             } ?>
             </div>
         </div>
-        <!-- For Mobile -->
+    </aside>
-
-
-    </div>
     <div class="Columns__right <?= $params['html']['float'] ? 'Columns__right--float' : ''; ?>">
-
         <div class="Columns__right__content">
             <div class="doc_content">
                 <?= $this->section('content'); ?>

themes/common/less/_print.less

@@ -6,34 +6,40 @@
     box-shadow: none !important;
 }
 
-.page-break {
+h1, h2, h3, h4, h5, h6 {
-    display: block;
-    page-break-before: always;
-}
-
-h1, h2 {
     page-break-after: avoid;
     page-break-before: auto;
 }
 
 pre, blockquote {
     border: 1px solid #999;
+    font-style: italic;
     page-break-inside: avoid;
 }
 
 img {
     page-break-inside: avoid;
+    border: 0; /* Some browsers like to show a border around images. Switch it off */
 }
 
 a,
-a:visited {
+a:visited { text-decoration: underline; }
-    text-decoration: underline;
+
+abbr[title]::after { content: " (" attr(title) ")"; }
+
+q { quotes: none; }
+
+q::before { content: ""; }
+
+q::after { content: " (" attr(cite) ")"; }
+
+.page-break {
+    display: block;
+    page-break-before: always;
 }
 
-a[href]::after {
+.hidden-print { display: none; }
-    content: " (" attr(href) ")";
+
-}
+/* Hide the navigation */
+aside { display: none; }
 
-abbr[title]::after {
-    content: " (" attr(title) ")";
-}

themes/common/less/_typography.less

@@ -6,7 +6,6 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: 300;
     -webkit-font-smoothing: antialiased;
     cursor: text;
-
     line-height: 1.4em;
     margin-top: 0.3em;
     margin-bottom: 0.3em;

themes/daux/less/_components.less

@@ -87,6 +87,7 @@ Components
         // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
         &:first-child {
             margin-left: 0;
+
             &:not(:last-child):not(.dropdown-toggle) {
                 .border-right-radius(0);
             }
@@ -111,10 +112,8 @@ Components
         font-size: 18px;
         line-height: 20px;
         height: @navbar-height;
-
         color: @light;
         text-shadow: none;
-
         font-family: @font-family-heading;
         font-weight: 700;
     }
@@ -225,7 +224,7 @@ Components
 }
 
 .Page__header {
-    margin: 0 0 10px 0;
+    margin: 0 0 10px;
     padding: 0;
     border-bottom: 1px solid #eee;
 
@@ -267,14 +266,12 @@ Components
     position: relative;
     float: right;
     margin: 8px 20px;
-    vertical-align: middle;
 
     &__field {
         display: block;
         width: 100%;
         height: 34px;
         padding: 6px 30px 6px 0;
-
         color: #555;
         background: #fff;
         border: 1px solid #ccc;
@@ -293,7 +290,6 @@ Components
         position: absolute;
         right: 9px;
         top: 9px;
-
         width: 16px;
         height: 16px;
     }
@@ -332,7 +328,6 @@ Components
         > a {
             display: inline-block;
             padding: 5px 14px;
-
             background-color: #fff;
             border: 1px solid #ddd;
             border-radius: 15px;

themes/daux/less/_homepage.less

@@ -39,13 +39,14 @@ Homepage
 .Homepage {
     padding-top: 60px !important;
     background-color: @light;
-    .kill-box-shadow;
     border-radius: 0;
     border: none;
     color: @dark;
     overflow: hidden;
     padding-bottom: 0;
     margin-bottom: 0;
+
+    .kill-box-shadow;
 }
 
 .HomepageTitle {
@@ -73,19 +74,18 @@ Homepage
 
     .Button--hero {
         padding: 20px 30px;
-        .kill-background-image;
-        .kill-box-shadow;
         border-radius: 0;
         text-shadow: none;
-        border: none;
         opacity: 0.8;
         margin: 0 10px;
         text-transform: uppercase;
         border: 5px solid @dark;
-
         font-family: @font-family-heading;
         font-weight: 700;
 
+        .kill-background-image;
+        .kill-box-shadow;
+
         @media (max-width: 768px) {
             display: block;
             margin-bottom: 10px;
@@ -119,7 +119,6 @@ Homepage
         .col-third {
             width: 33.333333%;
             float: left;
-
             position: relative;
             min-height: 1px;
             padding-left: 15px;
@@ -164,11 +163,12 @@ Homepage
 
 .HomepageFooter {
     background-color: @dark;
-    .kill-box-shadow;
     border-radius: 0;
     color: @light;
     border: none;
 
+    .kill-box-shadow;
+
     @media (max-width: 768px) {
         padding: 0 20px;
         text-align: center;
@@ -195,7 +195,6 @@ Homepage
         li {
             a {
                 line-height: 32px;
-
                 font-size: 16px;
                 font-family: @font-family-heading;
                 font-weight: 700;

themes/daux/less/_mixins.less

@@ -55,6 +55,7 @@ Mixins
         content: " "; // 1
         display: table; // 2
     }
+
     &::after {
         clear: both;
     }

themes/daux/less/_print.less

@@ -0,0 +1,20 @@
+@import "../../common/less/_print.less";
+
+.Pager { display: none; }
+
+.Columns__right {
+    width: 100% !important;
+}
+
+.s-content a::after {
+    content: " (" attr(href) ")";
+    font-size: 80%;
+    word-wrap: break-word; /* break long urls that donìt fit the page width */
+}
+
+/* Anchors don't need that */
+.s-content a[href^="#"]::after { content: ""; }
+
+h1 a[href]::after {
+    font-size: 50%;
+}

themes/daux/less/_structure.less

@@ -46,11 +46,12 @@ html, body {
 
     &__trigger {
         padding: 7px 10px;
-        .kill-background-image;
-        .kill-box-shadow;
         background-color: @sidebar-hover;
         border: none;
 
+        .kill-background-image;
+        .kill-box-shadow;
+
         &--bar {
             display: block;
             width: 18px;
@@ -62,8 +63,8 @@ html, body {
         }
 
         &:hover {
-            .kill-box-shadow;
             background-color: @dark;
+            .kill-box-shadow;
 
             .icon-bar {
                 background-color: @light;
@@ -74,7 +75,6 @@ html, body {
 }
 
 @media screen and (min-width: 768px) {
-
     body {
         //Needed only for floating code blocks
         background-color: @light;
@@ -126,6 +126,7 @@ html, body {
 
         &__right {
             width: 75%;
+
             &__content {
                 padding: 20px;
                 min-height: 100%;
@@ -133,17 +134,3 @@ html, body {
         }
     }
 }
-
-@media print {
-    .Columns__right {
-        width: 100% !important;
-    }
-
-    h1 a[href]::after {
-        font-size: 50%;
-    }
-
-    .hidden-print {
-        display: none;
-    }
-}

themes/daux/less/_typography.less

@@ -6,7 +6,6 @@ body {
     font-family: @font-family-text;
     text-rendering: optimizeLegibility;
     font-smoothing: antialiased;
-
     font-size: 14px;
     line-height: 1.5;
 }
@@ -123,7 +122,7 @@ h1, h2, h3, h4, h5, h6 {
                 width: 50%;
                 border: none;
                 border-left: 10px solid white;
-                margin: 0 0 10px 0;
+                margin: 0 0 10px;
                 padding: 0;
 
                 code {

themes/daux/less/theme.less

@@ -18,3 +18,7 @@
 @import "_components.less";
 @import "_homepage.less";
 @import "../../common/less/vendor/highlight.less";
+
+@media print {
+    @import "_print.less";
+}

themes/daux_singlepage/less/_print.less

@@ -0,0 +1,6 @@
+
+@import "../../common/less/_print.less";
+
+a[href]::after {
+    content: " (" attr(href) ")";
+}

themes/daux_singlepage/less/main.less

@@ -1,8 +1,7 @@
 // Core variables and mixins
-@import "variables.less";
 @import "../../common/less/_fonts.less";
 @import "vendor/highlight.less";
-@import "typography.less";
+@import "_typography.less";
 
 * {
     -webkit-overflow-scrolling: touch;
@@ -55,5 +54,5 @@ img {
 }
 
 @media print {
-    @import "print.less";
+    @import "_print.less";
 }

themes/daux_singlepage/less/variables.less

@@ -1,2 +0,0 @@
-
-