Стартовый шаблон OptimizedHTML 4 для верстки сайтов

Сегодня мы познакомимся со стартовым шаблоном для верстки сайтов OptimizedHTML 4. OptimizedHTML - это стартер, который подойдет для верстки практически любого проекта, значительно экономит ваше время в начале верстки и содержит набор базовых модулей. Стартовый шаблон основан на Gulp и его полезных модулях, таких, как BrowserSync, Sass, Uglify, CleanCSS, Autoprefixer для постобработки и Rsync для деплоя.
Страница урока: webdesign-mast...
Все курсы в одном комплекте: wd-m.ru/bundle
Веб-дизайн с нейросетями: wd-m.ru/design
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

[@denisodeniso5563]

Алексей огромное спасибо за ваши труды! По вашим урокам с нуля за один год, я набрал много опыта и знаний, теперь работаю в одной из крупных компаний в своем городе. Для верстальщика более качественного канала я еще не нашел, информация всегда полезная и актуальная)

[@gekaaaaa]

Теперь ждем джедай верстку с помощью этого шаблона.) спасибо за кучу полезного и интересного!

[@dev_academy]

Спасибо за твою работу. Так радует когда смотришь твои видео, сделано с душой и заботой. Еще раз спасибо

[@ДмитрийЧеканников-е7ъ]

я так iphone не ждал,как этот видос и шаблон!) Спа-си-бо!

[@КонстантинМанихин]

Отличные новости о выходе нового джедая вёрстки! Спасибо за такой полезный и качественный контент.

[@АртёмТриколич]

Автор, спасибо тебе за старания, делаешь безупречный контент: голос, подача, содержание. Порадовал пакет optimize, но хотелось бы наличие плагинов для сжатия изображения и возможности писать на scss. Желаю огромной монетизации этого проекта:)

[@РоманГрудій]

Спасибо за стартовый шаблон, а за шрифты отдельное спасибо!)

[@maxkrutov39]

Классно и познавательно! Автору спасибо. Очень хочется увидеть вёрстку с использованием Bootstrap 4!!!

[@k1te]

Для тех, кому нужны source-maps Ставим их npm install gulp-sourcemaps Добавляем в переменные: sourcemaps = require('gulp-sourcemaps'), В таске добавляем первой строчкой, прямо перед инициализацией sass .pipe(sourcemaps.init()) И перед gulp.dest добавляем .pipe(sourcemaps.write()) * Не забываем закоментить cleancss ** Если карты нужны отдельным файлом, то .pipe(sourcemaps.write('/'))

[@Andrii.88]

Как всегда - доступно, интересно. Контент очень качественный. Огромное спасибо.

[@Kensidan]

Здравствуйте, чтобы после каждой установки шаблона не приходилось обновлять компоненты надо в package.json у всех компонентов, кроме самого gulp, прописать latest, например - "gulp-sass": "latest". Тогда при каждой установке шаблона будут подтягиваться последние версии компонентов.

[@АнатолийВишняков-п6я]

Спасибо большое за уроки Алексей)

[@arhimed6720]

Спасибо дружище, как всегда шикарные уроки с грамотным объяснением!

[@tovjukov]

Супер. Ждем джедаев с нетерпением.

[@wdm]

Здравствуйте. Новый Джедай верстки уже на канале: kzbin.info/www/bejne/aYHdq41rmq17n8k

[@sergeyab9468]

Тупо лучший канал по вебу на русском ютубе

[@MsGodfather71]

))) три часа назад только скачал. И вот обзор. Спасибо!

[@papawebua]

Сапсибос!!! Всё круто. Как и в прошлых заготовках. Только по ним и работаю. Уже несколько проектов сделал на основе 4-й ))

[@PlanetEarth21]

Спасибо большое за помощь в освоении WEB

[@katerinam5502]

ура, дождалась. лайк не глядя. спасибо!

[@i_jon]

И да прибудет с вами сила!!!!

[@rusicsemenov]

Спасибо за труды, только вчера качнул третью.

[@unknownWakeborder]

Отлично) Спасибо огромное!

[@SergeyRosinskiy]

Спасибо за видео! Можно подробнее расписать как подключить вcе компоненты bootstrap ?

[@ЕвгенийБатулин-г9з]

Спасибо Алексей! Здорово!

[@alansituation]

Алексей, отличный шаблон, пользовался предыдущим для практики, так как пока только учусь. Спасибо за ваш труд! Когда примерно ожидать новые серии джедая верстки?

[@ДмитрийКузьминов-с7й]

Спасибо огромное за такой труд! Лучший канал по верстке на KZbin! #WebDesignMaster

