Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Sites
Webdesign

Как выбрать правильную сетку Foundation

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

В сегодняшнем видео мы поговорим о трёх системах сеток, которые мы можете найти во фреймворке ZURB’s Foundation. Конкретнее, мы рассмотрим какую именно вы должны использовать и в каком случае. Приступим!

Мы разработали исчерпывающее руководство, которое поможет вам изучить Foundation, независимо от того, начинаете ли вы с ним работать или хотите изучить более сложные темы, посмотрите Learn Foundation.

Выбираем сетку Foundation

1. Плавающая сетка

Первая и самая давняя из сеток Foundation – это плавающая сетка. Как видно из названия, для создания макета этой сетки, используются плавающие столбцы.

Разметка должна быть вам знакомой; в ней используется такая же структура строк (row) и столбцов (column), как и в других системах:

2. Гибкая сетка

Второй пример представлен в Foundation 6 и называется «the flex grid» (гибкая сетка). Она работает на CSS flexbox и несмотря на то, что ведёт она себя так же как плоская сетка, в ней есть некоторые уникальные функции, такие как вертикальное и горизонтальное выравнивание, и автоматическое определение размера.

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

С другой стороны, используя класса shrink мы можем уменьшить столбец до минимального размера, необходимого для его содержимого:

Больше примеров вы найдёте видеоуроке выше.

3. Сетка XY

Наш третий пример – самая недавняя сетка (и, на мой взгляд, самая удивительная); XY Grid, представленная в Foundation 6.4. Несмотря на то, что она также работает на flexbox, она имеет некоторое сходство с гибкой сеткой, но есть и некоторые большие различия.

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

Второе различие – разметка. Здесь мы определяем элемент контейнера (либо с классом grid-x, либо grid-y), а затем заполняем его элементами ячейки cell:

По умолчанию промежутка нет, поэтому все ячейки будут сидеть плотно друг к другу. Вместо этого мы определяем промежуток для элемента grid-x: grid-margin-x или grid-padding-x (заменяем x на y, если мы имеем дело с вертикальной сеткой). Значения, которые переносятся, могут быть установлены с использованием Sass-переменных $grid-margin-gutters и $grid-padding-gutters соответственно.

Какую сетку Foundation должны выбрать вы?

При выборе сетки, решение должно быть основано на нескольких факторах.

  1. Поддержка браузерами это самое главное, так как flexbox не имеет универсальной поддержки (IE является сомнительным браузером в этом случае). Плавающая сетка не зависит от поддержки браузером flexbox.
  2. Во-вторых, вам нужна вертикальная сетка? Если так, вам нужно перейти на сетку XY.
  3. И наконец, насколько для вас важны скорость написания кода и обслуживание? В сетке XY используется гораздо более простой синтаксис, чем у его предшественников, поэтому будет намного проще работать.

Для получения дополнительной информации ознакомьтесь с видеоуроком выше или взгляните на мои последние курсы!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.