by iamdroid: Added breakpoints. Updated Gulp.

.browserslistrc

@@ -0,0 +1,3 @@
+# Supported browsers
+
+> 1%

.theme-build.zsh.inc

@@ -0,0 +1,61 @@
+# Drupal theme watch/build with gulp
+#
+# get drupal version:
+# drush st --format=list drupal-version
+#
+# Drupal 8, get theme name:
+# drush cget system.theme default --format=string
+#
+# Drupal 8, get theme path:
+# drush dd $(drush cget system.theme default --format=string)
+#
+# Drupal 8, run gulp:
+# (cd $(drush dd $(drush cget system.theme default --format=string)) && gulp)
+# or:
+# gulp --cwd $(drush dd $(drush cget system.theme default --format=string))
+#
+# Drupal 8, run gulp build:
+# (cd $(drush dd $(drush cget system.theme default --format=string)) && gulp build)
+# or:
+# gulp build --cwd $(drush dd $(drush cget system.theme default --format=string))
+#
+# Drupal 7, get theme name:
+# drush vget theme_default --format=string
+#
+# Drupal 7, get theme path:
+# drush dd $(drush vget theme_default --format=string)
+#
+# Drupal 7, run gulp:
+# (cd $(drush dd $(drush vget theme_default --format=string)) && gulp)
+# or:
+# gulp --cwd $(drush dd $(drush vget theme_default --format=string))
+#
+# Drupal 7, run gulp:
+# (cd $(drush dd $(drush vget theme_default --format=string)) && gulp build)
+# or:
+# gulp build --cwd $(drush dd $(drush vget theme_default --format=string))
+#
+# Zsh function:
+
+function dtw() {
+  v=$(drush st --format=list drupal-version)
+  if [ ${v%%.*} -eq 8 ]; then
+    gulp --cwd $(drush dd $(drush cget system.theme default --format=string))
+  elif [ ${v%%.*} -eq 7 ]; then
+    gulp --cwd $(drush dd $(drush vget theme_default --format=string))
+  else
+    echo "Unsupported Drupal version";
+  fi
+}
+
+function dtb() {
+  v=$(drush st --format=list drupal-version)
+  if [ ${v%%.*} -eq 8 ]; then
+    gulp build --cwd $(drush dd $(drush cget system.theme default --format=string))
+  elif [ ${v%%.*} -eq 7 ]; then
+    gulp build --cwd $(drush dd $(drush vget theme_default --format=string))
+  else
+    echo "Unsupported Drupal version";
+  fi
+}
+

gulpfile.js

@@ -1,6 +1,4 @@
 var gulp = require('gulp');
-var watch = require('gulp-watch');
-var batch = require('gulp-batch');
 var sass = require('gulp-sass');
 var sasslint = require('gulp-sass-lint');
 var eslint = require('gulp-eslint');
@@ -17,62 +15,56 @@ var sassOptions = {
   includePaths: ['./node_modules/breakpoint-sass/stylesheets']
 };
 
-var autoprefixerOptions = {
-  browsers: ['> 1%']
-};
-
 // tasks
 
