x
 
Юрий Мазурский
23 апреля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Типовые решения в вёрстке

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

Типовые решения в вёрстке

Обычно, чтобы систе­ма­ти­зи­ро­вать эти огра­ни­че­ния и выне­сти их за скобки, исполь­зу­ется обёртка.

Есть два подхода:

  1. Сде­лать обёртку каким‑нибудь эле­мен­том, напри­мер div, и задать этому эле­менту все необ­хо­ди­мые стили гло­баль­ным классом.

  2. Про­став­лять гло­баль­ный класс каж­дому этажу самого верх­него уровня.

У каж­дого спо­соба есть свои плюсы и минусы:

Контейнер‑обёртка

Нужно завер­нуть всё содер­жи­мое стра­ницы в контейнер‑обёртку

Класс‑обёртка

Нужно про­ста­вить гло­баль­ный класс‑обёртку у каж­дого этажа

Контейнер‑обёртка

Эта­жам‑исклю­че­ниям нужно пере­опре­де­лять стили контейнера‑обёртки

Класс‑обёртка

Пове­де­нием нестан­дарт­ных эта­жей можно управ­лять классами‑модификаторами

Кон­тей­нер‑обёртка подой­дёт для слу­чаев, когда струк­тура содер­жи­мого стра­ницы все­гда оди­на­ко­вая, напри­мер для ста­тьи в блоге. Либо нао­бо­рот — в слу­чаях, когда вы не зна­ете зара­нее, что будет на стра­нице, поэтому нужно пере­стра­хо­ваться и задать базо­вые огра­ни­че­ния. То есть такую обёртку лучше исполь­зо­вать в шаб­ло­нах стра­ниц с дина­ми­че­ским содержимым.

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

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

Перей­дём к прак­тике. Я доба­вил два этажа и под­вал к нашему меню из преды­ду­щих сове­тов. Теперь это больше похоже на пол­но­цен­ную страницу:

У нас ста­тич­ная стра­ница с понят­ными эта­жами. Зна­чит, будем исполь­зо­вать класс‑обёртку.

Для начала поду­маем, какие огра­ни­че­ния стоит задать. Чтобы на узком окне содер­жи­мое стра­ницы не упи­ра­лось в края, нужно доба­вить мини­маль­ный несжи­ма­е­мый отступ слева и справа. При этом у нас есть этаж с изоб­ра­же­нием, кото­рый, нао­бо­рот, дол­жен касаться краёв окна. Доба­вим по трид­цать пик­се­лей слева и справа:

.wrapper {
  padding: 0 30px;
}

Кроме этого, нужно огра­ни­чить мак­си­маль­ную и мини­маль­ную ширины содер­жи­мого. Допу­стим, мак­си­маль­ная — 1200 пик­се­лей, а мини­маль­ная пусть будет 800 пикселей:

.wrapper {
  max-width: 1200px;
  min-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 30px;
}

Таким обра­зом мы вынесли стили, отве­ча­ю­щие за ширину и боко­вые отступы стра­ницы, за скобки и теперь можем доба­вить класс wrapper любому этажу, чтобы он под­чи­нялся общим правилам:

<header class="wrapper">
  ...
</header>
<div class="splash wrapper">
  <h1>Меж­пла­нет­ный диа­баз: основ­ные моменты</h1>
</div>
<article class="wrapper">
  ...
</article>
<footer class="wrapper">
  <p>2020, Класс­ная ком­па­ния</p>
</footer>

Резуль­тат цели­ком можно посмот­реть в Код­сэнд­боксе.

Если загля­нуть в исход­ный код сайта бюро, можно уви­деть ту же кар­тину: прак­ти­че­ски каж­дому этажу назна­чен класс holder, отве­ча­ю­щий за отступы от краёв окна.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Максим Карпов
23 апреля 2020

При использовании класса-обёртки становится не очень удобно контролировать абсолютно спозиционированные элементы, которые привязаны к краям экрана. Когда на определённом размере экрана нужно уменьшить отступ от границы — уже недостаточно просто уменьшить padding, нужно ещё пробегать по абсолютным элементам и уменьшать у них left и right. При использовании контейнера-обёртки такой проблемы нет.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Что делать, если меня, технического директора, потихоньку отстраняют от дел? Типовые решения в вёрстке. Почему не стоит использовать float 2 3 Как написать аккуратный код? Часть третья: заменяемость




Недавно всплыло

Как разделать папайю 2 Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 Как работать в Фигме быстрее. Часть 3 1 3