Исправление весенней ошибки

Авторство в создании концепции «отвечающего» веб–дизайна (responsive web design, RWD) приписывается американскому дизайнеру из Бостона Итану Маркотту, хотя за шесть лет до опубликования его статьи на эту тему, другой дизайнер–разработчик, Камерон Адамс, выдвинул общую идею динамической адаптации представления веб–сайта на различных устройствах: смартфонах, планшетах, ноутбуках и офисных компьютерах.

Как бы там ни было, но выявление «первородства», а также дальнейших перипетий развития и совершенствования теории и практики адаптивного дизайна — именно так эта техника называется в русскоязычной литературе — имеет схоластическое значение: гораздо важнее вопросы практической имплиментации. Тем более, что некоторые веб–изощренцы, доходя порой даже до стадии извращенцев, находят принципиальный и непримиримые различия между понятиями адаптивный дизайн, адаптивная разметка, отзывчивый дизайн и всеми остальными производными от этих понятий. Жуть и жесть!

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

Другими словами, решил сделать «работу над ошибками». В качестве резинки–ластика для стирания этих ошибок и карандаша, способного красивым почерком вписать в историю моего сайта правильные современные «слова», связав их в логически верные «предложения», которые, в конечном итоге, сложатся в интересный, увлекательный «роман» призван вызвать набор CSS/Javascript Bootstrap, недавно приобретённый вместе с пакетом HTML5 Bootstrap.

На первый взгляд никаких особых изменений, по сравнению с первоначальной («табличной») схемой (рисунок слева внизу) не произошло: на варианте со слоями (рисунок справа внизу) всё так же в левой колонке располагается блоки навигации (меню жёлто–оранжевого цвета) и второстепенной информации (фрагмент фиолетового цвета), в центральной колонке — основной контент (зелёный цвет), а в правой — дополнительные сведения. Однако, вариант со слоями строится исключительно на принципах HTML5 и ему присущи очень полезные дополнительные свойства.

Вся «прелесть» адаптивного дизайна во всей своей красе проявляется в представлениях для малого и сверхмалого разрешений (в контексте терминов Bootstrap), то есть, для планшетов и смартфонов, соответственно. Таким образом, если разрешение экрана у пользователя окажется меньше 768 пикселей в ширину (обычное дело для смартфонов и малых планшетов), то содержимое веб–страница будет представлено в виде одной колонки (зелёное и сиреневое поля на среднем рисунке внизу), а меню (жёлто–оранжевое поле на том же рисунке) и дополнительная информация (поле синего цвета) вызываются по требованию пользователя (всплывают по нажатию соответствующей пиктограммы).

Для устройств с несколько бо́льшим разрешением (больше 768, но меньше 992 пикселей) — раскладка с двумя колонками для контента и дополнительной информации, «обрамлёнными» сверху и снизу блоками меню и вспомогательной информации (рисунок слева внизу). А для больших и очень больших разрешений — всего, что больше 992 пикселей в ширину, — ранее описанное трёхколоночное представление (для наглядности я повторил этот рисунок справа внизу).

Наверное, можно было бы всё это многообразие макетов реализовать и через таблицы (как мечталось в далёком апреле), но инструментарий пакета Bootstrap позволяет не только преодолеть возможную «головную боль» с дизайном, но и полностью её предотвращает. Спрашивается, зачем ломиться «скрозь» лес, ломая рогами ветки и треща валежником, если можно спокойно прогуляться по аллейке с рюмкой кофе в руках, наблюдая красоты окружающей природы? Я, например, выбрал «прогулку».

Речь идёт о наборе из четырёх типов классов, которые соответствуют четырём диапазонам разрешений экрана:

• .col-xs- (eXtra Small) — колонка (столбец) для самого малого разрешения (меньше 768px);
• .col-sm- (SMmall) — колонка для малого разрешения (от 768 до 992px в ширину);
• .col-md- (MeDium) — колонка для среднего разрешения (между 992 и 1200px);
• .col-lg- (LarGe) — колонка для большого разрешения (больше 1200px).

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

Для удобства дизайнера, всё пространство, на котором будет расположено содержимое веб–страницы с заголовками, меню, подвалом и дополнительными блоками — в общем, всё — разбивается по ширине на двенадцать вертикальных полос. Можно, конечно, разделить пространство на большее или меньшее количество полос, но именно двенадцать включено по умолчанию в пакете Bootstrap, и я не нашёл причины, по которой необходимо изменять их количество для моего сайта. На схеме внизу представлены три макета (для трёх разрешений), наложенный на двенадцатиполосную сетку.

А теперь, прочувствуйте простоту и удобство вёрстки страницы с помощью сетки и Bootstrap: для самого маленького разрешения, которому соответствует группа классов .col-xs-, блок меню–навигации (жёлто–оранжевого цвета) будет «награждён» классом .col-xs-4 («простирается» на четыре полосы сетки), блок основного контента (зелёного цвета) и вспомогательной информации (лилового цвета) — .col-xs-12 (ширина всех 12 полос), а второй блок дополнительной информации — .col-xs-4.

Макет для планшетов и нетбуков (если такие ещё существуют) строка меню и левый блок дополнительной информации наделяются классом .col-sm-12 (занимают всю ширину экрана), блок основного контента — .col-sm-8 и правый блок вспомогательной информации — .col-sm-6.

По такому же принципу, — решительно и деловито, — назначаются классы для среднего разрешения: .col-md-6 — для блока основного контента и .col-md-3 — для всех остальных. Группу классов .col-lg- решил вообще не трогать: с экранами больших разрешений успешно справится «средняя» группа (.col-md-).

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

Первый порыв применения Bootstrap на практике, можно сказать, «проба пера» вылилась в такую конструкцию (интересно, как она себя поведёт в жизни, то есть, на сайте?):

<div class="container"> 
 <div class="row"> 
  <div class="col-sm-12 col-md-3 hidden-xs">
   <!-- на смартфонах меню спрятано и вызывается принудительно, по нажатию пиктограммы (механизм вызова меню здесь не рассматривается) -->
   <h2>Меню</h2>
   <p>(жёлто-оранжевый блок)</p>
   <div class="hidden-sm">
    <!-- ... а блок дополнительной информации отображается в другом месте и на смартфонах, и на планшетах (см. ниже) -->
    <h2>Доп.информация левой колонки</h2>
    <p>(лиловый блок)</p>
   </div>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-6">
   <h2>Контент</h2>
   <p>(зелёный блок)</p>
  </div>
  <div class="col-xs-4 col-sm-4 col-md-3 hidden-xs">
   <!-- на смартфонах правая колонка спрятана и вызывается принудительно, по нажатию пиктограммы (механизм вызова блока здесь не рассматривается) -->
   <h2>Правая колонка</h2>
   <p>(синий блок)</p>
  </div>
 </div>
 <div class="row"> 
  <div class="col-xs-12 hidden-md hidden-lg">
   <!-- дополнительная информация из левой колонки на смартфонах и планшетах выводится под блоком с основным содержанием -->
   <h2>Доп.информация левой колонки</h2>
   <p>(лиловый блок)</p>
  </div>
 </div>
</div>

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