Руководство по CSS Grid в Zurb Foundation 5

Большинство современных веб-сайтов используют CSS-сетку для визуальной организации контента в строки и столбцы.

И почти любой из современных front-end фреймворков имеют в своем составе полноценную систему CSS-сеток. Если читатель немного знаком с фреймворками, то система CSS-сеток в Zurb Foundation 5 должна почти полностью отвечать его потребностям. В пользу изучения CSS-сеток в фреймворке можно сказать, что она значительно снижает объем кода, который бы иначе потребовалось написать вручную.

Первым шагом при создании разметки под Foundation нужно скачать файл архива данного фреймворка и включить его в свой собственный проект. Если вы новичек в этом деле, то я рекомендую вам Getting Started With Foundation CSS; однако, помимо этого вы можете пойти по пути Getting Started With Sass или же Applications.

Основы CSS-сетки Foundation

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

При создании веб-сайтов под фреймворком Foundation наиболее правильным будет подход, ориентированный на мобильные устройства, в первую очередь. И только потом нужно плавно дорабатывать дизайн сайта так, чтобы он также хорошо смотрелся на на десктопных размерах устройств. Это может показаться нелогичным, но это наиболее правильный подход при работе с Foundation. Многоколоночная разметка плохо работает на мобильных браузерах, потому что мобильные устройства, как правило, имеют экран, у которого высота больше, чем ширина. Впихивание большой разметки в маленький экран - задача гораздо более трудная, нежели создание простой разметки под мобильный экран; а затем постепенное усложенение разметки под большие мониторы.

Шаблон CSS-сетки

Прежде чем описывать CSS-классы для создания сетки, я бы хотел показать вам HTML-шаблон на сайте Zurb:

CSS-сетка в фреймворке Foundation состоит из 12 колонок. По горизонтали страница разбивается на строки (row). Таким образом, колонки помещаются внутрь каждой из строк. Каждая группа колонок внутри строки row в сумме составляет 12, однако существуют дополнительные возможности для того, чтобы обойти это правило.

В приведенном выше HTML-шаблоне секция заголовка

1

header

1

large-3

1

large-9

1

large-3

1

large-9

1

header

Следующее, большое изображение по центру страницы также является строкой row, внутри которой расположена одна единственная колонка. Эта колонка имеет класс

1

large-12

1

row

1

columns

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

<!-- Header and Nav -->
<div class="row">
  <div class="large-3 columns">
    <!-- logo -->
  </div>
  <div class="large-9 columns">
    <!-- navigation -->
  </div>
</div>

<!-- First Band (Image) -->
<div class="row">
  <div class="large-12 columns">
    <!-- large center image -->
  </div>
</div>

<!-- Second Band (Image Left with Text) -->
<div class="row">
  <div class="large-4 columns">
    <!-- left image -->
  </div>
  <div class="large-8 columns">
    <!-- text content -->
  </div>
</div>

<!-- Third Band (Image Right with Text) -->
<div class="row">
  <div class="large-8 columns">
    <!-- text content -->
  </div>
  <div class="large-4 columns">
    <!-- right image -->
  </div>
</div>

<!-- Footer -->
<footer class="row">
  <div class="large-12 columns">
    <div class="row">
      <div class="large-6 columns">
        <!-- copyright -->
      </div>
      <div class="large-6 columns">
        <!-- footer links -->
      </div>
    </div>
  </div>
</footer>

Классы CSS-сетки Foundation

Существует пять основных классов CSS-сетки, которые следует запомнить при работе в фреймворке Foundation 5:

• 1

  row

  - класс

  1

  .row

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

  1

  row

  с вложенными в него колонками.

• 1

  columns

  - внутри каждой строки любому HTML-элементу можно добавить класс

  1

  columns

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

  1

  columns

  , так и класс

  1

  column

  - результат будет одинаковым. Каждый элемент, которому присвоен класс

  1

  columns

  или

  1

  column

  обязан иметь еще один класс, который определяет ширину этого элемента.

• 1

  small-#

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

  1

  small-4

  будет занимать ширину четырех колонок. Если не указан никакой другой адаптивный размер, такой как

  1

  medium-#

  или

  1

  large-#

  , то указанные в этом классе CSS-правила унаследуются и для больших размеров экранов.

