Use Sass custom mixins for grid

app/Template/header.php

@@ -12,24 +12,15 @@
     )) ?>
 
 <header>
-    <div class="grid grid-reverse grid-noGutter">
+    <div class="title-container">
-        <?php if (! empty($board_selector)): ?>
+        <?= $_title ?>
-            <div class="col-1 col_xs-4 col_sm-3 col_md-3 col_lg-2 pull-right">
+    </div>
-                <?= $_top_right_corner ?>
+    <?php if (! empty($board_selector)): ?>
-            </div>
+    <div class="board-selector-container">
-            <div class="col-2 col_xs-8 col_sm-9 col_md-1 col_lg-1">
+        <?= $this->render('header/board_selector', array('board_selector' => $board_selector)) ?>
-                <?= $this->render('header/board_selector', array('board_selector' => $board_selector)) ?>
+    </div>
-            </div>
+    <?php endif ?>
-            <div class="col-9 col_xs-12 col_sm-12 col_md-8 col_lg-9">
+    <div class="menus-container pull-right">
-                <?= $_title ?>
+        <?= $_top_right_corner ?>
-            </div>
-        <?php else: ?>
-            <div class="col-2 col_xs-12 pull-right">
-                <?= $_top_right_corner ?>
-            </div>
-            <div class="col-10 col_xs-12">
-                <?= $_title ?>
-            </div>
-        <?php endif ?>
     </div>
 </header>

assets/sass/_header.sass

@@ -1,9 +1,37 @@
 @import variables
+@import mixins
 
 header
+  @include grid(100)
   margin-top: 5px
   margin-bottom: 5px
   border-bottom: 1px solid #dedede
+
+  .menus-container
+    @include grid_width(10/100)
+    @include md-device
+      @include grid_width(15/100)
+    @include sm-device
+      @include grid_width(65/100)
+      order: 2
+
+  .board-selector-container
+    @include grid_width(15/100)
+    @include md-device
+      @include grid_width(20/100)
+    @include sm-device
+      @include grid_width(35/100)
+      order: 1
+      margin-bottom: 5px
+
+  .title-container
+    @include grid_width(75/100)
+    @include md-device
+      @include grid_width(65/100)
+    @include sm-device
+      @include grid_width(1)
+      order: 3
+
   h1
     font-size: size('title')
     .tooltip

assets/sass/_mixins.sass

@@ -0,0 +1,25 @@
+@import variables
+
+@mixin xs-device
+  @media (max-width: #{$xs-device-width})
+    @content
+
+@mixin sm-device
+  @media (max-width: #{$sm-device-width})
+    @content
+
+@mixin md-device
+  @media (min-width: #{$sm-device-width}) and (max-width: #{$md-device-width})
+    @content
+
+@mixin grid($columns: 0)
+  box-sizing: border-box
+  display: flex
+  flex-wrap: wrap
+  > *
+    box-sizing: border-box
+  > *
+    width: (1/$columns) * 100%
+
+@mixin grid_width($width)
+  width: $width * 100%

assets/sass/_variables.sass

@@ -1,3 +1,7 @@
+$xs-device-width: 480px
+$sm-device-width: 768px
+$md-device-width: 1150px
+
 $colors: ('primary': #333, 'light': #999, 'dark': #000, 'medium': #555, 'error': #b94a48)
 $link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333)
 $background-colors: ('primary': #fbfbfb, 'light': #fcfcfc)

bower.json

@@ -9,7 +9,7 @@
   ],
   "dependencies": {
     "jquery": "^2.2.3",
-    "fullcalendar": "^2.7.1",
+    "fullcalendar": "^2.9.1",
     "chosen": "^1.5.1",
     "c3": "^0.4.11",
     "jquery-ui": "^1.11.4",
@@ -20,7 +20,6 @@
     "font-awesome": "fontawesome#^4.6.3",
     "d3": "~3.5.0",
     "isMobile": "0.4.0",
-    "select2": "4.0.1",
+    "select2": "4.0.1"
-    "gridlex": "^2.1.1"
   }
 }

gulpfile.js

@@ -22,8 +22,7 @@ var vendor = {
         'bower_components/fullcalendar/dist/fullcalendar.min.css',
         'bower_components/simplemde/dist/simplemde.min.css',
         'bower_components/font-awesome/css/font-awesome.min.css',
-        'bower_components/c3/c3.min.css',
+        'bower_components/c3/c3.min.css'
-        'bower_components/gridlex/dist/gridlex.min.css'
     ],
     js: [
         'bower_components/jquery/dist/jquery.min.js',