Как установить и настроить адаптивную сетку smartgrid для работы?

Question

[Леонид Марков]

На вебинарах по адаптивной верстке Дмитрия Лаврика постоянно показывали верстку с использованием адаптивной сетки smartgrid. Вот ссылочка на github с данной сеткой: https://github.com/dmitry-lavrik/smart-grid
Я вот сколько ни бился, все никак не пойму, как эту сетку настроить для практического использования в рабочих проектах. Непонятно, что и где там прописать в gulpfile.js, как ее использовать с Sass. Может, кто уже пользуется ей - подскажите, пожалуйста, порядок ее развертывания на рабочем проекте

Answer 1

[Владимир Кашутин]

smart-grid на выходе создает файл (не пайпится), его подключаем в styl (sass, less) файле. Библиотека не умеет создавать папки, поэтому либо вручную создаем папку vendor, либо средствами gulp. Использую stylus, можете заменить его любым удобным Вам.

gulpfile.babel.js

import gulp   from 'gulp'
import stylus from 'gulp-stylus'
import grid   from 'smart-grid'
import del    from 'del'

const settings = {
    outputStyle: 'styl', /* less || scss || sass || styl */
    columns: 12, /* number of grid columns */
    offset: "30px", /* gutter width px || % */
    container: {
        maxWidth: '1200px', /* max-width оn very large screen */
        fields: '30px' /* side fields */
    },
    breakPoints: {
        lg: {
            'width': '1100px', /* -> @media (max-width: 1100px) */
            'fields': '30px' /* side fields */
        },
        md: {
            'width': '960px',
            'fields': '15px'
        },
        sm: {
            'width': '780px',
            'fields': '15px'
        },
        xs: {
            'width': '560px',
            'fields': '15px'
        }
    }
};

const paths = {
  styl: {
    vendor: './vendor/',
    src:    './src/**/*.styl',
    dest:   './dest'
  }
}

const clean = () => del([ 'dest' ])
export { clean }

export function init(cb){
  grid(paths.styl.vendor, settings)
  cb()
}

export function styl_build(){
  return gulp.src(paths.styl.src)
    .pipe(stylus({
        paths : [
          'src',
          'vendor'
       ]
     }))
    .pipe(gulp.dest(paths.styl.dest))
}

const build = gulp.series(
  clean,
  init,
  styl_build
)
export { build }

export default build

package.json

{
  "name": "template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp": "gulp"
  },
  "author": "Vsnegovik",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.22.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-stylus": "^2.6.0",
    "smart-grid": "^1.0.3",
    "del": "^2.2.2"
  }
}

.babelrc

{
  "presets": [ "es2015" ]
}

index.styl

@import smart-grid

.items
  row-flex()
  justify-content-md(center)

  .item
    col()
    col-3()
    col-md-5()
    col-xs-10()

Comments

[Владислав Хельсов]

Я установил smartgrid,при запуске gulp у меня на выходе создался smart-grid.scss,я его подключаю в моем файле style.scss через @import"smart-grid.scss"; ну и прописываю команды.
Но ничего не происходит.
Что я делаю не так?

[Леонид Марков]

А вы в терминале смотрели - там smartgrid включается вместе с остальными командами gulp ? Возможно, у вас где-то ошибка какая-то, что не идет компиляция. Либо вы просто указали неточный путь к файлу smartgrid.scss. Если у вас в gulp настроен watcher, вы в реальном времени можете видеть в терминале все изменения после очередного сохранения .scss или .html файла и там обязательно должен проскальзывать smartgrid независимо от того, прописывали ли вы его команды или нет в рабочем файле

[Владимир Кашутин]

Владислав Хельсов: Как советовали выше - проверьте путь по которому сохраняется smart-grid.scss. Если он создался, то gulp тут уже не при чем, вопрос в правильном подключении файла

[Владислав Хельсов]

Владимир Кашутин: я когда подключаю @import"smart-grid.scss" и при добавлении допустим класса .col(),.col-sx-12(),в консоле появляется ошибка при сохранении.
Вот консоль:
Error in plugin 'sass'
Message:
test/style.scss
Error: Invalid CSS after "...gin: 20px 20px;": expected "}", was ".col();"
on line 12 of test/style.scss
>> margin: 20px 20px;
---------------------^

[Владимир Кашутин]

Владислав Хельсов: Можно посмотреть SCSS код? Ругается на } может не закрыли или лишнюю написали?

[Владислав Хельсов]

Владимир Кашутин: да конечно:

@import "smart-grid.scss";
.product {
	color:red;

	&Name {
		color:green;
		font-size: 20px;
		margin-bottom: 10px;
	}

	&Item {
		margin: 20px 20px;
		.col();
		.col-xs-12();
	}
	&Sapog {
		border:20px;
		background-color: green;
	}
}

В общем,пришлось обратиться за советом к Дмитрию Лаврик, и в итоге всё заработало,т.к. у меня scss надо прописывать @include,в итоге вот так должен выглядеть код:

@import "smart-grid.scss";
.product {
	color:red;

	&Name {
		color:green;
		font-size: 20px;
		margin-bottom: 10px;
	}

	&Item {
		margin: 20px 20px;
			@include size(12);
			@include col();
			@include size-md(6);
			@include size-xs(2);
			@include size(2);
	}
	&Sapog {
		border:20px;
		background-color: green;
	}
}