[@Nikitich1988]

Хочется взять и обнять! Спасибо!

[@ВиталийГороховский-у5э]

За шрифты большое спасибо!

[@angryprops]

Спасибо за труды. Небольшой комментарий, будет отлично добавить туда какой нибудь хотя бы простенький шаблонизатор для html, для возможности выносить шапку и прочее

[@youngejuk]

поддерживаю!

[@angryprops]

да это понятно что есть варианты (еще например gulp-rigger и тд), просто раз тут бойлерплейт для верстки, хотелось бы иметь чтото подобное уже интегрированное в него из коробки, так как эта штука не менее необходимая

[@wdm]

Рассмотрю. Если Pug переименуют в что-то более серьезное или вернут Jade именование, включу. Но опять же эта возможность нужна не всем. Далеко не всем.

[@ВячеславКузьменко-д1е]

Не нравится названием Pug, есть более крутой шаблонизатор, для реальных пацанофф: nunjucks. :) Шаблонизаторы весьма полезны, значительно облегчает последующую натяжку на CMS. Я на своей сборке верстаю сразу под MODX, к примеру, практически не используя админку.

[@mistermurder1761]

Спасибо за труд!у меня была такая ситуация : скачал OptimizedHTML 4 с github,распаковал,проверил обновления выполнил npm i выдало ошибку npm WARN Invalid version: "4" поменял в package.json на 4.0.0 установилось нормально

[@wdm]

Спасибо за фидбек.

[@yurijol7814]

Алексей, огромное спасибо за Ваш труд! Всё очень понятно и доходчиво! Скажите, планируется выпуск 8 части "джедая вёрстки" и если да, то когда ориентировочно?

[@edwardleks8029]

Здравствуйте, огромное спасибо вам и вашему каналу, очень помог мне в развитии. Очень удобно и быстро работать. Но есть вопрос, я не могу заставить работать OptimizedHTML с GitHub (GitHub, GitHub Desktop, Vs итд.) Может будет у вас когда нибудь урок по подключению этого добра к GitHub. Было бы здорово ). Я сам не давно узнал об этом не особо разбираюсь. Удачи в развитии канала и в работе. Спасибо !

[@KirillGrudinskiy]

Алексей, а вы не думали кодировать шрифты в виде base64, каким-нибудь gulp плагином? Мне кажется, это положительно бы повлияло на производительность страницы и упростило стартовый шаблон. Что вы можете сказать по этому поводу?

[@АлексейВоробьев-к4х]

Алексей, а почему вы не используете gulp-plumber? Насколько я помню, в вашем шаблоне ошибка в js = падение галпа.

[@zerocool14pvo]

Привет, почему перешел на Visual Studio?

[@wdm]

Освежить рабочую обстановку ))

[@zerocool14pvo]

Я так и подумал!

[@ПашаКоляда-э1ы]

Очень спасибо за Ваш шаблон, только хотел спросить, как теперь можно добавлять свой медиа запрос на другой екран?Так как в media есть стартовые(lg,md...)

[@maxdzyubak]

Благодарю Алексей!

[@TyrboCreed]

Хотелось бы увидеть пример верстки с em/rem вместо пикселей, и какие подводные камни при этом.

[@evilstar933]

Раньше было 3 мета тега для изменения цвета вкладки в мобильных браузерах. Почему только 1 остался?

[@rusicsemenov]

Алексей, вот бы еще урок по bash, после установки не видит npm, node свою просит, поставил вроде, но npm так и не работает. Хотел попробовать, пока юзаю только cmd или powershell

[@voytya94]

оо)) есть что на ужин посмотреть))

[@MrRonnieJamesDio]

спасибо за труды, и хотелось бы туториал как под scss переделать ?

[@HilloSecond]

А если мне нужно минифицировать все *.sass кроме main.sass, По идеи если удалить outputStyle: 'expand' отключится минифицирование всех файлов но у меня даже так не получается, всё равно минификация срабатывает. У кого-то была похожая проблема?

[@sh4teen]

Лукас не глядя.

[@dmitriyminaev960]

Алексей, то есть для подключения допустим magnific-popup, мне требуется указать js в gulpfile и css подключить в libs.js?

[@creativepoint7652]

Алексей, используешь ли ты Gitify в проектах работы с MODX?

[@joxanp666]

а как этот шаблон потом внедрять во вреймворк, чет я сообразить не могу, то же Yii2?

[@savvakirichenko8419]

Алексей, а какие расширения стоят у Вас в VSCode? Если они конечно есть.

[@wdm]

