Переход с 960 Grid на ZURB Foundation

2014-05-30 0 ∞

960gs была отличной системой вёрстки! Поскольку у подавляющего большинства посетителей вашего сайта был монитор с разрешением как минимум 1024 пикселя по горизонтали, 960g позволял легко построить сайт прямо в HTML/CSS.

Но с появлением различных мобильных устройств и медиа-запросов (media queries) сайты, свёрстанные при помощи сетки фиксированной ширины, стали сильно проигрывать сайтам с адаптивным дизайном.

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

Тема этой статьи – сетка в Foundation, её сравнение с сеткой 960gs и дополнительные возможности Foundation, получаемые при помощи SASS. Далее я буду подразумевать, что читатель уже хорошо знаком с 960gs и присматривается к Foundation, чтобы использовать на практике адаптивный дизайн.

Сетка
Эквивалент 960gs
Вложенность
Создание разрывов
Переупорядочивание столбцов
Дополнительная информация
Критические точки Foundation
Опции SASS
Создание дополнительных критических точек
Избегайте дублирования стилей
В заключение

Сетка

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

<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>, что эквивалентно двенадцати столбцам. Такой расклад породит две строки с двумя столбцами одинаковой ширины.

Классы alpha и omega удаляют у контейнера margin-left и margin-right соответственно.

Того же результата можно добиться с использованием предопределённых классов в Foundation:

<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>

Как видите, мега контейнер отсутствует. Имеются контейнеры строк, в которые вложены контейнеры столбцов, и столбцы также дают в сумме 12. Для определения ширины столбца вместе с классом columns должен использоваться один из классов, задающих ширину, например medium-6.

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

Нотация medium-6 говорит о том, что данная колонка на экране средней ширины (по умолчанию – не шире 641 пикселя) займёт 6 долей ширины из 12, то есть половину доступного экранного пространства.

Чтобы указать, как должна измениться относительная ширина колонки на другом разрешении, нужно добавить тот же <div> в другие классы, начинающиеся на small или large, например:

<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 предполагает, что сайт будет учитывать, прежде всего, устройства с малой шириной экрана. Начинайте вёрстку с поддержки таких устройств, а потом, если возникнет такая необходимость, расширяйте её для больших экранов.

Foundation устроен согласно концепции «Мобильность прежде всего». Это означает, что если вы зададите для столбца один из small-классов, его параметры будут наследоваться через все критические точки, если только поведение в этих точках не будет явно задано при помощи классов medium или large.

С другой стороны, если вы зададите, например, только класс medium, то система будет использовать для малых экранов стиль по умолчанию, который аналогичен small-12.

Эквивалент 960gs

Учитывая вышесказанное, изменения кода при переходе от старого фреймворка к новому должны производиться так: сначала удаляется <div> класса container, затем вокруг группы grid_#-блоков, образующих одну строку, выстраивается <div> класса row. Затем во всех блоках-ячейках grid_# заменяется на medium-#.

Полученный расклад будет похож на то, как ваша старая 960gs выглядела на экранах шириной в 640 пикселей и уже. Набор столбцов растянется на весь экран, то есть у каждого столбца ширина будет составлять 100%.

Вот ещё некоторые концепции 960gs, переведённые на язык Foundation.

Вложенность

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

В Foundation, чтобы создать вложенную строку, достаточно добавить <div> класса row в любую ячейку. Никаких дополнительных классов не требуется.

Главное отличие от 960gs состоит в том, что вложенная строка делит оставшуюся ей ширину на те же 12 долей. То есть строка внутри блока с классом medium-6 разделит эти 6 условных ячеек на 12.

Создание разрывов

Классы prefix и suffix в 960gs были отличным инструментом для вставки пустых промежутков и центрирования блоков. В Foundation эти же функции выполняют классы offset.

Переупорядочивание столбцов

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

Дополнительная информация

Foundation может всё, что может 960gs, и даже намного больше. Обратитесь к документации, чтобы получить исчерпывающую информацию о возможностях ZURB Foundation.

Критические точки Foundation

Вот мы и подошли к главному, ради чего занялись Foundation: к адаптивности. О точках large, medium и small вы уже знаете.

Существуют также xlarge и xxlarge. (Как в американских размерах одежды. Удобно запомнить, не правда ли?). Вот как соотносятся критические точки и ширина экрана:

Критическая точка	Ширина экрана
small	до 40em (640px)
medium	от 40,063em (641px) до 64em (1024px)
large	от 64,063em (1025px) до 90em (1440px)
xlarge	от 90,063em (1441px) до 120em (1920px)
xxlarge	120,063em (1921px) и более

Обратите внимание: только классы small, medium и large можно использовать непосредственно в HTML. Для работы с xlarge или xxlarge, равно как и для кастомизации любого класса, нужно применять SASS.

Опции SASS

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

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

Например, класс news можно заставить вести себя как сочетание классов grid-6 columns.

Вот пример, как этого можно добиться. Допустим, у вас есть HTML-разметка:

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

Чтобы блоки делили экран между собой по 50%, ваш SASS должен быть следующим:

.main { 
    @include grid-row; 
 
    .news { 
        @include grid-column(6); 
    } 
 
    .events { 
        @include grid-colmn(6); 
    } 
}

Это то же самое, как если бы мы изменили HTML-код следующим образом:

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

Создание дополнительных критических точек

Для того чтобы добавить точку разрыва, вы должны использовать в работе с CSS такой приём:

.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)
        }
    }
}

Что равнозначно:

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

Такая техника работы с CSS полезна тем, что позволяет не вносить изменения в HTML-код, что больше подходит к концепции разделения содержания и представления.

Избегайте дублирования стилей

Есть ещё одна примечательная особенность работы со стилями в Foundation. Если вы собираете свои стили в отдельные файлы, но хотите использовать в них примеси из Foundation, вы должны определить переменную $include-html-classes как false. Это может выглядеть так:

@import "foundation/settings";
$include-html-classes: false;
@import "foundation";

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

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

В заключение

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

РедакцияПеревод статьи «Migrating From 960 Grid System to ZURB Foundation»