fix

gulpfile.js

@@ -4,7 +4,8 @@ const gulp = require('gulp');
 const less = require('gulp-less');
 const debug = require('gulp-debug');
 const sourcemaps = require('gulp-sourcemaps');
-const cssnano = require('gulp-cssnano');
+const cleanss = require('gulp-cleancss');
+const combineMq = require('gulp-combine-mq');
 const autoprefixer = require('gulp-autoprefixer');
 const rename = require('gulp-rename');
 const gulpIf = require('gulp-if');
@@ -41,7 +42,10 @@ gulp.task('less', function () {
     .pipe(autoprefixer({
       browsers: ['last 2 versions']
     }))
-    .pipe(cssnano())
+    .pipe(combineMq({
+      beautify: false
+    }))
+    .pipe(cleanss())
     .pipe(rename('style.min.css'))
     .pipe(debug({title: "RENAME:"}))
     .pipe(gulpIf(isDev, sourcemaps.write('.')))
@@ -53,9 +57,10 @@ gulp.task('less', function () {
 gulp.task('copy:css', function() {
   console.log('---------- копирование CSS');
   return gulp.src('src/css/*.css', {since: gulp.lastRun('copy:css')})
-    .pipe(cssnano({
-      discardUnused: false // не удалять неиспользованные конструкции
+    .pipe(combineMq({
+      beautify: false
     }))
+    .pipe(cleanss())
     .pipe(rename(function (path) {
       path.extname = '.min.css'
     }))

package.json

@@ -14,8 +14,9 @@
     "gulp": "github:gulpjs/gulp#4.0",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-cheerio": "^0.6.2",
+    "gulp-cleancss": "^0.2.2",
+    "gulp-combine-mq": "^0.4.0",
     "gulp-concat": "^2.6.0",
-    "gulp-cssnano": "^2.1.1",
     "gulp-debug": "^2.1.2",
     "gulp-file-include": "^0.13.7",
     "gulp-if": "^2.0.0",

src/less/blocks/grid.less

-.row {
-  .row();
-}

src/less/global_grid.less

+.row {
+  .row();
+}
+
+// Классы модульной сетки для XS — срабатывают на всех ширинах
+.make-column-list-general-rules(xs); // список всех селекторов .col-xs-... и их обще свойства
+.make-columns(@grid-columns, xs);    // ширины для каждого селектора .col-xs-... отдельно
+.make-offsets(@grid-columns, xs);    // левые отступы для каждого селектора .col-xs-offset-...
+
+// Классы модульной сетки для SM — срабатывают на ширине @screen-sm (по умолчанию: 480px)
+.make-column-list-general-rules(sm); // список всех селекторов .col-sm-... и их обще свойства
+@media (min-width: @screen-sm) {
+  .make-columns(@grid-columns, sm);  // ширины для каждого селектора .col-sm-... отдельно
+  .make-offsets(@grid-columns, sm);  // левые отступы для каждого селектора .col-sm-offset-...
+}
+
+// Классы модульной сетки для MD — срабатывают на ширине @screen-md (по умолчанию: 768px)
+.make-column-list-general-rules(md); // список всех селекторов .col-md-... и их обще свойства
+@media (min-width: @screen-md) {
+  .make-columns(@grid-columns, md);  // ширины для каждого селектора .col-md-... отдельно
+  .make-offsets(@grid-columns, md);  // левые отступы для каждого селектора .col-md-offset-...
+}
+
+// Классы модульной сетки для LG — срабатывают на ширине @screen-lg (по умолчанию: 992px)
+.make-column-list-general-rules(lg); // список всех селекторов .col-lg-... и их обще свойства
+@media (min-width: @screen-lg) {
+  .make-columns(@grid-columns, lg);  // ширины для каждого селектора .col-lg-... отдельно
+  .make-offsets(@grid-columns, lg);  // левые отступы для каждого селектора .col-lg-offset-...
+}
+
+// Классы модульной сетки для XL — срабатывают на ширине @screen-xl (по умолчанию: 1200px)
+.make-column-list-general-rules(xl); // список всех селекторов .col-xl-... и их обще свойства
+@media (min-width: @screen-xl) {
+  .make-columns(@grid-columns, xl);  // ширины для каждого селектора .col-xl-... отдельно
+  .make-offsets(@grid-columns, xl);  // левые отступы для каждого селектора .col-xl-offset-...
+}
+
+// Классы модульной сетки для XXL — срабатывают на ширине @screen-xxl (по умолчанию: 1890px)
+// .make-column-list-general-rules(xxl); // список всех селекторов .col-xxl-... и их обще свойства
+// @media (min-width: @screen-xxl) {
+//   .make-columns(@grid-columns, xxl);  // ширины для каждого селектора .col-xxl-... отдельно
+//   .make-offsets(@grid-columns, xxl);  // левые отступы для каждого селектора .col-xxl-offset-...
+// }

src/less/global.less → src/less/global_scaffolding.less

+//------------------------------------------------------------------------------
+//  Общие правила
+//------------------------------------------------------------------------------
+
 // Make viewport responsive
 // see http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
 @at-root {
@@ -35,6 +39,10 @@ textarea {
 
 
 
+//------------------------------------------------------------------------------
+//  Теги: общее и типографика
+//------------------------------------------------------------------------------
+
 *, *:before, *:after {
   box-sizing: inherit;
 }

src/less/mixins/mixins.less

@@ -102,7 +102,7 @@
 
 
 //------------------------------------------------------------------------------
-//  Генератор списка селекторов .col-[]-[] и их общих свойств
+//  Генератор списка селекторов .col-[указанный тип]-[] и их общих свойств
 //------------------------------------------------------------------------------
 //  Принимает:
 //  @screen:      xs          - тип сетки [xs|sm|md|lg|xl|xxl]
@@ -131,16 +131,16 @@
 
 
 //------------------------------------------------------------------------------
-//  Генератор селекторов .col-[]-[] и их индивидуальных свойств (ширин)
+//  Генератор селекторов .col-[указанный тип]-[] и их индивидуальных свойств (ширин)
 //------------------------------------------------------------------------------
 //  Принимает:
 //  @n:                       - количество колонок
 //  @screen:                  - тип сетки [xs|sm|md|lg|xl|xxl]
 //------------------------------------------------------------------------------
 
-.make-columns(@n, @screen, @i: 1) when (@i =< @n) {
+.make-columns(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
   .col-@{screen}-@{i} {
-    .make-col(@i, @grid-columns, false)
+    .make-col(@i, @n, false)
   }
   .make-columns(@n, @screen, (@i + 1));
 }
@@ -155,7 +155,7 @@
 //  @screen:                  - тип сетки [xs|sm|md|lg|xl|xxl]
 //------------------------------------------------------------------------------
 
-.make-offsets(@n, @screen, @i: 1) when (@i =< @n) {
+.make-offsets(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
   .col-@{screen}-offset-@{i} {
     margin-left: (@i * 100% / @n);
   }

src/less/style.less

 @import "variables.less";
 @import "mixins/mixins.less";
 
-@import "global.less";
+@import "global_scaffolding.less";
+@import "global_grid.less";