лаврик, человек правильно сказал, на 1:04:00 типа из за пары иконок подключать целый шрифт, поэтому я советую в такой ситуации Fontello, там ты можешь из того же фонт авесом и других собрать СВОЙ шрифт, допустим что бы весь фонт авесом не тянуть пошел на фонтелло и закинул туда пару иконок и вес будет в разы меньше)
Хорошо что поддержку IE за 5мин оставил под конец, не дай бог заказчик такое увидит. Наплодили на Ютубе сайт за 1ч и сложилось у заказчиков такое мнение. А реальный средний, адаптивный проект, не меньше 8-12 дней, в 12ч рабочем режиме.
Добрый вечер. Дмитрий в первую очередь спасибо за качественные материалы - они действительно очень помогают. Такой вопрос - у меня в сборке используется модульна система. Таски имеют вид 'use strict'; module.exports = function() { $.gulp.task("TASK NAME"', function(cb) { return ... }); }; Как в таком случае правильно настроить таск для генерации грида? Можно ли вынести setting в отдельный файл? спасибо
Добрый день! Нельзя ли выложить исходники, используемые для начала проекта (src, gulpfile.js, package.json)? И дать ссылку для скачивания? ) Спасибо за уроки!
А в 2020 теперь оно еще и палит подсеть и при регистрации нового аккаунта (ессно не в том же браузере и не с теми же куками) любезно показывает мне мои проекты на просроченном аккаунте и предлагает заплатить ))) (Avocode)
Есть также похожие продукты типа "Avocode". "Zeplin" и "Sympli" c одним бесплатным проектом (в который можно загружать сколько угодно макетов) и поддержкой sketch и photoshop. По крайней мере не нужно будет постоянно триалить "Avocode".
а как обьединить классы? если писать например (width, 500px) то этот медиа запрос сформируется отдельно для block1 например, а что бы поставить этому блоку (height, 100px) например, то нужно делать второй запрос, который на выходе сформирует второй блок медиа для данного блока. Отсюда вопрос, можно ли обьединить эти два запроса в один?
вот пример +md(margin-top, 50px) для блока1 например и хочу ему высоту изменить, нужно еще запрос: +md(height, 50px)/ на выходе мы получим это как два медиа запроса на один блок
Теперь понял. github.com/dmitry-lavrik/smart-grid/releases/tag/1.0.4 - про примесь md-block, github.com/dmitry-lavrik/smart-grid/releases/tag/v.2.1.1 про её вызов, если препроцессор stylus.
Дмитрий, скажите пожалуйста, сейчас ведь в редакторах, например, в том же саблайне или атоме есть возможность подключить плагины которые будут делать ливрелоад в браузере, а так же собирать лесс файлы в цсс. Собственно вопрос вот в чём, почему галп а не плагины?
Потому что мы не зависим ни редактора, ни от плагинов, ни от их версий. Я могу просто передать gulpfile.js и package.json кому угодно, человек напишет npm i, потом gulp watch, и получит такие же возможности, даже если пишет код в обычном блокноте.
Как аналог (но более тяжелый) Avocode можно добавить c assets.adobe.com только там нет платной подписки, просто можно загрузить PSD и просматривать его как и у Avocode в браузере и он так же будет выдавать все цвета, размеры, шрифты и прочее. Вот пример загруженного в этот сервис проекта над которым работаю s.mail.ru/CzyK/CABHs9AeM
ну вообще смотри просто разные каналы или допустим порталы разные читай, новости там и т.д, и там люди рассказывают о всех новомодных крутых штуках, а так да смарт грид лаврик сделал и продвигает его, но инструмент хороший, я несколько проектов верстал на нем и остался доволен.
Только начинаю осваивать GULP. В большинстве статей встречал запись вида var smartgrid = recuire ('' ") в других const smartgrid = recuire ('' ") В чем разница, и как писать правильно? Может, кто-то подскажет?
Правильно var smartgrid = require() , const smartgrid = require(). можно использовать и var и const, это обьявление переменных в javascript. var(стандарт ecma script 5) используется в старых версиях nodejs, в новых можно использовать const.
скажем так, задавать кнопке точный размер это не всегда хорошо, ибо допустим текст на кнопке сменится и из 10 букв станет допустим 5, а ширина кнопки будет таже, и возможно это уже будеть выглядеть не очень, поэтому кнопки всегда верстаются через display: inline-block и допустим padding: 10px 40px, тогда ширина задается именно падингом и это правильно, на мобилках ты просто падинг уменьшаешь и всё если она не влезает или ещё что, т.е вообще с приходомов адаптивности указывать точную ширину и тем более высоту не всегда есть правильно, сначала нужно рассматривать вариант с падингами и т.д
Знающие люди помогите пожалуйста разобраться ставлю модуль Browser sync. Вписываю конфигурацию в gulpfilejs. Запускаю, в браузере выдает ошибку cannot get. Третий день делаю, не могу понять в чем проблема. Вот подробнее. Заранее благодарен.
Никогда не хватает времени на онлайн, но смотрю все с удовольствием. Дмитрий так держать! Молодец!
Спасибо за вебинар, осенью скорее всего запишусь к вам в обучение, так как будет 2 месяца времени свободного, вы отлично объясняете!
smart-grid - очень удобная и крутая вещь! Спасибо Дмитрий!
как всегда все супер, Дмитрий! с удовольствием смотрю все вебинары! очень полезно. спасибо!
Дмитрий - уровень Бог в верстке!
лаврик, человек правильно сказал, на 1:04:00 типа из за пары иконок подключать целый шрифт, поэтому я советую в такой ситуации Fontello, там ты можешь из того же фонт авесом и других собрать СВОЙ шрифт, допустим что бы весь фонт авесом не тянуть пошел на фонтелло и закинул туда пару иконок и вес будет в разы меньше)
тоже так делаю
Ребята, а css-спрайты вам ни о чем не говорят?
Хорошо что поддержку IE за 5мин оставил под конец, не дай бог заказчик такое увидит.
Наплодили на Ютубе сайт за 1ч и сложилось у заказчиков такое мнение.
А реальный средний, адаптивный проект, не меньше 8-12 дней, в 12ч рабочем режиме.
Нет, долго делаешь..
Да, по поводу IE я как-то погорячился, заказчики могут не так понять. Экраны бывают намного хуже тех, что были у нас в этом лендинге.
Как то так и у меня получается... Нужно расти и ускорятся)
Добрый вечер. Дмитрий в первую очередь спасибо за качественные материалы - они действительно очень помогают. Такой вопрос - у меня в сборке используется модульна система. Таски имеют вид
'use strict';
module.exports = function() {
$.gulp.task("TASK NAME"', function(cb) {
return ...
});
};
Как в таком случае правильно настроить таск для генерации грида?
Можно ли вынести setting в отдельный файл? спасибо
01:07:50 - pixel perfect.
какую же он годноту выпускает )))) огромное спасибо сам застрял в том веке когда еще inline и куча блоков было лигой ))) лайк однозначно!!!!
Avocode - хорошая штука, сам активно юзаю. gulp и less уже не актуальны, почему-то не используется Flex. А в целом автор излагает бодро, молодец.
что за глупое "уже не актуально" ? ещё как актуально.
пффф. галп не актуален, ахаха
Супер, кратко и понятно.
Дмитрий. Ставлю лайк. Счастья тебе) Скинь, пожалуйста, свою картинку-схему с 20й минуты.
Спасибо за труды. ))
Обязательно ли делать всегда present perfect?. На твоих курсах хорошо объясняешь флексы и верстку (красивую)
Добрый день!
Нельзя ли выложить исходники, используемые для начала проекта (src, gulpfile.js, package.json)? И дать ссылку для скачивания? )
Спасибо за уроки!
докладываю 2019-подтверждение почты требуется :D
А в 2020 теперь оно еще и палит подсеть и при регистрации нового аккаунта (ессно не в том же браузере и не с теми же куками) любезно показывает мне мои проекты на просроченном аккаунте и предлагает заплатить ))) (Avocode)
Когда следущий курс по smart-grid?
Есть также похожие продукты типа "Avocode". "Zeplin" и "Sympli" c одним бесплатным проектом (в который можно загружать сколько угодно макетов) и поддержкой sketch и photoshop. По крайней мере не нужно будет постоянно триалить "Avocode".
Так и не нужно триалить. Купил и пользуйся.
Пользуемся zeplin для "одного " проекта. Понравилось. - будем покупать
я уж испугался, что записи не будет))) вчера не дождался,заснул.
а как обьединить классы? если писать например (width, 500px) то этот медиа запрос сформируется отдельно для block1 например, а что бы поставить этому блоку (height, 100px) например, то нужно делать второй запрос, который на выходе сформирует второй блок медиа для данного блока. Отсюда вопрос, можно ли обьединить эти два запроса в один?
Эту задачу в данной сборке решает модуль gulp-group-css-media-queries - www.npmjs.com/package/gulp-group-css-media-queries
он обьединит классы одного разрешения монитора, но не группы, которые написаны с помощью grid
вот пример +md(margin-top, 50px) для блока1 например и хочу ему высоту изменить, нужно еще запрос: +md(height, 50px)/ на выходе мы получим это как два медиа запроса на один блок
Теперь понял. github.com/dmitry-lavrik/smart-grid/releases/tag/1.0.4 - про примесь md-block, github.com/dmitry-lavrik/smart-grid/releases/tag/v.2.1.1 про её вызов, если препроцессор stylus.
+md-block
color: red
padding: 20px
margin: 10px
вот так он все в один запрос пиханет?
Дмитрий, скажите пожалуйста, сейчас ведь в редакторах, например, в том же саблайне или атоме есть возможность подключить плагины которые будут делать ливрелоад в браузере, а так же собирать лесс файлы в цсс. Собственно вопрос вот в чём, почему галп а не плагины?
Потому что мы не зависим ни редактора, ни от плагинов, ни от их версий. Я могу просто передать gulpfile.js и package.json кому угодно, человек напишет npm i, потом gulp watch, и получит такие же возможности, даже если пишет код в обычном блокноте.
1:04:15 font awesome - фонт увесом! Ты серьезно, Карл, фонт увесом? :D
Как аналог (но более тяжелый) Avocode можно добавить c assets.adobe.com только там нет платной подписки, просто можно загрузить PSD и просматривать его как и у Avocode в браузере и он так же будет выдавать все цвета, размеры, шрифты и прочее. Вот пример загруженного в этот сервис проекта над которым работаю s.mail.ru/CzyK/CABHs9AeM
А в чем отличие smartgrid от bootstrap4?
пора уже webpack юзать, gulp можно как таскранер - иногда удобнее
верстальщикам галпа с головой.
как записаться на вебинар и как узнать когда следущие?
Да вчера также не успел к трансляции(
чем smart-grid лучше css grid?
Если не секрет откуда знать новые плюшки фреймворки и тд. Например смарт грид откуда узнали?
Я его не узнал) Я его создал) Это мой пакет на npm - www.npmjs.com/package/smart-grid
ну вообще смотри просто разные каналы или допустим порталы разные читай, новости там и т.д, и там люди рассказывают о всех новомодных крутых штуках, а так да смарт грид лаврик сделал и продвигает его, но инструмент хороший, я несколько проектов верстал на нем и остался доволен.
респект, облегчает работу)
Только начинаю осваивать GULP. В большинстве статей встречал запись вида
var smartgrid = recuire ('' ") в других const smartgrid = recuire ('' ") В чем разница, и как писать правильно? Может, кто-то подскажет?
Правильно var smartgrid = require() , const smartgrid = require(). можно использовать и var и const, это обьявление переменных в javascript. var(стандарт ecma script 5) используется в старых версиях nodejs, в новых можно использовать const.
Понятно. Спасибо.
Николай Салиндер а let smartgrid = require() будет работать?
А можно пожалуйста ссылку на хороший gulp-файл.
сам делай, больше сможешь.
12:24, 30:50 - Gulp.
26:45 - Emmet.
pod IE poyavilsya horizontalniy scroll...
Кто ответит буду благодарен, а почему на видео размер кнопки задается падингами, а не width?
Чтобы на маленьких экранах кнопка не плыла, и выглядела нормально
Спасибо.
скажем так, задавать кнопке точный размер это не всегда хорошо, ибо допустим текст на кнопке сменится и из 10 букв станет допустим 5, а ширина кнопки будет таже, и возможно это уже будеть выглядеть не очень, поэтому кнопки всегда верстаются через display: inline-block и допустим padding: 10px 40px, тогда ширина задается именно падингом и это правильно, на мобилках ты просто падинг уменьшаешь и всё если она не влезает или ещё что, т.е вообще с приходомов адаптивности указывать точную ширину и тем более высоту не всегда есть правильно, сначала нужно рассматривать вариант с падингами и т.д
Знающие люди помогите пожалуйста разобраться ставлю модуль Browser sync. Вписываю конфигурацию в gulpfilejs. Запускаю, в браузере выдает ошибку cannot get. Третий день делаю, не могу понять в чем проблема. Вот подробнее. Заранее благодарен.
путь неправильный к index.html
Да, уже давно разобрался :DDD Ох и нубас я был...
Почему когда был блок зелёный ты написал Макс ширина 2018 и падинг 15 если ширина была 2048? Или я не доглядел
Padding же с двух сторон. 2018 + 15 + 15 = 2048
Почему ты шрифты в px а не в em
А как в emmet код обратно перевести в аббревиатуру)?
Обычным откатом назад - комбинацией клавиш CTRL + Z
топ
adobe делал похожую вещь для онлайна типа того же avacode
Эвесом
Аналог avocode: assets.adobe.com/
+
не хак а костыль)
вы поняли о чем я говорю?
А как не сбиваются стили от флексбоксов если ты медиа не прописываешь как тогда медиа узнает какой экран у пользователя?