Проектирование заголовочных частей сайтов с использованием CSS Flexbox

в 13:16, , рубрики: css, html, Блог компании RUVDS.com, разработка, Разработка веб-сайтов

Когда я, изучив основы HTML и CSS в 2014 году, занялся разработкой сайтов, сложнее и страшнее всего для меня было создание их заголовочных частей. Тогда технология Flexbox была ещё достаточно новой, поэтому мы вынуждены были использовать старые методы — вроде float-позиционирования и техники clearfix. Сегодня мир фронтенд разработки стал совсем другим. А именно, технология Flexbox получила широкую браузерную поддержку, что открывает нам множество новых возможностей.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 1

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

А именно, здесь я расскажу о том, как, используя Flexbox-макеты, создавать качественные заголовочные части сайтов. Я поделюсь некоторыми советами, а в итоге продемонстрирую мой проект, созданный специально для этого материала. Поэтому, если вам и правда интересна тема, которую я тут решил поднять, вам, определённо, стоит дочитать эту статью до конца.

Здесь я исхожу из предположения о том, что вы владеете основами Flexbox-вёрстки. Вот, на всякий случая, моя статья, написанная для тех, кто хочет узнать больше о CSS-свойстве flex.

Введение

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

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 2

Логотип сайта, навигационные ссылки и контейнер заголовочной части сайта

Вне зависимости от дизайна заголовочной части сайта её ключевыми элементами является логотип и список ссылок.

Технология Flexbox в действии

Когда макет для заголовочной части сайта создают с использованием технологии Flexbox, все элементы одного уровня выстраиваются в одну строку. Затем остаётся лишь воспользоваться свойством justify-content для выравнивания элементов путём распределения свободного пространства, имеющегося между ними.

Вот код разметки:

<header class="site-header">
  <a href="#" class="brand">Brand</a>
  <nav class="nav"></nav>
</header>

Вот стили:

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Всё совсем несложно, правда? Ну, для столь простого заголовка — так оно и есть. Но на практике всё может оказаться куда сложнее.

Контейнер заголовочной части страницы

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

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 3

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

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

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
  </div>
</header>

А flex-стили нужно применить к элементу .site-header__wrapper:

.site-header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Использование свойства flex-wrap

Свойство flex-wrap — это нечто вроде защитного CSS-механизма. Если размеры экрана невелики, есть вероятность того, что для работы с заголовочной частью страницы придётся пользоваться горизонтальной прокруткой. Вот как это выглядит.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 4

Для работы с заголовком страницы необходимо применять горизонтальную прокрутку. А всё дело в том, что тут не используется свойство flex-wrap: wrap

Как видите, работать с такой страницей будет неудобно. Поэтому не забывайте о свойстве flex-wrap!

Исследование различных вариантов макетов заголовочных частей страниц

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

▍Вариант №1

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 5

Первый вариант заголовочной части страницы

В этот макет была добавлена кнопка, размещённая после блока навигационных ссылок. Как это сделать? Нужно ли оформить её в виде ссылки, размещённой внутри элемента <nav>? А, может, её следует сделать отдельным элементом? Я поступлю именно так.

Вот HTML-код, выражающий мою идею:

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

В данном случае расстояние между элементами не получится настроить с помощью свойства justify-content: space-between. Вместо этого я, для выравнивания блока ссылок, воспользуюсь свойством margin-left: auto. Благодаря этому ссылки и кнопки окажутся прижатыми к правой части контейнера.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 6

Элементы, благодаря margin-left: auto, прижаты к правой части контейнера

Отделение кнопки от блока ссылок ценно для мобильных макетов, где, например, может понадобиться, оставив кнопку, представить блок ссылок в виде выпадающего меню.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 7

Заголовочная часть страницы на настольном и на мобильном устройстве

▍Вариант №2

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 8

Второй вариант заголовочной части страницы

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

Вот разметка:

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <div class="search"></div>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

Вот — стиль, применяемый к полю поиска:

.search {
  flex: 1;
}

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

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 9

Заголовочная часть страницы на маленьком экране

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

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 10

Решение проблемы, вызванной уменьшением ширины поля поиска на небольших экранах

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

▍Вариант №3

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 11

Третий вариант заголовочной части страницыы

Здесь используется та же разметка, что и в первом варианте заголовка. Но тут изменён порядок вывода элементов на экран. Как это сделать? Возможно, вы решите, что тут стоит воспользоваться свойством order. Изучим эту идею.

Вот HTML-код:

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

Вот стили:

.site-header {
  display: flex;
  justify-content: space-between;
}

.nav {
  order: -1;
}

А вот как выглядит результат визуализации всего этого.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 12

Использование свойства justify-content: space-between не приводит к выравниванию логотипа по центру. Благодаря этому свойству лишь распределяется свободное пространство между элементами

Решение этой проблемы заключается в назначении каждому дочернему элементу заголовочной части страницы свойства flex: 1. Благодаря этому пространство будет распределено между элементами.

Вот стили:

.brand,
.nav,
.button {
  flex: 1;
}

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 13

Равномерное распределение свободного пространства между элементами заголовочной части страницы

