Переход с системы 960 Grid на ZURB Foundation

960gs был хорош! Когда большинство посетителей вашего сайта использовали настольные компьютеры с мониторами как минимум в 1024 пикселя, 960gs сделал разработку кода сайта совершенно простым. Однако с наступлением быстрого распространения устройств и преобладание медиа-запросов, сайты с фиксированной шириной стали значительно менее эффективны, чем адаптивные макеты.

В этом материале я опишу, как перейти с сайта с фиксированой шириной 960gs на фреймворк ZURB Foundation. Не отвлекаясь слишком много, я хочу быть справедливым к 960gs и упомянуть adapt.js, который является ответом этого фреймворка на отзывчивый веб-дизайн. А пока, эта статься покроет основы сетки Foundation, как она сравнима с сеткой 960gs и некоторые дополнительные параметры Sass в Foundation. В этом уроке, предполагается, что вы уже знакомы с 960gs и рассматривали Foundation, как способ прийти к отзывчивому дизайну.

Сетка

Для начала, вам нужно будет понять основы концепции строк и столбцов в Foundation. Условно, 960gs использует один мегаконтейнер и полагаться на каждую комбинацию DIV для создания строки. Вот так:

1

<div class="container_12"> 

2

    <div class="grid_6"></div> 

3

    <div class="grid_6"></div> 

4

    <div class="grid_6"></div> 

5

    <div class="grid_6"></div> 

6

</div>

У вас может быть <div class="clear"></div> между DIVами сетки, которые добавляются до 12 раз, хотя это и не обязательно. Этот макет, по сути, создаст две строки с двумя столбцами, которые поровну разделили бы доступную ширину. Если вы добавите классы alpha и omega, они соответственно уберут лишние поля слева (margin-left) и справа (margin-right).

В преопределённых HTML классах Foundation, точно такой макет, делается вот так:

1

<div class="row"> 

2

    <div class="medium-6 columns"></div> 

3

    <div class="medium-6 columns"></div> 

4

</div> 

5

<div class="row"> 

6

    <div class="medium-6 columns"></div>

7

    <div class="medium-6 columns"></div> 

8

</div>

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

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

Вы заметите запись medium-6. Это означает, что на среднем экране (однако это определено, по умолчанию 641px), вы увидите шесть столбцов шириной или в половину доступной ширины. Можно добавить другой класс, чтобы указать, сколько столбцов должна быть ширина div на других размерах экранов, включая малые (small) и большие (large). Вот как это будет выглядеть:

1

<div class="row"> 

2

    <div class="medium-6 small-6 columns"></div> 

3

    <div class="medium-6 small-6 columns"></div> 

4

</div> 

5

<div class="row"> 

6

    <div class="medium-6 small-3 columns"></div> 

7

    <div class="medium-6 small-9 columns"></div> 

8

</div>

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

По умолчанию Foundation разработан в концепции сначала для мобильных. Для сеток это означает, что может использоваться только класс small, чтобы определить ширину столбца для маленьких экранов, а все устройства больше наследуют от него, если класс medium или large отсутствуют. С другой стороны, если вы используете только класс medium, то макет для малых экранов по умолчанию преобразует DIV в штабелированные одноколоночные строки (эквивалентно small-12), которые по умолчанию применяется к столбцам для малых экранов.

"Эквиваленты" сетки 960

С учётом этого, основные изменения вашего макета заключаются в следующем: во-первых, div с классом container можно удалить. Далее, вокруг DIVа grid_#, который делает "строки", вам понадобится создать div с классом row. Отдельные DIVы содержащие классы grid могут быть изменены на medium-#.

Этим вы получите нечно ужасное, что-то вроде вашего старог макета на 960gs при просмотре на устройствах выше 640 пикселей и ниже этой ширины, у вас будет только стопка строк в полную ширину, что означает, что каждый div столбца будет 100% ширины.

Вот некоторые другие понятия 960gs переведенные в манере Foundation:

Вложенность

В 960gs, вложенность можно сделать добавив alpha в первый столбец строки и omega в последний, эффективно удалив горизонтальные поля. При таком подходе, вложенные строки должны быть суммой ширины столбца, в котором находятся вложенные столбцы.