Все настройки и обзор в этом видео: kzbin.info/www/bejne/gISqgZdnepZpY9E

[@Антон-о6к1у]

Алексей, если не секрет, вы используете уже flex-сетку в коммерческих проектах или ограничиваетесь отдельными ее возможностями и верстаете на float? (надеюсь понятно выразился)

[@wdm]

Здравствуйте. В коммерческих проектах я использую Bootstrap. В своих некоторых могу себе позволить изобрести велосипед на флексах, если наступает паранойя за размер ресурсов :-) Но, в основном Bootstrap сетка.

[@ПашаКоляда-э1ы]

Как можно получить оптимизированные файлы не используя build?И если нету хостинга для использования rsync?

[@sdsaasdasd4683]

Подскажите, а как без блока с интернет эксплорером?

[@GLIVI28]

Привет , всем! Подскажите пожалуйста начинающему, когда прописываю медиа запросы для меньших экранов - например делаю меньший шрифт для (xs)- то эти стили применяются и sm i lg ... Как ограничить стили только на конкретном экране?

[@maksimtroshkov173]

Как выполнить команду ncu в windows без использования linux-консоли?

[@ТімурПродащук]

использовать простую консольWindows

[@ВадимЯковенко-я1в]

Стили же можно и в подвал кинуть. PageSpeed Insights скажет "хорошая практика". Или нет?

[@АндрейРождественский-н8ъ]

Зачем подключать шрифт разной толщины? Когда можно подключить один Regular и в css свойствах добавлять fw?

[@zh_s]

Если ты не подключишь шрифты разной толщины fw ничего не будет делать)

[@АндрейРождественский-н8ъ]

Понял, спасибо

[@WebTarantul]

Алексей, спасибо за труды. Хотел спросить, а когда будет джедай 8? Спасибо!

[@wdm]

Здравствуйте. Новый Джедай верстки уже на канале: kzbin.info/www/bejne/aYHdq41rmq17n8k

[@MihailAbysmo]

Класс!

[@MrZvyagel]

Ждем свежего Джедая.

[@wdm]

Здравствуйте. Новый Джедай верстки уже на канале: kzbin.info/www/bejne/aYHdq41rmq17n8k

[@КАбрамян-ш4э]

Здравствуйте Алексей спасибо за новый урок ..я у вас уже учусь более полугода и уже начал делать реальные проект всегда ставлю like и подписан на ваш канал, я вот хочу знать можно использовать в bootstrap 10 колонок а не 12 ? так допустима на вертске по 10 колонок

[@wdm]

Да. Теперь можно.

[@gexplozer]

Плюсую за VS Code

[@HelmoDesigner]

Можете объяснить как работать с bower в этом проекте? Ни разу до этого с ним не сталкивался, заранее спасибо

[@aalolooo]

Извините, а можете дать ссылку на архив со шрифтами ?

[@wdm]

Она есть на странице урока, ссылка в описании.

[@aalolooo]

Нащел. Спасибо большое.

[@bogdanlischuk5745]

Клас,когда джедай выйдет?

[@wdm]

Новый джедай уже вышел: kzbin.info/www/bejne/aYHdq41rmq17n8k

[@pathliving]

всем привет, а есть видео, где автор советуют chrome расширения для веб-разработки или рассказывает какими сам пользуется?

[@zh_s]

Скажите, пожалуйста, почему вы предпочитаете пользоваться sass, а не scss? Есть какая-то причина или просто дело вкуса?) P.S: Спасибо за ваш труд)

[@wdm]

Дело вкуса конечно, технически разницы нет, возможности одинаковы в любом случае ))

[@tovjukov]

Огромное спасибо за ваш труд. Как называется тема для VSC?

[@wdm]

Default ))

[@tovjukov]

Давно не запускал значит ее ;)

[@splendorsmile]

Кто может подсказать? Как поменять $grid-gutter-width для других разрешений? Например на xl будет равен 20px, а на меньших разрешениях 4px

[@Saske4695]

Подскажите, пожалуйста, как забилдить проект всё таки локально? У меня мизерный проект, который я не могу выгрузить на хостинг. Я посмотрел видео по rsync и делал всё как на видео, но всё равно ничего не работает. Конечно понимаю, что дело в моих кривых руках, но разбираться в этом уже сил нет (2 дня потратил). Можно ли скопировать таск "build" c прошлых OptimizedHTML, предварительно подключив недостающий модуль "build" ? И спасибо большое за Ваши труды. Росту на вашем канале :)

[@wdm]

Конечно можно ))

[@proger3809]

