structure

css/area_nav-usertools.less

@@ -0,0 +1,11 @@
+/**
+ * This file provides the design styles for the direct / menu jump links.
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+
+.nav-usertools {
+    ul{
+        float: right;
+    }
+}

css/base.less

@@ -7,22 +7,84 @@
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* global vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* fonts */
 @line-height-default: 125%;
 @line-height-big: 135%;
 @line-height-bigger: 140%;
 
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* breakpoints */
 @break-min-xxs: 480;
 @break-max-xxs: (@break-min-xxs - 1);
 
 @break-min-xs: 768;
 @break-max-xs: (@break-min-xs - 1);
 
+@break-min-sm: 992;
+@break-max-sm: (@break-min-xs - 1);
+
 @break-min-md: 1024;
 @break-max-md: (@break-min-md - 1);
 
-@break-min-lg: 1440;
+@break-min-lg: 1200;
 @break-max-lg: (@break-min-lg - 1);
 
+@break-min-xlg: 1440;
+@break-max-xlg: (@break-min-xlg - 1);
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries for breakpoints */
+
+@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
+@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
+
+@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
+@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
+
+@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
+@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
+
+@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
+@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
+@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
+
+@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
+@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
+
+@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
+@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* col width */
+@c12: 100%;
+@c11: 91.66666667%;
+@c10: 83.33333333%;
+@c9: 75%;
+@c8: 66.66666667%;
+@c7: 58.33333333%;
+@c6: 50%;
+@c5: 41.66666667%;
+@c4: 33.33333333%;
+@c3: 25%;
+@c2: 16.66666667%;
+@c1: 8.33333333%;
+
+@grid-columns: 12;
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* margin / padding */
+@margin-big: 2.5rem;
+
+
+
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -31,11 +93,12 @@ html, body{
     .reset();
 }
 
