Flexbox адаптивная сетка на sass. Как?

Question

[Денис Киселев]

Часто требуется делать сетки с разными отступами. Решил использовать готовые решения. Наткнулся на интересное готовое решение flexboxgrid-sass. Скачал, залил себе на локалхост, установил пакеты npm, bower, запускаю из папки gulp, но при изменении файла с конфигурацией сетки не генерируется css на выходе.

В чем может быть проблема? спасибо.

Comments

[Александр Плаксенко]

в руках?

[Денис Киселев]

Александр Плаксенко: а если по делу? с gulp столкнулся впервые, изучаю с мануалами

[Капитан Какао]

Как по мне всё это херня полнейшая.
Уже года 4 использую редактор кода Brackets и дополнение к нему Sass

Просто скачиваешь редактор кода, прям в нём в поиске расширений вводишь Sass устанавливаешь расширение "Brackets SASS". и Всё готово.

В папке проекта просто создаёшь файл с расширением .sass или .scss и плагин автоматом создаст файл с таким же названием но с расширением .css и будет в него в режиме реального времени компилировать всё что ты пишешь в sass и всё это работает в live previev.

Ну и видос как это работает.
https://www.youtube.com/watch?v=gYE7jybP_5Y

[zooks]

Rad Cor: Компиляция через плагины редактора - для слабаков.

[Денис Киселев]

Rad Cor: верстаю тоже в Brackets, sass скомпилировать не проблема. Суть в другом, gulp реально нужная вещь, очень упрощает работу.

У меня вопрос конкретно по модулю flexboxgrid-sass, как заставить его работать на своей машине и с легкостью генерировать свои сетки.

[Денис Киселев]

пути в gulpfile проверил, ошибок не заметил..
скриншот проекта:

gulpfile.js:

spoiler

/*global -$ */
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
jade = require('jade'),
gulpJade = require('gulp-jade');

jade.filters.code = function( block ) {
return block
.replace( /&/g, '&' )
.replace( /, '<' )
.replace( />/g, '>' )
.replace( /"/g, '"' );
};

gulp.task('jade:demo', function () {
return gulp.src('./demo/*.jade')
.pipe(gulpJade({
jade: jade,
pretty: true
}))
.pipe(gulp.dest('./demo/'));
});

gulp.task('styles:demo', function () {
return gulp.src('demo/sass/*')
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'nested',
precision: 10,
includePaths: ['.', 'bower_components'],
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('demo'));
});

gulp.task('styles:dist', function () {
return gulp.src('*.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'nested',
precision: 10,
includePaths: ['.', 'bower_components'],
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('dist'));
});

gulp.task('clean', require('del').bind(null, ['dist']));

gulp.task('watch', ['jade:demo', 'styles:demo', 'styles:dist'], function () {
// watch for changes
gulp.watch('demo/*.jade', ['jade:demo']);
gulp.watch('*.scss', ['styles:dist']);
gulp.watch('bower_components/**/*.scss', ['styles:dist']);
gulp.watch('demo/sass/*.scss', ['styles:demo']);
gulp.watch('bower.json', ['wiredep']);
});

// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;

gulp.src('src/sass/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('dist'));
});

gulp.task('default', function () {
gulp.start('watch');
});

Answer 1

[Денис Киселев]

Нашел причину. Если кому то нужен сборщик сеток - обращайтесь. помогу

Comments

[zooks]

На Тостере принято писать правильный ответ и закрывать вопрос.

Answer 2

[zooks]

Для сетки Sass обычно используются:

1. Susy
   
2. Bootstrap
   
3. Zurb Foundation