В Foundation, вложенность делается за вас, вам нужно только вставить одну строку вместо колонны. Дополнительные классы не нужны. Другое главное отличие состоит в том, что каждая вложенная строка снова будет иметь 12 столбцов для доступного пространства. Таким образом, строка внутри medium-6 позволит вам разделить эти шесть столбцов на 12.

Создание промежутков

Префикс и суффикс в 960gs были полезной фишкой классов для создания пустого пространства в вашем макете и обеспечивали средство для центрирования. У Foundation есть те же возможности, используя Offsets.

Порядок исходного кода

Это фактически почти то же самое в обоих фреймворках. Упорядочивание исходника позволяет создавать столбцы в любом порядке в вашем HTML, но показывать его в другом порядке слева направо. Для этого вы можете использовать классы push и pull.

Ещë почитать

Foundation покрывает все возможности 960gs и даже больше. Посмотрите их доки, чтобы узнать что ещë на нём можно сделать.

Точки разметки экранов Foundation

И главная причина, по которой вы переходите на что-то вроде Foundation — отзывчивость. Вы знаете о контрольных точках large, medium и small, но есть также xlarge и xxlarge. Вот что относятся к этим классам устройств:

Обратите внимание, что в HTML можно использовать только small, medium и large классы. Если вам нужно использовать xlarge или xxlarge, или вы хотите настроить эти точки, вы можете использовать Sass для адаптации Foundation в соответствии с вашими потребностями.

Параметры Sass

Foundation построен для работы с Compass и Sass. Если вам удобен Sass, это может облегчить процесс разработки, больше узнать о начале работы с Sass и Foundation.

Ключевым профи для использования Sass является то, что вместо добавления в ваш HTML классов, специфичных для Foundation, вы можете просто расширить атрибуты Foundation на основе существующей разметки. Например, существующий div с классом news может быть сделан для имитации div'а grid-6 columns.

Вот полный пример того, как это может выглядеть, допустим у вас такой HTML:

1

<div class="main"> 

2

    <div class="news"></div> 

3

    <div class="events"></div> 

4

</div>

Чтобы достичь разделения 50/50 для .news и .events, ваш Sass будет выглядеть так:

1

.main { 

2

    @include grid-row; 

3

4

    .news { 

5

        @include grid-column(6); 

6

    } 

7

8

    .events { 

9

        @include grid-colmn(6); 

10

    } 

11

}

Это равносильно изменению разметки вот так:

1

<div class="row">

2

  <div class="small-6 columns"></div>

3

	<div class="small-6 columns"></div>

4

</div>

Включение дополнительных точек устройств

Если вы захотели включить другие точки ширины в SCSS, вы можете просто использовали этот метод:

1

.main {

2

	@include grid-row;

3

4

	.news {

5

		@include grid-column(8);

6

		@media #{$large-up} {

7

			grid-column(6)

8

		}

9

	}

10

	.events {

11

		@include grid-colmn(4);

12

		@media #{$large-up} {

13

			grid-column(6)

14

		}

15

	}

16

}

Что аналогично этому:

1

<div class="row">

2

	<div class="small-8 large-6 columns"></div>

3

	<div class="small-4 large-6 columns"></div>

4

</div>

Метод SCSS хорош, потому что он не захламляет классы в HTML и позволяет вам быть более семантическим.

Избегаем повторяющихся стили

Есть ещë одна более важная вещь. которую нужно знать об этом методе. Если вы компилируете ваш CSS в раздельные, дополняющие файлы стилей, но хотите использовать смешивание (mixins) в Foundation, вам надо будет импортировать то, что нужно, но избежать повторяющихся стилей Foundation. Чтобы избежать добавления лишних стилей в выходной CSS, вам нужно указать переменную $include-html-classes как false, вот как это выглядит:

1

@import "foundation/settings";

2

$include-html-classes: false;

3

@import "foundation";

Обратите внимание, что способы могут отличаться в зависимости от вашей настройки. Это позволит вам использовать всё: смешивания, функции и настройки в Foundation, без необходимости дублировать все CSS. Это удобно, если на странице, с которой вы работаете уже есть CSS. Этот метод можно использовать, например, в качестве места для хранения всех ваших переопределений для конкретной страницы или подмножества страниц.

В заключение

Это всего лишь верхушка айсберга: у Foundation и Sass гораздо больше возможностей, и у обоих есть большое количество разработчиков, которые продолжают делать их более продвинутыми, хорошими и лучше.