Сайт вебмастера
CSS, HTML, LESS, SASS

Перенос макета сайта в HTML

Расскажу про одну методику, которая позволяет достаточно быстро перевести макет страницы в HTML-код прототипа. Читать

Базовые приёмы работы с CSS-переменными

CSS-переменные всё больше используются при вёрстке, поскольку это довольно удобный инструмент, упрощающий работу. Если не оглядываться на IE11, то css-переменные хорошо поддерживаются браузерами. Во всяком случае все современные версии без проблем. Читать

CSS-фреймворки Spectre и Milligram

Начну с истории. :-) Первая версии Bootsrtap'а была мало привлекательна. Вторая версия уже предлагала готовую типографику и ряд компонентов. С учётом сумасшедшего пиара со стороны Твиттера (это их разработка), Bootsrtap стал самым популярным css-фреймворком. Третья версия стала доделкой второй — чтобы было понятно — это 2013 год. Нельзя сказать, что код Bootsrtap'а идеальный — там очень много «косяков» и архитектурных просчётов, но это всё нивелировалось хорошей документацией и, опять же, сумасшедшим пиаром. Читать

Краткий обзор Tailwind CSS

Расскажу немного о Tailwind CSS, поскольку этот фреймворк позиционируется как утилитарный и мне интересен в сравнении и моими UniCSS и Berry CSS. Читать

Организация CSS-кода

Как правильно сгенерировать css-файлы, чтобы они положительно влияли на загрузку и при этом с ними удобно было бы работать? Такой вопрос неизбежно задаёт себе каждый верстальщик. Когда мы делаем какой-то свой личный проект, проблема не особо актуальна, но если речь идёт о чем-то публичном, то она обостряется. Читать

Изоляция CSS-стилей

Интересное видео опубликовал Вадим Макеев «Прототип изоляции стилей для Shower на веб-компонентах», где затрагивается вопрос изоляции css-стилей при верстке. Само видео посвящено одной из попыток реализации, но сама по себе тема (изоляции) мне кажется интересна, поскольку с ней сталкиваются практически каждый верстальщик. Читать

Как оценить качество html-верстки

В процессе обучения на html-курсах у меня постоянно возникает потребность оценивать качество html-верстки учеников. Данная тематика очень большая и неоднозначная: о неё спотыкались почти все, что так или иначе использует чужой код. Некоторые компании придумывают сложные чек-листы, чтобы хоть как-то форматизировать свои требования. Другие, наоборот, упрощают подход: сайт «не разваливается», уже хорошо. :-) Читать