5 самых популярных паттернов отзывчивого веб-дизайна

Для того, чтобы окончательно для себя закрепить тему responsive дизайна, я решил создать этот небольшой сайт, отображающий 5 наиболее популярных паттернов отзывчивого веб-дизайна.

Все паттерны используют в своей основе Flexbox. Если руки дойдут, повторю всё в Grid.

За основу взят материал из статьи "Приемы отзывчивого веб-дизайна" от Pete LePage.

Mostly Fluid (Наиболее резиновый)

mostly-fluid

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

Посмотреть

Column Drop (Столбцы друг под другом)

column-drop

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

Посмотреть

Layout shifter (Двигающийся макет)

layout-shifter

Шаблон Layout shifter является наиболее отзывчивым, поскольку в нем предусмотрено наличие нескольких контрольных точек для экранов различной ширины. Основным отличием этого макета является то, что вместо перерасчета дерева отрисовки и размещения столбцов друг под другом перемещается контент.

Посмотреть

Tiny Tweaks (Крошечные изменения)

tiny-tweaks

Шаблон Tiny Tweaks (Крошечные изменения) просто вносит небольшие изменения в макет, например, регулирует размер шрифта, меняет размер изображений или перемещает контент.

Посмотреть

Off Canvas (Вне экрана)

off-canvas

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

Посмотреть