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

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

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

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

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

Сетка

Для начала рассмотрим концепцию строк и столбцов в 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)
xxlarge120,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» был подготовлен дружной командой проекта Сайтостроение от А до Я.

30 мая 2014 в 19:54
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок