960gs было здорово! Когда большинство посетителей вашего сайта использовали настольные компьютеры с мониторами шириной не менее 1024 пикселей, 960gs упростили создание сайта в коде. Однако с появлением устройств и распространением медиа-запросов сайты с фиксированной шириной явно менее эффективны, чем адаптивные макеты.
В этом документе я опишу, как взять ваш сайт с фиксированной шириной 960gs и переместить его в основу ZURB Foundation . Не слишком отвлекаясь, я хочу быть честным с 960gs и упомянуть adapt.js , ответ этой платформы на адаптивный веб-дизайн. Теперь в этой статье будут рассмотрены основы сетки Foundation, ее сравнение с сеткой 960gs и некоторые дополнительные опции с Sass Foundation. В этом руководстве я предполагаю, что вы уже знакомы с 960gs и рассматриваете Foundation как способ создания адаптивного дизайна.
Сетки
Для начала вам необходимо понять основные понятия строк и столбцов в Foundation. Конвенция 960gs заключалась в том, чтобы использовать один мега контейнер и полагаться на каждую комбинацию DIV, чтобы составить ряд. Вот так:
|
1
2
3
4
5
6
|
<div class=»container_12″>
<div class=»grid_6″></div>
<div class=»grid_6″></div>
<div class=»grid_6″></div>
<div class=»grid_6″></div>
</div>
|
Вы можете добавить <div class="clear"></div> между сетевыми DIV, которые добавляют до 12, но это необязательно. Эта компоновка, по сути, создала бы две строки с двумя столбцами, которые поровну поделили доступную ширину. Если вы добавите классы alpha и omega , он будет соответственно лишний лишний margin-left и margin-right .
В предопределенных HTML-классах Foundation этот же макет будет реализован с помощью следующего фрагмента:
|
1
2
3
4
5
6
7
8
|
<div class=»row»>
<div class=»medium-6 columns»></div>
<div class=»medium-6 columns»></div>
</div>
<div class=»row»>
<div class=»medium-6 columns»></div>
<div class=»medium-6 columns»></div>
</div>
|
Для Foundation нет мегаконтейнера, вместо этого есть строки и строки, содержащие столбцы, а количество столбцов должно составлять 12. Каждый столбец определяется путем добавления класса columns сопровождаемого хотя бы одним классом для определения ширины этого столбца.
Если говорить коротко, то, что стоит, сетка Foundation аналогична строкам и интервалам Twitter Bootstrap , за исключением того, что Foundation дает вам возможность определять ширину столбцов в нескольких точках останова.
Вы заметите обозначение medium-6 . Это означает, что в средней точке останова (как бы она ни была определена, по умолчанию 641px) вы увидите ширину в шесть столбцов или половину доступной ширины. Другой класс может быть добавлен, чтобы указать, сколько столбцов стоит ширина, div должен занимать в других точках останова, включая small и large . Вот как это будет выглядеть:
|
1
2
3
4
5
6
7
8
|
<div class=»row»>
<div class=»medium-6 small-6 columns»></div>
<div class=»medium-6 small-6 columns»></div>
</div>
<div class=»row»>
<div class=»medium-6 small-3 columns»></div>
<div class=»medium-6 small-9 columns»></div>
</div>
|
Фонд мобильный-первый . Сначала создайте код для небольших экранов, и более крупные устройства будут наследовать эти стили. Настройте для больших экранов по мере необходимости. источник
По умолчанию Foundation разработан в мобильной концепции . Для сеток это означает, что small класс можно использовать отдельно для определения ширины столбца в малой точке останова, и все указанные выше точки останова будут наследоваться от этого, пока medium или large класс не присутствует. С другой стороны, если вы просто используете medium класс, то макет небольшой точки останова по умолчанию преобразует DIV в сложенные строки с одним столбцом (эквивалентно small-12 ), который по умолчанию применяется к столбцам в маленькой точке останова.
960 Сетка «Эквиваленты»
Учитывая все это, основы изменения разметки следующие: во-первых, div с классом container может быть удален. Затем, вокруг ваших grid_# DIV, которые составляют «строки», вам нужно создать div с row класса. Отдельные DIV, содержащие классы grid могут быть изменены на medium-# .
Это даст вам нечто, очень похожее на ваш старый макет 960gs для областей просмотра выше 640 пикселей и ниже этой ширины, у вас будут только стопки строк полной ширины, что означает, что каждый столбец div изменится на 100% ширины.
Вот некоторые другие концепции 960gs, переведенные на язык Foundation:
гнездование
В 960gs, вложение может быть достигнуто путем добавления alpha к первому столбцу в строке и omega к последнему, эффективно удаляя горизонтальные поля. При использовании этого подхода ваши вложенные строки должны были быть суммой ширины столбца, в которой жили вложенные столбцы.
В Foundation вложенность сделана за вас, вам просто нужно вставить одну строку внутри столбца. Никаких дополнительных занятий не требуется. Другое основное отличие состоит в том, что каждая строка гнезда занимает 12 новых столбцов в пределах доступного пространства гнезда. Таким образом, ряд внутри medium-6 позволит вам разделить эти шесть столбцов на 12.
Создание пробелов
Префиксные и суффиксные классы 960gs были отличными служебными классами для создания пустого пространства в макете и предоставляли средства для центрирования. Фундамент имеет те же возможности, что и смещения .
Источник заказа
На самом деле это практически одинаково в обеих системах. Упорядочение по исходному тексту позволяет вам создавать столбцы в любом порядке, который вы хотите в своем фактическом HTML, но при этом они отображаются в другом порядке слева направо. Для этого вы можете использовать классы push и pull .
Подробнее
Фонд охватывает все возможности 960gs и многое другое. Смотрите документы, чтобы узнать обо всем остальном, что он может сделать.
Точки останова
Что ж, это главная причина, по которой вы переходите к чему-то вроде Foundation: отзывчивость. Вы знаете о large , medium и small точках останова, но есть также xlarge и xxlarge . Вот к чему относятся эти классы точек останова:
| точка остановки | Ширина области просмотра |
|---|---|
| небольшой | <40em (640 пикселей) |
| средний | 40,063em (641px) <64em (1024px) |
| большой | 64,063em (1025 пикселей) <90em (1440 пикселей) |
| XLarge | 90.063em (1441px)> 120em (1920px) |
| XXLarge | > 120.063em (1921px) |
Обратите внимание, что в вашем HTML могут использоваться только small , medium и large точки останова. Если вам нужно использовать xlarge или xxlarge или вы хотите настроить эти точки останова, вы можете использовать работу с Sass для адаптации Foundation к вашим потребностям.
Sass Options
Фонд создан для работы с Compass и Sass. Если вам нравится Sass, это может упростить разработку, узнайте больше о начале работы с Sass и Foundation.
Ключевым преимуществом использования Sass является то, что вместо добавления классов, специфичных для Foundation, в ваш HTML, вы можете просто расширить атрибуты Foundation на основе существующей разметки. Например, существующий div с news класса может быть создан, чтобы имитировать div grid-6 columns .
Вот полный пример того, как это может выглядеть, допустим, у вас есть этот HTML:
|
1
2
3
4
|
<div class=»main»>
<div class=»news»></div>
<div class=»events»></div>
</div>
|
Чтобы разделить .news и .events на 50/50, ваш Sass будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
|
.main {
@include grid-row;
.news {
@include grid-column(6);
}
.events {
@include grid-colmn(6);
}
}
|
Это эквивалентно изменению разметки на это:
|
1
2
3
4
|
<div class=»row»>
<div class=»small-6 columns»></div>
<div class=»small-6 columns»></div>
</div>
|
Включая дополнительные точки останова
Если вы хотите включить другие точки останова в вашу SCSS, вы просто используете эту технику:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
.main {
@include grid-row;
.news {
@include grid-column(8);
@media #{$large-up} {
grid-column(6)
}
}
.events {
@include grid-colmn(4);
@media #{$large-up} {
grid-column(6)
}
}
}
|
Который так же, как:
|
1
2
3
4
|
<div class=»row»>
<div class=»small-8 large-6 columns»></div>
<div class=»small-4 large-6 columns»></div>
</div>
|
Техника SCSS хороша тем, что она сохраняет ваши классы незагроможденными в вашем HTML и позволяет вам быть более семантическими.
Избегайте дублированных стилей
Есть еще одна важная вещь, чтобы понять об этом методе. Если вы компилируете свой CSS в отдельную дополнительную таблицу стилей, но хотите использовать mixins Foundation, вам нужно импортировать то, что вам нужно, но не допускать дублирования стилей Foundation . Чтобы избежать избыточных стилей, добавляемых к вашему выходному CSS, вам нужно указать переменную $include-html-classes как false , вот как это выглядит:
|
1
2
3
|
@import «foundation/settings»;
$include-html-classes: false;
@import «foundation»;
|
Обратите внимание, что пути могут отличаться в зависимости от ваших настроек. Это позволит вам использовать все миксины, функции и настройки в Foundation, без необходимости дублировать весь CSS. Это удобно, если вы уже включили базовый CSS на страницу, над которой работаете. Этот метод может, например, использоваться как место для хранения всех ваших переопределений для специальной страницы или подмножества страниц.
В заключение
Это только вершина айсберга: и Foundation, и Sass могут предложить гораздо больше, и у обоих есть множество последователей разработчиков, которые продолжают делать их более продвинутыми и, ну, еще лучше.