[Практика] Smart Grid CSS + Основы Node/NPM/Gulp

Показать описание

Рекомендации по теме

Комментарии

Приятно видеть, что не ты один тупишь на работе))

Lumierka

Просто бомбовое видео для только вскочившего на поезд! Изучаю технологии верстки. Ваше видео прямо сильно помогло. В связке с php storm огонь решение! Попробовал добавить смарт грид под битриксом. все работает. там только один нюанс. корнем "проекта" будет папка шаблона сайта. столкнулся с ошибками при компиляции некоторых миксинов, например wrapper. В целом всем настоятельно рекомендую!

egolege

Очень удобная сетка, более 7 месяцев использовал в практической работе. Меньше мусора в коде. Ваше видео еще не смотрел, но думаю будет интересно.

velessn

Привет, Андрей. Помню смотрел подобный урок у Лаврика, он там вкратце рассказывал про gulp, node и его этот smart grid, но многое пришлось самому читать/искать. А у тебя все структурировано и понятно получается изложить. Спасибо за мастер класс)

crashmix

после изменения в файле gulpfile.js где был прописан параметр "fields: 20px" нужно было просто пересохранить файл main.scss. Кстати, если вы внимательно посмотрите на видео, то видно что это свойство всё же заработало после того как Андрей прописал для .container{ @include lg(margin-left: 0;) @include lg(margin-left: 0;)} и просто сохранил файл main.scss. Это отлично видно на видео 2:03:51 строки кода с 81 по 83 и потом еще раз в инспекторе кода начиная с 2:04:25

olexandrivkainfo

был на курсе Лаврика по смартгриду. В целом он действительно понравился. Благодаря нему, собственно, понял что такое less\sass, flex )) Как по мне - продукт достоин, чтобы его использовать

Mexanikkmm

Если у Вас что-то не работает вставьте в gulpfile этот код:

Рылся 5 часов, чтобы у меня всё заработало.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var smartgrid = require('smart-grid');

/* It's principal settings in smart grid project */
var settings = {
outputStyle: 'scss', /* less || scss || sass || styl */
columns: 12, /* number of grid columns */
offset: '30px', /* gutter width px || % */
mobileFirst: false, /* mobileFirst ? 'min-width' : 'max-width' */
container: {
maxWidth: '1200px', /* max-width оn very large screen */
fields: '0' /* side fields */
},
breakPoints: {
lg: {
width: '1100px', /* -> @media (max-width: 1100px) */
fields: '20px'
},
md: {
width: '960px'
},
sm: {
width: '780px',
},
xs: {
width: '560px'
}
/*
We can create any quantity of break points.

some_name: {
width: 'Npx',
fields: 'N(px|%|rem)',
offset: 'N(px|%|rem)'
}
*/
}
};

smartgrid('./sass', settings);

gulp.task('sass', async function () {
gulp.src('./sass/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', async function () {
gulp.watch('./sass/**/*.scss', gulp.parallel('sass'));
});

СнегМороз

Еще проще открыть терминал из папки: shift + правая кнопка мыши на пустом месте в нужной папке --> открыть окно команд

elenakolycheva

Прива Андрей, сыроватая технология, Bootstrap по проще будет). Спасибо за урок.

dusheslov

Лаврик где то в своих курсах говорил, что fields не могут быть 0. Минимальное значение половина offset. Я думаю из-за этого не применились fields на lg-экране.

noiseless

Подскажи ты заранее прописывал для себя все эти миксины или это какой-то стандартный стэк миксинов?

ruslantsarenko

Почему, когда я решил писать не на scss, а на stylus, смарт-грид генерирует файл с расширением .styl, а не .css? Ничего не менял в исходниках, кроме, собственно "sass/scss" на "styl"

nonbreakingspace