Бесит адаптивная вёрстка? Дизайнеры, требующие соблюдения сетки? Bootstrap, когда из-за его классов становился не виден остальной HTML-код? Тогда посмотрите данный курс и вы узнаете что такое удобная вёрстка. Новый способ, которому автор хочет вас научить, использует в себе всю мощь современных технологий: flexbox и функция calc из CSS3, один из препроцессоров на выбор (LESS, SCSS, SASS, Stylus), сборщик проектов gulp и пара его чудесных плагинов. Всё это даёт невероятный прирост в скорости и качестве вёрстки.
Содержание: 1. Урок Основы Flexbox Основная и вспомогательная оси Лёгкие вертикальные выравнивания Адаптивка без media-запросов Определение размера элементов
2. Урок Разбор домашних работ Прокачивание мастерства Flexbox Тонкости адаптивных реализаций Всевозможные выравнивания Слабости flexbox без media
3. Урок Node.js и NPM — основы магии Gulp — сборка проекта LESS — генератор CSS Group CSS Media Queries Autoprefixer — кроссбраузерность
4. Урок Основы CSS-препроцессоров Иерархическое написание Переменные и примеси Написание кода на LESS Написание кода на SASS (SCSS)
5. Урок Основы создания сетки Отступы в px или в % Margin и padding варианты npm i smartgrid — поехали! Настройка свойств сетки
6. Урок Вёрстка макета Оптимизация кода Иерархия селекторов vs BEM Дополнительные приёмы вёрстки Наслаждение результатом
SmartGrid 2 - Продвинутая вёрстка. Видеокурс (2019)
