Noissue - Added configurable breakpoints and phablet widths to grid

scss/_grid.scss

 /*!
  * This file is part of website-defaults
  * Copyright (C) 2016-present eyeo GmbH
  *
  * website-defaults is free software: you can redistribute it and/or
  * modify it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * website-defaults is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /*******************************************************************************
  * Grid component
  ******************************************************************************/
 
+$half-breakpoint: $tablet-breakpoint !default;
+$third-breakpoint: $desktop-breakpoint !default;
+$fourth-breakpoint: $desktop-breakpoint !default;
+
 /**
  * - .row contains one or more .column(s)
  * - .row clears .column(s)
  * - .row negates the left & right padding of it's left-most & right-most
  *   .column(s) while preserving consistent padding between .column(s)
  */
 .row
 {
   margin: 0px (-$small-space);
 }
@@ skipping 27 matching lines @@
 {
   float: left;
 }
 
 .reverse .column,
 [dir="rtl"] .column
 {
   float: right;
 }
 
-@media(min-width: $tablet-breakpoint)
+@media(min-width: $half-breakpoint)
 {
+  .one-half,
   .one-fourth
   {
     width: 50%;
   }
 }
 
-@media(min-width: $desktop-breakpoint)
+@media(min-width: $third-breakpoint)
 {
-  .one-half
-  {
-    width: 50%;
-  }
-
   .one-third
   {
     width: 33.333333%;
   }
 
   .two-thirds
   {
     width: 66.666667%;
   }
+}
 
+@media(min-width: $fourth-breakpoint)
+{
   .one-fourth
   {
     width: 25%;
   }
 
   .three-fourths
   {
     width: 75%;
   }
 }