HTML5
JavaScript
Задача
Необходимо было выполнить редизайн раздела блога корпоративного сайта exyte.com/blog по предоставленному дизайн-макету.
Существующая версия страницы была построена с использованием Bootstrap. В рамках доработки требовалось отказаться от стандартной Bootstrap-сетки и реализовать новую адаптивную верстку с использованием CSS Grid.
Основная задача заключалась не только в визуальном обновлении страницы, но и в создании более гибкой структуры, которая корректно отображается на разных размерах экранов и сохраняет заданную дизайнером композицию.
Что было сделано
Была полностью переработана верстка основной страницы блога. Новая структура создавалась по предоставленному макету с сохранением отступов, пропорций элементов, размеров изображений, типографики и расположения контентных блоков.
Вместо Bootstrap Grid использован CSS Grid. Это позволило точнее управлять расположением элементов страницы и отказаться от лишней зависимости от классов Bootstrap при построении сетки.
Переход с Bootstrap на CSS Grid
Старая версия страницы использовала стандартную двенадцатиколоночную сетку Bootstrap. Для нового дизайна такой подход создавал дополнительные ограничения: необходимо было подстраивать макет под существующие колонки и использовать дополнительные обертки и классы.
Новая версия была реализована средствами CSS Grid. Для основных блоков страницы были настроены собственные сетки, ширина колонок, интервалы между элементами и правила перестроения в зависимости от доступной ширины экрана.
Такой подход позволил сделать верстку ближе к исходному дизайн-макету, уменьшить количество вспомогательной разметки и получить более гибкое поведение элементов на промежуточных разрешениях.
Верстка главного материала блога
Одним из центральных элементов страницы является крупная карточка выбранной публикации.
Для нее была разработана отдельная адаптивная структура: изображение публикации размещается рядом с заголовком, описанием и дополнительной информацией о материале.
На широких экранах элементы располагаются в две колонки, а при уменьшении ширины экрана постепенно перестраиваются в вертикальную композицию.
Отдельное внимание было уделено сохранению правильных пропорций изображения, положению текста и расстоянию между элементами.
Сетка остальных публикаций
Ниже основного материала располагается список других публикаций блога. Для него также была реализована Grid-сетка, которая автоматически перестраивается в зависимости от ширины экрана.
Количество колонок и размеры карточек изменяются адаптивно, без необходимости создавать отдельную версию разметки для каждого разрешения.
Это позволяет странице одинаково аккуратно выглядеть как на больших мониторах, так и на планшетах и смартфонах.
Адаптивная версия для 1440 px
Для экранов шириной около 1440 пикселей была реализована основная десктопная версия страницы.
На этом разрешении сохраняется полноценная композиция дизайн-макета: крупный материал располагается в две колонки, нижние публикации формируют горизонтальную сетку, а между элементами сохраняются увеличенные интервалы.
Адаптивная версия для 1024 px
Для планшетов и небольших ноутбуков шириной около 1024 пикселей были скорректированы размеры колонок, изображения и отступы.
При этом структура страницы остается узнаваемой и сохраняет основную логику десктопного варианта, но использует доступное пространство более компактно.
Мобильная версия для 375 px
Для смартфонов шириной около 375 пикселей была разработана отдельная логика расположения элементов.
Многоколоночные блоки преобразуются в одну колонку, изображения занимают доступную ширину контейнера, а заголовки и описания располагаются последовательно.
Также были уменьшены внешние и внутренние отступы, скорректированы размеры шрифтов и расстояния между публикациями.
Адаптация для промежуточных разрешений
Верстка создавалась не только для трех контрольных размеров 1440, 1024 и 375 пикселей.
CSS Grid и адаптивные правила были настроены таким образом, чтобы интерфейс плавно перестраивался и на всех промежуточных ширинах экрана.
Благодаря этому отсутствуют резкие переходы между версиями страницы, а контент не выходит за границы контейнеров и не образует непредусмотренных переносов.
Работа с изображениями
Для карточек публикаций было настроено корректное отображение изображений при разных пропорциях и размерах блоков.
Изображения масштабируются вместе с сеткой, сохраняя визуально аккуратное заполнение карточек и не нарушая структуру страницы.
Типографика и отступы
Большое внимание было уделено соответствию дизайн-макету по типографике и геометрии элементов.
Были настроены размеры заголовков, межстрочные интервалы, ширина текстовых блоков, расстояния между изображениями, заголовками, описаниями и вспомогательными элементами.
Это особенно важно для минималистичного дизайна, где качество интерфейса во многом определяется именно точностью отступов и пропорций.
Результат
В результате была создана обновленная адаптивная версия блога, полностью соответствующая предоставленному макету.
Стандартная Bootstrap-сетка была заменена собственной системой на CSS Grid, благодаря чему верстка стала более гибкой и лучше соответствующей особенностям дизайна.
Страница корректно работает на больших мониторах, ноутбуках, планшетах и смартфонах, а также плавно адаптируется к промежуточным размерам экрана.
Использованные технологии
- HTML5;
- CSS3;
- CSS Grid;
- Flexbox для отдельных элементов интерфейса;
- адаптивная верстка;
- media queries;
- кроссбраузерная верстка.