-gulp.task('sass', function () {
-  return gulp.src(SASS + '/**/*.scss')
+gulp.task('sass', done => {
+  gulp.src(SASS + '/**/*.scss')
     .pipe(sourcemaps.init())
     .pipe(sass.sync(sassOptions).on('error', sass.logError))
-    .pipe(autoprefixer(autoprefixerOptions))
+    .pipe(autoprefixer({}))
     .pipe(sourcemaps.write('../css'))
     .pipe(gulp.dest(CSS));
+  done();
 });
 
-gulp.task('sass-lint', function () {
-  return gulp.src(SASS + '/**/*.scss')
+gulp.task('sass-lint', done => {
+  gulp.src(SASS + '/**/*.scss')
     .pipe(sasslint())
     .pipe(sasslint.format())
-    .pipe(sasslint.failOnError());
+    .pipe(sasslint.failOnError())
+  done();
 });
 
-gulp.task('js-lint', function () {
-  return gulp.src(JS + '/**/*.js')
+gulp.task('js-lint', done => {
+  gulp.src(JS + '/**/*.js')
     .pipe(eslint())
     .pipe(eslint.format())
-    .pipe(eslint.failAfterError());
+    .pipe(eslint.failAfterError())
+  done();
 });
 
-gulp.task('imagemin', function() {
+gulp.task('imagemin', done => {
   gulp.src(IMG + '/src/*')
     .pipe(imagemin())
     .pipe(gulp.dest(IMG));
+  done();
 });
 
 // build without lint
 
-gulp.task('build', ['sass', 'imagemin']);
+gulp.task('build', gulp.series('sass', 'imagemin'));
 
 gulp.task('watch', function () {
-  watch(SASS + '/**/*.scss', batch(function (events, done) {
-    gulp.start('build', done);
-  }));
+  return gulp.watch(SASS + '/**/*.scss', gulp.series(gulp.series('sass', 'imagemin')));
 });
 
 // build with lint
 
-gulp.task('build-lint', ['sass-lint', 'sass', 'imagemin', 'js-lint']);
+gulp.task('build-lint', gulp.series('sass-lint', 'sass', 'imagemin', 'js-lint'));
 
 gulp.task('watch-lint', function () {
-  watch(SASS + '/**/*.scss', batch(function (events, done) {
-    gulp.start('build-int', done);
-  }));
+  return gulp.watch(SASS + '/**/*.scss', gulp.series(gulp.series('sass-lint', 'sass', 'imagemin', 'js-lint')));
 });
 
-// default task
-
-gulp.task('default', ['build', 'watch']);
-//gulp.task('default', ['build-lint', 'watch-lint']);
+gulp.task('default', gulp.series('build', 'watch'));
+// gulp.task('default', gulp.series('build-lint', 'watch-lint'));

material_base.info

@@ -39,3 +39,48 @@ regions[before_main] = Before main content
 regions[after_main] = After main content
 regions[content_secondary] = Content secondary
 regions[footer_content] = Footer content
+
+breakpoints[min_xs]   = 'all'
+breakpoints[ss]       = 'all and (min-width: 360px)'
+breakpoints[ms]       = 'all and (min-width: 480px)'
+breakpoints[xs]       = 'all and (min-width: 568px)'
+breakpoints[max_sm]   = 'all and (max-width: 767px)'
+breakpoints[sm]       = 'all and (min-width: 768px)'
+breakpoints[only_sm]  = 'all and (min-width: 768px) and (max-width: 991px)'
+breakpoints[max_md]   = 'all and (max-width: 991px)'
+breakpoints[md]       = 'all and (min-width: 992px)'
+breakpoints[only_smx] = 'all and (min-width: 768px) and (max-width: 1255px)'
+breakpoints[max_lg]   = 'all and (max-width: 1255px)'
+breakpoints[lg]       = 'all and (min-width: 1256px)'
+breakpoints[xl]       = 'all and (min-width: 1520px)'
+breakpoints[ll]       = 'all and (min-width: 1920px)'
+
+multipliers[min_xs][] = 1.5x
+multipliers[min_xs][] = 2x
+multipliers[min_xs][] = 2.5x
+multipliers[min_xs][] = 3x
+multipliers[ss][]     = 1.5x
+multipliers[ss][]     = 2x
+multipliers[ss][]     = 2.5x
+multipliers[ss][]     = 3x
+multipliers[ms][]     = 1.5x
+multipliers[ms][]     = 2x
+multipliers[ms][]     = 2.5x
+multipliers[ms][]     = 3x
+multipliers[xs][]     = 1.5x
+multipliers[xs][]     = 2x
+multipliers[xs][]     = 2.5x
+multipliers[xs][]     = 3x
+multipliers[max_sm][] = 1.5x
+multipliers[max_sm][] = 2x
+multipliers[max_sm][] = 2.5x
+multipliers[max_sm][] = 3x
+multipliers[sm][]     = 2x
+multipliers[only_sm][] = 2x
+multipliers[max_md][] = 2x
+multipliers[md][]     = 2x
+multipliers[only_smx][] = 2x
+multipliers[max_lg][] = 2x
+multipliers[lg][]     = 2x
+multipliers[xl][]     = 2x
+multipliers[ll][]     = 2x