Add breakpoints management librairies

Add grunt-contrib-compass (required)
Edit gruntfile.js (add compass tasks)

--don't forget to update bower components

UI/WebServerResources/scss/components/button/_button.scss

@@ -98,7 +98,6 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
 
 // NiceToHave: some horizontal or left hand side variant
 
-
 .sg-icon-bar *.button {
   display: block;
 }

UI/WebServerResources/scss/core/variables.scss

@@ -49,15 +49,25 @@ $md-base-margin: $layout-gutter-width;
 // alias
 $mg: $layout-gutter-width;
 
+// angular-material share breakpoint values between sass and js files (/core/constant.js)
+// we might consider using a sass library to import values as json single source for both
+
 $layout-breakpoint-sm:     600px !default;
 $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 
 // Redefinitions
 // $layout-breakpoint-sm:     360px;
-$layout-breakpoint-md:     1025px;
+$layout-breakpoint-md:     1024px;
 $layout-breakpoint-lg:     1280px;
 
+// Passing to breakpoint-slicer
+$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
+$slicer-breakpoint-names: 'phones' 'tablets' 'laptops' 'desktops';
+
+$media-pointer: (pointer fine);
+
+
 // App bar variables
 $app-bar-height: $sg-md-grid-pitch;
 

UI/WebServerResources/scss/styles.scss

@@ -7,11 +7,14 @@
 *
 **/
 
-@import 'core/variables'; // Will be replace by a complete 'config file
-
-// Compass import - comment-out if needed
+// Compass extension imports - comment-out if needed
 // ------------------------------------------------------------------------------
-@import '../bower_components/compass-mixins/lib/_compass';
+@import '_breakpoint-slicer.sass';
+@import '_breakpoint.scss', '_sassy-maps.scss';
+// This is no longer required because we use grunt-contrib-compass (ruby required)
+//@import '_compass.scss';
+
+@import 'core/variables'; // Will be replace by a complete 'config file
 
 // Browser reset - most effective for applications. Generated by Compass in a non-regular way
 // ------------------------------------------------------------------------------