LupusNobilis/sogo
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add breakpoints management librairies

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

--don't forget to update bower components
This commit is contained in:
Benoit Favreault 2015-03-24 04:04:59 -04:00 committed by Francis Lachapelle
parent 6153e88f62
commit 818af41ea6
6 changed files with 156 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
UI/WebServerResources/Gruntfile.js
View file

@ -1,10 +1,43 @@
module.exports = function(grunt) {
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: {
loadPath: ['scss'],
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: {
@ -27,7 +60,7 @@ module.exports = function(grunt) {
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
grunt: {files: ['Gruntfile.js']},
sass: {
files: 'scss/**/*.scss',
@ -39,6 +72,7 @@ module.exports = function(grunt) {
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 = {
@ -66,7 +100,7 @@ module.exports = function(grunt) {
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];
var dest = options.js_dest + paths[paths.length - 1];
grunt.file.copy(src, dest);
grunt.log.ok("copy " + src + " => " + dest);
}
@ -81,7 +115,7 @@ module.exports = function(grunt) {
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];
var dest = options.fonts_dest + paths[paths.length - 1];
grunt.file.copy(src, dest);
grunt.log.ok("copy " + src + " => " + dest);
}
@ -95,13 +129,14 @@ module.exports = function(grunt) {
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];
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('default', ['build', 'watch']);
grunt.task.registerTask('css', ['sass', 'postcss']);
grunt.task.registerTask('sass-compass', ['compass:dev', 'postcss']);
};

5
UI/WebServerResources/bower.json
View file

@ -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"

3
UI/WebServerResources/package.json
View file

@ -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"

1
UI/WebServerResources/scss/components/button/_button.scss
View file

@ -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;
}

12
UI/WebServerResources/scss/core/variables.scss
View file

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

11
UI/WebServerResources/scss/styles.scss
View file

@ -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
// ------------------------------------------------------------------------------