• 1

  medium-#

  - этот класс впервые был введен в Foundation 5 и он предназначен для экранов планшетных компьютеров. Если в коде HTML-элемент имеет как класс

  1

  small-#

  , так и класс

  1

  medium-#

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

  1

  small-4

  и класс

  1

  medium-8

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

• 1

  large-#

  - как вы уже могли догадаться, класс

  1

  large-#

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

  1

  large-#

  ; этот шаблон превращается в одноколоночный при меньший размерах экрана, потому что для элементов не заданы классы

  1

  small-#

  и

  1

  medium-#

  .

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

<div class="row">
  <div class="large-8 columns">
    <!-- text content -->
  </div>
  <div class="large-4 columns">
    <!-- right image -->
  </div>
</div>

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

1

small-6

<div class="row">
  <div class="small-6 large-8 columns">
    <!-- text content -->
  </div>
  <div class="small-6 large-4 columns">
    <!-- right image -->
  </div>
</div>

Именно класс

1

small-6

1

large-8

1

large-4

Дополнительные возможности CSS-сетки

Как и следовало ожидать, у CSS-сетки фреймворка Foundation имеется гораздо больше возможностей, чем было описано выше. Данная статья имеет целью описать только ее основные возможности, но если вы хотите узнать больше, почитайте эту документацию - [Getting Started][8].

Вложенность в CSS-сетке

В CSS-сетке фреймворка Foundation имеется возможность вкладывать строки внутрь колонок. Такой прием называется “вложенность” и с ним нужно быть достаточно осторожным на практике, так как можно легко запутаться при написании кода:

<div class="row">
  <div class="large-8 columns">
    <!-- вложенность -->
    <div class="row">
      <div class="small-4 columns">
        <!-- вложенный контент -->
      </div>
      <div class="small-8 columns">
        <!-- nested right image -->
      </div>
    </div>
  </div>
  <div class="large-4 columns">
    <!-- right image -->
  </div>
</div>

Центрирование колонок в Foundation

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

1

footer

1

small-centered

1

large-centered

<div class="row">
  <div class="large-8 large-centered columns">
    <!-- центрируемое содержимое -->
  </div>
</div>

Смещение в CSS-сетке Foundation

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

В этих случаях можно использовать классы смещения (offset), например, такой -

1

large-offset-3

1

small-offset-#

1

medium-offset-#

1

small-offset-#

<div class="row">
  <div class="large-8 large-offset-3 columns">
    <!-- смещаемый контент -->
  </div>
</div>

Незавершенные строки в Foundation

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

Такой подход позволяет решить некоторые проблемы, связанные с кросс-браузерностью, но если необходимо отменить такое поведение фреймворка, то просто добавьте класс

1

end

1

float: left

<div class="row">
  <div class="large-2 columns">
    <!-- левая колонка -->
  </div>
  <div class="large-3 columns">
    <!-- центральная колонка -->
  </div>
  <div class="large-2 end columns">
    <!-- последняя колонка -->
  </div>
</div>

Порядок следования

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

Исходя из вопросов удобства пользованием сайтом и аспектов SEO, необходимо сделать так, чтобы блок с основным содержимым размещался первым в HTML-странице; но при этом в окне браузера визуально боковой блок должен находиться перед блоком с контентом.

Два блока могут поменяться своими местами друг с другом используя такую возможность в фреймворке Foundation. Используя классы типа

1

large-pull-3

1

large-pull-9

<div class="row">
  <div class="large-9 large-pull-3 columns">
    <!-- основной блок -->
  </div>
  <div class="large-3 large-pull-9 columns">
    <!-- боковой блок -->
  </div>
</div>

И еще …

Данная статья является всего лишь введением в систему CSS-сеток фреймворка Foundation; но в нем есть еще много тем для изучения, таких как стилизация форм, модули и типографика. Обо всем этом вы можете почитать в главе Getting Started.

На этом перевод окончен. Оригинал статьи размещен здесь - The Beginner’s Guide to Grids with Zurb Foundation 5.