Add breakpoints management librairies
Add grunt-contrib-compass (required) Edit gruntfile.js (add compass tasks) --don't forget to update bower componentspull/91/head
Benoit Favreault
Francis Lachapelle
parent
6153e88f62
commit
818af41ea6
|
|
@ -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']);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
|
|||
Loading…
Reference in New Issue