Мозаика HTML шаблоны

Адаптивные мозаичные HTML-шаблоны

Мозаичный HTML-шаблон поставляется в виде файлов, которые можно открыть в редакторе: страница, таблица стилей и изображения, уже встроенные в секции разной ширины. Демонстрационный скриншот показывает один из вариантов расположения этих плиток. Все дальнейшие действия происходят в коде, поэтому исходные файлы стоит открыть еще до просмотра в браузере.

Большая часть работы выполняется на уровне контента. Фотографии заменяются, подписи переписываются, а карточки дублируются, как только галерея разрастается за пределы демоверсии.

Разметка за блоками изображений нестандартного размера

Плиточные композиции строятся совершенно по-разному, и эта разница становится заметной в тот момент, когда вы добавляете еще один элемент. Сетка, удерживаемая объединением столбцов и строк, продолжает работать при копировании карточки. Макет, зафиксированный жесткими отступами, требует ручных исправлений при каждом изменении.

Такие секции обычно берут на себя основную нагрузку на мозаичной странице:

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

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

Порядок в исходном коде на узких экранах

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

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

Редактирование примера кода без нарушения сетки плиток

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

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