From 818af41ea61fc429df169987bf7f7dd4caa625d5 Mon Sep 17 00:00:00 2001 From: Benoit Favreault Date: Tue, 24 Mar 2015 04:04:59 -0400 Subject: [PATCH] Add breakpoints management librairies Add grunt-contrib-compass (required) Edit gruntfile.js (add compass tasks) --don't forget to update bower components --- UI/WebServerResources/Gruntfile.js | 231 ++++++++++-------- UI/WebServerResources/bower.json | 5 +- UI/WebServerResources/package.json | 3 +- .../scss/components/button/_button.scss | 1 - .../scss/core/variables.scss | 12 +- UI/WebServerResources/scss/styles.scss | 11 +- 6 files changed, 156 insertions(+), 107 deletions(-) diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js index 3e0b0874d..6f6a4f02e 100644 --- a/UI/WebServerResources/Gruntfile.js +++ b/UI/WebServerResources/Gruntfile.js @@ -1,107 +1,142 @@ module.exports = function(grunt) { - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - sass: { - options: { - loadPath: ['scss'], - style: 'expanded' - }, - dist: { - files: { - 'css/styles.css': 'scss/styles.scss' - } - } - }, - postcss: { - options: { - map: true, - processors: [ - require('autoprefixer-core')({browsers: '> 1%, last 2 versions, last 3 Firefox versions'}).postcss, - // We may consider using css grace (https://github.com/cssdream/cssgrace) for larger support - require('csswring').postcss - ] - }, - dist: { - src: 'css/styles.css' - } - }, - watch: { - grunt: { files: ['Gruntfile.js'] }, - - sass: { - files: 'scss/**/*.scss', - tasks: ['sass'] - } + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + compass: { + dist: { + options: { + sassDir: 'scss', + cssDir: 'css', + specify: 'scss/styles.scss', + outputStyle: 'compact', // will be compressed by postcss + environment: 'production' } - }); + }, + dev: { + options: { + force: true, + sassDir: 'scss', + cssDir: 'css', + importPath: [ + 'bower_components/compass-mixins/lib', + 'bower_components/compass-breakpoint/stylesheets', + 'bower_components/breakpoint-slicer/stylesheets', + 'bower_components/breakpoint-slicer/stylesheets/breakpoint-slicer', + 'bower_components/sassy-maps/sass' + ], + noLineComments: true, + sourcemap: true, + specify: 'scss/styles.scss', + raw: 'sass_options = {:cache => false\n}', + outputStyle: 'expanded' + } + } + }, + sass: { + options: { + cache: false, + loadPath: ['scss', 'bower_components/compass-mixins/lib', + 'bower_components/compass-breakpoint/stylesheets', + 'bower_components/breakpoint-slicer/stylesheets', + 'bower_components/sassy-maps/sass'], + style: 'expanded' + }, + dist: { + files: { + 'css/styles.css': 'scss/styles.scss' + } + } + }, + postcss: { + options: { + map: true, + processors: [ + require('autoprefixer-core')({browsers: '> 1%, last 2 versions, last 3 Firefox versions'}).postcss, + // We may consider using css grace (https://github.com/cssdream/cssgrace) for larger support + require('csswring').postcss + ] + }, + dist: { + src: 'css/styles.css' + } + }, + watch: { + grunt: {files: ['Gruntfile.js']}, - grunt.loadNpmTasks('grunt-contrib-sass'); - grunt.loadNpmTasks('grunt-postcss'); - grunt.loadNpmTasks('grunt-contrib-watch'); + sass: { + files: 'scss/**/*.scss', + tasks: ['sass'] + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-postcss'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-compass'); grunt.task.registerTask('static', function() { - var options = { - 'src': 'bower_components', - 'js_dest': 'js/vendor/', - 'fonts_dest': 'fonts/', - 'css_dest': 'css/' - }; - grunt.log.subhead('Copying JavaScript files'); - var js = [ - '<%= src %>/angular/angular{,.min}.js{,.map}', - '<%= src %>/angular-animate/angular-animate{,.min}.js{,.map}', - '<%= src %>/angular-sanitize/angular-sanitize{,.min}.js{,.map}', - '<%= src %>/angular-aria/angular-aria{,.min}.js{,.map}', - '<%= src %>/angular-material/angular-material{,.min}.js{,.map}', - '<%= src %>/angular-ui-router/release/angular-ui-router{,.min}.js', - '<%= src %>/angular-recursion/angular-recursion{,.min}.js', - '<%= src %>/angular-vs-repeat/src/angular-vs-repeat{,.min}.js', - '<%= src %>/angular-file-upload/angular-file-upload{,.min}.js{,map}', - '<%= src %>/ng-tags-input/ng-tags-input{,.min}.js', - '<%= src %>/underscore/underscore-min.{js,map}' - ]; - for (var j = 0; j < js.length; j++) { - var files = grunt.file.expand(grunt.template.process(js[j], {data: options})); - for (var i = 0; i < files.length; i++) { - var src = files[i]; - var paths = src.split('/'); - var dest = options.js_dest + paths[paths.length-1]; - grunt.file.copy(src, dest); + var options = { + 'src': 'bower_components', + 'js_dest': 'js/vendor/', + 'fonts_dest': 'fonts/', + 'css_dest': 'css/' + }; + grunt.log.subhead('Copying JavaScript files'); + var js = [ + '<%= src %>/angular/angular{,.min}.js{,.map}', + '<%= src %>/angular-animate/angular-animate{,.min}.js{,.map}', + '<%= src %>/angular-sanitize/angular-sanitize{,.min}.js{,.map}', + '<%= src %>/angular-aria/angular-aria{,.min}.js{,.map}', + '<%= src %>/angular-material/angular-material{,.min}.js{,.map}', + '<%= src %>/angular-ui-router/release/angular-ui-router{,.min}.js', + '<%= src %>/angular-recursion/angular-recursion{,.min}.js', + '<%= src %>/angular-vs-repeat/src/angular-vs-repeat{,.min}.js', + '<%= src %>/angular-file-upload/angular-file-upload{,.min}.js{,map}', + '<%= src %>/ng-tags-input/ng-tags-input{,.min}.js', + '<%= src %>/underscore/underscore-min.{js,map}' + ]; + for (var j = 0; j < js.length; j++) { + var files = grunt.file.expand(grunt.template.process(js[j], {data: options})); + for (var i = 0; i < files.length; i++) { + var src = files[i]; + var paths = src.split('/'); + var dest = options.js_dest + paths[paths.length - 1]; + grunt.file.copy(src, dest); grunt.log.ok("copy " + src + " => " + dest); - } - } - grunt.log.subhead('Copying font files'); - var fonts = [ - '<%= src %>/ionic/release/fonts/ionicons.*', - '<%= src %>/material-design-iconic-font/fonts/Material-Design-Iconic-Font.*' - ]; - for (var j = 0; j < fonts.length; j++) { - var files = grunt.file.expand(grunt.template.process(fonts[j], {data: options})); - for (var i = 0; i < files.length; i++) { - var src = files[i]; - var paths = src.split('/'); - var dest = options.fonts_dest + paths[paths.length-1]; - grunt.file.copy(src, dest); + } + } + grunt.log.subhead('Copying font files'); + var fonts = [ + '<%= src %>/ionic/release/fonts/ionicons.*', + '<%= src %>/material-design-iconic-font/fonts/Material-Design-Iconic-Font.*' + ]; + for (var j = 0; j < fonts.length; j++) { + var files = grunt.file.expand(grunt.template.process(fonts[j], {data: options})); + for (var i = 0; i < files.length; i++) { + var src = files[i]; + var paths = src.split('/'); + var dest = options.fonts_dest + paths[paths.length - 1]; + grunt.file.copy(src, dest); grunt.log.ok("copy " + src + " => " + dest); - } - } - grunt.log.subhead('Copying CSS files'); - var css = [ - '<%= src %>/ng-tags-input/ng-tags-input*.css' // This is no longer needed, ng-tags css is integrated to scss - ]; - for (var j = 0; j < css.length; j++) { - var files = grunt.file.expand(grunt.template.process(css[j], {data: options})); - for (var i = 0; i < files.length; i++) { - var src = files[i]; - var paths = src.split('/'); - var dest = options.css_dest + paths[paths.length-1]; - grunt.file.copy(src, dest); + } + } + grunt.log.subhead('Copying CSS files'); + var css = [ + '<%= src %>/ng-tags-input/ng-tags-input*.css' // This is no longer needed, ng-tags css is integrated to scss + ]; + for (var j = 0; j < css.length; j++) { + var files = grunt.file.expand(grunt.template.process(css[j], {data: options})); + for (var i = 0; i < files.length; i++) { + var src = files[i]; + var paths = src.split('/'); + var dest = options.css_dest + paths[paths.length - 1]; + grunt.file.copy(src, dest); grunt.log.ok("copy " + src + " => " + dest); - } - } - }); - grunt.task.registerTask('build', ['static', 'sass']); - grunt.task.registerTask('default', ['build','watch']); - grunt.task.registerTask('css', ['sass', 'postcss']); + } + } + }); + grunt.task.registerTask('build', ['static', 'sass']); + grunt.task.registerTask('default', ['build', 'watch']); + grunt.task.registerTask('css', ['sass', 'postcss']); + grunt.task.registerTask('sass-compass', ['compass:dev', 'postcss']); }; diff --git a/UI/WebServerResources/bower.json b/UI/WebServerResources/bower.json index 23fda12ff..94d805f1a 100644 --- a/UI/WebServerResources/bower.json +++ b/UI/WebServerResources/bower.json @@ -12,8 +12,9 @@ "angular-material": "master", "material-design-iconic-font": "latest", "ng-tags-input": "latest", - "compass-mixins": "~0.12.3", - "underscore": "latest" + "compass-mixins": "latest", + "underscore": "latest", + "breakpoint-slicer": "~1.3.6" }, "resolutions": { "angular": "1.3.x" diff --git a/UI/WebServerResources/package.json b/UI/WebServerResources/package.json index 9c10c36ef..47bb6b6eb 100644 --- a/UI/WebServerResources/package.json +++ b/UI/WebServerResources/package.json @@ -2,11 +2,12 @@ "name": "sogo-web", "version": "0.0.1", "devDependencies": { - "bower": ">=1.3.8", "autoprefixer-core": ">=5.1.0", + "bower": ">=1.3.8", "csswring": ">=3.0.0", "grunt": ">=0.4.1", "grunt-cli": ">=0.1.11", + "grunt-contrib-compass": "^1.0.1", "grunt-contrib-sass": ">=0.8.0", "grunt-contrib-watch": ">=0.5.3", "grunt-postcss": "^0.3.0" diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss index dcff837c8..d3883ed0c 100644 --- a/UI/WebServerResources/scss/components/button/_button.scss +++ b/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; } diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss index 431bc4ff4..de3e74ad8 100644 --- a/UI/WebServerResources/scss/core/variables.scss +++ b/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; diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss index 749402597..7596ca74e 100755 --- a/UI/WebServerResources/scss/styles.scss +++ b/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 // ------------------------------------------------------------------------------