Правда, тут с кнопкой произошла какая-то странность. Она, из-за применения свойства flex: 1, стала слишком длинной. Единственный способ это исправить заключается в том, чтобы поместить кнопку в элемент-контейнер:

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <div class="button-wrapper">
      <a href="/track-shipment" class="button">Track</a>
    </div>
  </div>
</header>

При таком подходе можно выровнять по центру и логотип, и кнопку:

.logo {
  text-align: center;
}

/* Не обращайте внимания на именование сущностей. Это - лишь демонстрация, хотя я понимаю то, что и в подобных примерах стоило бы лучше следить за именами. */
.button-wrapper {
  text-align: end; /* end - это, в LTR-языках, то же самое, что и right */
}

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 14

Выравнивание элементов

Этот подход, правда, тоже не идеален. Помните о том, что он, если в навигационном блоке будет больше ссылок, приведёт к появлению проблем. А именно, тут нужно, чтобы ширина навигационного блока не превышала бы определённого размера. Вот пример, в котором логотип теряет выравнивание по центру.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 15

Логотип больше не выровнен по центру

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

Теперь, когда мы исследовали разные варианты проектирования макетов заголовочных частей сайтов и поговорили о том, как создавать такие макеты, давайте рассмотрим некоторые важные идеи, которые могут нам помочь при создании заголовочных частей страниц.

Советы по разработке заголовочных частей страниц, основанных на Flexbox

▍Свойство flex-basis

Я предпочитаю пользоваться свойством flex-basis: 100% в том случае, если элемент должен иметь полную ширину на мобильных устройствах. Например, если речь идёт о важном блоке навигационных ссылок, который нельзя скрывать.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 16

Результат применения свойства flex-basis: 100%

Применение этого свойства, если взглянуть на предыдущий рисунок, может показаться простым делом. В реальности же это не так. Обычно заголовочная часть сайта может иметь внутренние отступы (padding), и если мы настраиваем элемент так, чтобы он занимал бы полную ширину, этого не произойдёт до тех пор, пока не окажутся перекрытыми внутренние отступы. Правда, убирать их — непрактично, так как это подействует на другие элементы макета.

Вот как можно решить эту проблему:

  1. Добавим flex: 1 0 100% к навигационному блоку.
  2. Поменяем, если нужно, его свойство order. Иногда приходится заботиться и о других элементах, поэтому нам нужно удостовериться в том, что навигационный блок является последним элементом.
  3. Настроим внешние отступы (margin) навигационного блока, воспользовавшись отрицательным значением, равным размеру внутренних отступов. Это позволит данному блоку занять полную ширину страницы.
  4. Настроим внутренние отступы (padding) так, чтобы в элементе присутствовало бы немного «воздуха».
  5. И, наконец, воспользуемся свойством justify-content: center для выравнивания навигационных элементов по центру (хотя это и не особенно важно).

Вот стили (в квадратных скобках даны пункты вышеприведённого списка, к которым они имеют отношение):

.nav {
  flex: 1 0 100%; /* [1] */
  order: 2; /* [2] */
  margin: 1rem -1rem -1rem -1rem; /* [3] */
  padding: 1rem; /* [4] */
  display: flex; /* [5] */
  justify-content: center; /* [5] */
}

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

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 17

Пошаговая стилизация элементов

▍Настройка расстояния между элементами

Теперь, когда браузеры Chrome и Firefox поддерживают свойство gap, очень легко настраивать расстояние между flex-элементами. Взгляните на следующую заголовочную часть страницы.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 18

Использование свойства gap

Для того чтобы настроить расстояние между элементами, выделенное на рисунке, нужно добавить к родительскому flex-элементу свойство gap: 1rem. Без использования этого свойства нам пришлось бы стилизовать элементы по-старому.

/* Старый подход */
.brand {
  margin-right: 1rem;
}

.sign-in {
  margin-right: 1rem;
}

/* Новый подход */
.site-header {
  /* Другие flexbox-стили*/
  gap: 1rem;
}

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

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

Проект headers-css

Вот пример заголовочных частей страниц, которые созданы в рамках проекта headers-css.

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 19

Заголовочные части страниц из headers-css

Я решил сделать проект, в котором собраны шаблоны заголовочных частей веб-сайтов, оформленные в виде отдельных страниц. Теперь, если мне понадобится подобный элемент, я смогу быстро найти его и интегрировать в новый проект. А именно, я создал 17 вариантов заголовочной части страницы. В ближайшее время я планирую расширить этот проект. Работая над этими элементами, я обращал особое внимание на следующее:

  • Гибкость.
  • Полностью отзывчивый дизайн.
  • Использование Sass, что позволяет легко редактировать мои шаблоны (правда, в этой области мне ещё нужно немного отрефакторить код).
  • Доступность (если вам попадётся что-то неправильное — пожалуйста добавьте запись в трекер задач проекта).

Вот страница, на которой можно посмотреть проект headers-css в действии. А вот — GitHub-репозиторий проекта.

Как вы создаёте заголовочные части веб-страниц?

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 20

Проектирование заголовочных частей сайтов с использованием CSS Flexbox - 21

Автор: ru_vds

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js