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

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

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

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

Разметка за неравномерными блоками изображений

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

На мозаичной странице большую часть веса обычно занимают следующие разделы:

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

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

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

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

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

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

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

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