Алексей, спасибо за шаблон! У кого при сохранении появляется "Error running gulp file to import not found or unreadable gulp-sass", перейдите во вкладку main.sass и повторно сохраните его. Тогда все сохранённые изменения в других sass-файлах применяться. Не правильно работали media - забыл поставить таб. Добавил em rem персчет в mixins/_font-face.sass несколько строк: $contextBase: 16px @function em($value, $context: $contextBase) @return ($value / $context) * 1em @function rem($value, $context: $contextBase) @return ($value / $context) * 1rem Алексей, Вы этой функцией для em больше не пользуетесь, появилась альтернатива?

[@sergey5806]

Круто, спасибо) Люди добрые, подскажите, как можно редактировать файлы через Gulp если он натянут на WоrdPress? Использовал предыдущую сборку, и нужно было вносить правки в WP. Вносил на локалке, потом заливал на сервер, ппц не удобно((

[@wdm]

kzbin.info/www/bejne/rXaQgJxuabp9jqc

[@sergey5806]

Спасибо, а получится таким способом подключаться по ftp или нужно локально разворачивать WordPress?

[@wdm]

Только локально следует работать. Локальное зеркало обязательно.

[@aniris825]

а как с авторскими правами? если я использую ваш шаблон, мне нужно на вас ссылаться?

[@wdm]

Нет. Не нужно.

[@Loopatiy]

Ребятки, а где шрифты, ;)?

[@Loopatiy]

_fonts4web.7z

[@wdm]

Поправил. На странице урока, ссылка в описании.

[@lifeinfrontend]

а как брейкпоинтами пользоваться

[@Arcanennik]

Почему от Sublime Text отказались?

[@АртёмТриколич]

У меня высвечивает сообщение: "[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)" Подскажите, что делать? у

[@wdm]

Ничего страшного. Скорее всего у вас не установлен браузер по-умолчанию в системе.

[@АртёмТриколич]

автор топ

[@AndrewYurchenko]

Попробовал но не работает медиа файл. Первый раз работаю по этому шаблону. Возможно, чего то недосказал автор. Но из коробки прописанные медиа точки не отрабатывают и не генерят общий css.

[@wdm]

Давно скачивали? Всё работает из коробки, скачайте свежую версию, обновите пакеты и попробуйте ещё раз.

[@AndrewYurchenko]

Спасибо. Попробую. Качал при его выходе. Хотя все обновлял пару дней назад. Возможно сборка первая.

[@AndrewYurchenko]

WebDesign Master извиняюсь, разобрался. Всё работает. Сразу не въехал просто в работу шаблона.

[@beladzed]

У меня по какой-то причине автоматически не открывает страницу в браузере, после команды gulp, хотя на старой версии все работает, в чем может быть проблема?

[@wdm]

Fixed.

[@beladzed]

WebDesign Master о, клёво, спасибо! А в чем была проблема? А то я колупался, не смог найти решение)

[@wdm]

Посмотрите параметры browsersync в gulpfile.

[@aldan4871]

Здравствуйте, есть готовый проект с подключенным бутстрапом, я переверстал одну страницу на вашем шаблоне как мне теперь не импортировать заново сетку а подключить тот бутстрап что используется в проекте ?

[@wdm]

Подключите по новому принципу, код особо не пострадает. Только необходимо будет поработать с классами hidden-*.

[@heilagr945]

Доброго времени суток. Столкнулся с такой проблемой. Если открывать страницы сайта не через локалхост, файлы css и js не подключаются. Делал тестовое задание для получения работы. Сомневаюсь что при проверке сайт запустят через локалхост. И хотел бы выразить благодарность Алексею за видео. Большое спасибо, реально много полезной информации и файлов. Обязательно куплю один из Ваших курсов.

[@wdm]

Здравствуйте. Просто удалите тег base в HTML файлах.

[@СемёнПрохоров-з6я]

Отзовись пожааалуйста. Я вот только не понимаю.Если мне нужна папка dist ? Он ее не компилит же.Тут через rsync,как я понял.Но что делать,если мне нужно,как было в других шаблонах,таких как из урока "Gulp для самых маленьких"

[@wdm]

Думаю, вам стоит изучить Gulp глубже, если возникают такие вопросы.

[@hatamsoyunov]