-header{
+header, .nav-direct{
     .elementsReset();
 }
 
 
+
 div, span, object,
 h1, h2, h3, h4, h5, h6, p, blockquote,
 a, abbr, em,acronym, img, strong,
@@ -103,7 +166,7 @@ header, footer, .container, .row, nav, nav > ul{
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* screen */
+/* screen only */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 
 @media screen{
@@ -255,7 +318,7 @@ header, footer, .container, .row, nav, nav > ul{
 }
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* print */
+/* print only */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @media print{
     body{

css/base_mixins.less

@@ -78,3 +78,31 @@
 }
 
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Col Grid */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+.make-grid(@class) {
+    .float-grid-columns(@class);
+    .loop-grid-columns(@grid-columns, @class, width);
+}
+
+.float-grid-columns(@class) {
+    .col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 {
+        float: left;
+    }
+}
+
+.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
+    .calc-grid-column(@index, @class, @type);
+    // next iteration
+    .loop-grid-columns((@index - 1), @class, @type);
+}
+
+.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
+    .col-@{class}-@{index} {
+        width: percentage((@index / @grid-columns));
+    }
+}
+
+
+

css/base_structure.less

@@ -3,3 +3,55 @@
  *
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
+
+
+/* Col Grid */
+.make-grid(xs);
+
+@media screen{
+    .container{
+        margin: 0 @margin-big;
+    }
+}
+
+@media @screen_min-xxs {
+    .container{
+        border: 1px solid deeppink;
+    }
+}
+
+@media @screen_min-xs {
+    .container{
+        border: 1px solid orangered;
+    }
+}
+
+@media @screen_min-sm {
+    .container{
+        border: 1px solid green;
+    }
+    .make-grid(sm);
+}
+
+@media @screen_min-md {
+    .container{
+        border: 1px solid blue;
+    }
+    .make-grid(md);
+}
+
+@media @screen_min-lg {
+    .container{
+        border: 1px solid blue;
+    }
+    .make-grid(lg);
+}
+
+@media @screen_min-xlg {
+    html{
+        font-size: 130%;
+    }
+    .container{
+        border: 1px solid red;
+    }
+}

css/plugins/magic-matcher.less

@@ -9,6 +9,7 @@
 /* magic matcher bar with form on top of page */
 
 #dokuwiki_magic-matcher{
+
     #magicmatcher__context{
         box-sizing: border-box;
         background-color: __nav_direct_background__;

lang/de/lang.php

@@ -9,8 +9,16 @@ $lang['direct_prefix']          = 'Direkt';
 $lang['direct_content_main']    = 'Hauptinhalt dieser Seite';
 $lang['direct_menu_main']       = 'Hauptmenü';
 
+$lang['nav-area-head']          = 'Navigationsmenüs und Suche';
+$lang['head_magic_matcher']     = 'MagicMatcher';
+
+
 $lang['discussion']             = 'Diskussion';
 $lang['back_to_article']        = 'Zurück zum Artikel';
 $lang['userpage']               = 'Benutzer-Seite';
+$lang['__existing__']           = 'The color for links to existing pages';
+$lang['__missing__']            = 'The color for links to non-existing pages';
+$lang['__site_width__']         = 'The width of the full site (can be any length unit: %, px, em, ...)';
+$lang['__sidebar_width__']      = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)';
 
 //Setup VIM: ex: et ts=2 :

lang/en/lang.php

@@ -8,6 +8,9 @@ $lang['direct_prefix']          = 'jump to';
 $lang['direct_content_main']    = 'main content';
 $lang['direct_menu_main']       = 'main menu';
 
+$lang['nav-area-head']          = 'menus and quick search';
+$lang['head_magic_matcher']     = 'MagicMatcher';
+
 $lang['discussion']             = 'Discussion';
 $lang['back_to_article']        = 'Back to article';
 $lang['userpage']               = 'User page';

main.php

@@ -106,58 +106,42 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* MagicMatcher */
+/* Headline Menu AREA */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
             ?>
 
-            <div id="dokuwiki_magic-matcher" class="magic-matcher no-print">
+            <div class="nav-area-head">
-                <div class="container">
+                <h5 class="sr-only" role="heading" aria-level="1"><?php echo tpl_getLang('nav-area-head') ?></h5>
-                    <?php
+            </div><!-- .nav-area-head -->
-                        $mm = plugin_load('helper', 'magicmatcher_context');
+
-                        if($mm){
-                            $mm->tpl();
-                        }
-                    ?>
-                </div><!-- .container -->
-            </div><!-- .magic-matcher -->
             <?php
 
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* MagicMatcher */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+            include('tpl/nav-magicmatcher.php');
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Include Hook: header.html */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
             tpl_includeFile('header.html');
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* Header */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
             ?>
 
             <div id="dokuwiki__header" class="header no-print">
                 <div class="container">
                     <div class="row">
-                        <?php if ($conf['useacl'] && $showTools): ?>
+                        <div class="col-xs-12">
+                        <?php
 
-                            <nav id="dokuwiki__usertools">
-                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['user_tools']; ?></h6>
-                                <ul>
-                                    <?php
-                                    if (!empty($_SERVER['REMOTE_USER'])) {
-                                        echo '<li class="user"><span class="sr-only">'.$lang['loggedinas'].' </span>'.userlink().'</li>';
-                                    }?>
-                                    <li class="log"><?php tpl_actionlink('login'); ?></li>
 
-                                    <?php tpl_toolsevent('usertools', array(
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                        'admin'     => tpl_action('admin', 1, 'li', 1),
+/* User Tools */
-                                        'userpage'  => _tpl_action('userpage', 1, 'li', 1),
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                        'profile'   => tpl_action('profile', 1, 'li', 1),
+                        include('tpl/nav-usertools.php'); ?>
-                                        'register'  => tpl_action('register', 1, 'li', 1),
+                        </div><!-- .col -->
-                                    )); ?>
+                    </div><!-- .row -->
-
-                                </ul>
-                            </nav><!-- #dokuwiki__usertools -->
-                        <?php endif ?>
-
-                    </div>
                 </div><!-- .container -->
 
             <div class="headings">

style.ini

@@ -62,6 +62,7 @@ css/area_content.less                 = all
 css/area_header.less                  = all
 css/area_footer.less                  = all
 css/area_nav-direct.less              = all
+css/area_nav-usertools.less           = all
 
 
 ; _____________  plugin styles _____________

tpl/nav-direct.php

@@ -12,7 +12,7 @@
                             <span class="skip">
                                 <a href="#content"><?php echo tpl_getLang('direct_content_main'); ?></a><span class="sr-out"> /</span>
                                 <a href="#dokuwiki__usertools"><?php echo $lang['user_tools']; ?></a><span class="sr-out"> /</span>
-                                <a href="#nav-main"><?php echo tpl_getLang('direct_menu_main');  ?>
+                                <a href="#nav-main"><?php echo tpl_getLang('direct_menu_main');  ?></a>
                             </span>
                         </p>
 

tpl/nav-magicmatcher.php

@@ -0,0 +1,19 @@
+<?php
+    if (!defined('DOKU_INC')) die();
+?>
+
+            <div id="dokuwiki_magic-matcher" class="magic-matcher no-print">
+                <div class="container">
+                    <?php
+                    $mm = plugin_load('helper', 'magicmatcher_context');
+                    if($mm){
+
+                        echo "<h6 class=\"sr-only\" role=\"heading\" aria-level=\"2\">";
+                        echo tpl_getLang('head_magic_matcher');
+                        echo "</h6>";
+
+                        $mm->tpl();
+                    }
+                    ?>
+                </div><!-- .container -->
+            </div><!-- .magic-matcher -->

tpl/nav-usertools.php

@@ -0,0 +1,24 @@
+<?php
+    if (!defined('DOKU_INC')) die();
+
+    if ($conf['useacl'] && $showTools): ?>
+
+                        <nav id="dokuwiki__usertools" class="nav-usertools">
+                            <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['user_tools']; ?></h6>
+                            <ul>
+                                <?php
+                                if (!empty($_SERVER['REMOTE_USER'])) {
+                                    echo '<li class="user"><span class="sr-only">'.$lang['loggedinas'].' </span>'.userlink().'</li>';
+                                }?>
+                                <li class="log"><?php tpl_actionlink('login'); ?></li>
+
+                                <?php tpl_toolsevent('usertools', array(
+                                    'admin'     => tpl_action('admin', 1, 'li', 1),
+                                    'userpage'  => _tpl_action('userpage', 1, 'li', 1),
+                                    'profile'   => tpl_action('profile', 1, 'li', 1),
+                                    'register'  => tpl_action('register', 1, 'li', 1),
+                                )); ?>
+
+                            </ul>
+                        </nav><!-- #dokuwiki__usertools -->
+<?php endif ?>