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__;