Спасибо за видео и за стартовый шаблон, уже делал несколько проектов на этом шаблоне )) Только один момент, может другие тоже сталкивались. Это скомпилированный один файл main.min.css и scripts.min.js, да, это круто, но когда проект большой и подключаемых jquery плагинов много (например 5-7 шт.) то компиляция уже не быстро происходить, 2-3 сек. это много. Кто то сталкивался с такой же ситуацией и как вы решили, поделитесь пожалуйста. Лично я сделал так, создал отдельный таск libs.min.css и libs.min.js где собираются только подключенные библиотеки, а свои кастомные стили и скрипты компилируется в отдельный файл (main.min.css и common.min.css), компиляция и перезапуск происходить моментально )) Но такой подход не сработал с четвёртым стартовым шаблоном, а именно новые переменные, пришлось отказаться от переменных для кастомизации bootsrap'а, так как все библиотеки сохраняется в отдельный файл, пока не нашел решение...

[@wdm]

Может дело в железе? Какой накопитель? Какой процессор?

[@hatamsoyunov]

WebDesign Master, Спасибо что ответил )) может быть, накопитель ssd, вот процессор маловат, мобильный i5 3его поколения (Asus K56cm), скорее всего это из-за старого ноута.

[@ДмитрийЧеканников-е7ъ]

Cпс,что подняли данную тему. Есть возможность отключить минификацию файлов css и js как минимум на время разработки? При написании скрипта не удобно отлавливать ошибки в консоли когда минифицированный файл js да и css заказчики просят зачастую возвращать им в обычном варианте,чтоб потом их ребята уже могли вносить мелкие правки после того как я сдам работу. Может я туплю где то и там все работает ок,помоги плиз.

[@hatamsoyunov]

Дмитрий Чеканников, во время разработки конечно можно отключить минимизацию, в таске комментировать плагин minify.

[@faqitechnology]

Здравствуйте. Скачал ваш шаблон и установил все пакеты через npm i. Но browser-sync почему-то не видит изменений в sсss файле. При этом если перезапустить gulp, то обновления применяются. html и js файлы обновляются на странице,а вот css(scss) нет. Я скачал старый шаблон, который приведен в уроке про Gulp. Ситуация таже. Пакеты обновил до последних, ничего не помогает. Может быть дело в ОС.

[@wdm]

обновился Browsersync и шаблон. Пробуйте. У меня все ок.

[@magurik-ay]

Здравствуйте, такой вопрос Почему без gulp, просто запустив index.html он запускается без стилей при css/main.min.css, только после указания полного пути все работает нормально, можно как-то это решить?

[@wdm]

Здравствуйте. Почитайте про тег base.

[@magurik-ay]

Как все легко оказывается, спасибо за ответ)

[@АндрейПашко-и3щ]

Спасибо за видео, хотелось бы увидеть ответы на вопросы)

[@salaxaddin7408]

как ипртировать все компоненты бутстрапа? @import "../libs/bootstrap/**/*";? - на это галп ругается

[@АндрійКирієнко-х2ь]

привет! 1) будет ли подключено в сборку функционал для ретина верстки, то как там плотность више и как я читал картинки и шрифт там в 2 раза больше, на работе требуют что би и под ретину тоже било круто. 2) будет ли переход на постЦсс то как у него другой подход и как по мне за ним будущее)

[@b.g.5106]

может быть я не перечитал предидущие комменты или ещё что пропустил, НО А вот фрейм под css-grid существует ли такой? и я думаю, что за ними будущее, ведь Grid Sass есть поддержка. Или я ошибаюсь?!

[@kirillshabanov9905]

А как подключается и работает ht.access?

[@wdm]

Здравствуйте. На сервере следует переименовать ht.access в .htaccess

[@mind_games77]

Почему новые media запросы работают не корректно с HTML font-size? Ставишь на md к примеру HTML font-size 55% и он становится на всех экранах таким

[@wdm]

Уточните - вы используете desktop first? На все это на каких? На sm тоже?

[@mind_games77]

Почему то +media-breakpoint-down(xl) брекпоинты не раскрываются в медиа запросы. В css файл они передаются как обычные стили без @media only screen and (max-width : 1200px)

[@АндрейРождественский-н8ъ]

Леха, а зачем в шаблоне присутствуют много файлов Bootstrap, хотя используются только 3. Можно удалить остальные?

[@wdm]

Они не включаются, пока их не используют. Соответственно ни нагрузки, ни влияния на результирующий файл нет. Кому-то может требуются дополнительные возможности.

[@АндрейРождественский-н8ъ]

Ну а в конечном результате они окажутся лишние... И их стоит удалить?

[@wdm]

Обычно компоненты обновляются. Если вы обновите Bootstrap в будущем, структура вернётся, так что не вижу ничего плохого в том, что несколько килобайт лежат в проекте. На результат это не влияет, а вот понадобиться что-то в процессе работы может.

[@АндрейРождественский-н8ъ]

Понятно, спасибо)) Будем ждать с нетерпением джедая...