Lecaw

Учимся создавать Web-сайты

Foundation для начинающих: Сетка

June 14, 2013
CSS
884hits

В вводной части серии статей Foundation Framework, мы рассмотрели вопрос использования данной структуры, какие присутствуют функции и как вы можете начать разрабатывать свой проект при помощи данного фреймворка. В этой части мы подробно рассмотрим систему сетки, а также продемонстрируем несколько примеров. Углубимся в структуру элементов построенных на плагине Orbit JavaScript Slider для отображения всех типов содержания.

 

сетка

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

Система сетки фактически имеет три части: десктоп сетку, мобильную сетку и блок сетки. Давайте начнем с мобильных устройств.

Небольшая сетка

<div class="row">
    <div class="small-12 columns">
        <h2>This is Foundation</h2>
    </div>
</div>

Приведенный выше код построен из трех очень важных классах: первый из которых класс “row”, который содержит наши колонки, то же самое как строка в таблице содержит столбцы ячеек. В этой демонстрации мы используем двенадцать столбцов, максимальное количество колонок в пределах одной строки - двенадцать. Foundation поддерживает до шестнадцати колонок, которые вы можете выбрать при создании пользовательской сборки фреймворка.

Мы установили класс small-12, который определяет столбцы, число в этом классе определяет ширину указанной колонки. Класс только определяет ширину, для того чтобы действительно создать столбец, нам нужно, синхронизировать его с классом “columns”. Эти три класса являются основой для системы сетки.

Проще говоря, разметка выше подсказывает, что есть контейнер с классом row, который займет двенадцать столбцов в пространстве (100% от ширины). Внутри двенадцати столбцов будет находиться наш контент. Давайте рассмотрим немного более сложный вариант.

<div class="row">
    <div class="small-4 columns">
        <h2>This is a sidebar</h2>
    </div>
    <div class="small-8 columns">
        <h2>This is the content area</h2>
    </div>
</div>

В этом коде мы видим, что есть два контейнера с классом “columns”. Каждый соединен с определенным классом (например “small-4”) который указывает на конкретный размер колонки. Foundation выстраивает линию таких колонок рядом друг с другом в противоположном направлении, если бы они находились в обычном HTML потоке документа. Первые две колонки занимают четыре столбца в ширину и восемь столбцов соответственно, точно также как на сайте - лечение кошек. Полная ширина насчитывается в 12 колонок: “small-4” занимают приблизительно 33.3% и “small-8” приблизительно 66.6% ширины документа.

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

<div class="row">
    <div class="small-4 columns">
        <h2>This is a sidebar</h2>
        <div class="row">
            <div class="small-1 columns">
                <h6>#1</h6>
            </div>
            <div class="small-9 columns">
                <p>A post title</p>
            </div>
            <div class="small-2 columns">
                <button>Go</button>
            </div>
        </div>
    </div>
    <div class="small-8 columns">
        <h2>This is the content area</h2>
    </div>
</div>

Большая сетка

<div class="row">
    <div class="small-4 large-3 columns">
        <h2>This is a sidebar</h2>
    </div>
    <div class="small-8 large-9 columns">
        <h2>This is the content area</h2>
    </div>
</div>

Здесь мы добавили один дополнительный класс к large-3 и large-9. Это говорит Foundation, что при просмотре сайта на большом экране, он должен изменить ширину боковой панели с классом small-4 размером в 33.3% до large-3, что эквивалентно около 25% от ширины страницы. Основное направление, возможность изменения размера, добавляя больше места для содержания. Это упрощенный пример, но он будет очень полезным, когда речь зайдет о повторной реконструкции Вашего макета для различных размеров экрана.

Пока мы рассматриваем систему сетки стоит отметить, что с помощью классов large-centered и small-centered вы можете легко расположить колонку по центру. Вы также можете управлять порядком элементов, используя классы push и pull.

<div class="row">
    <div class="small-3 push-9 columns">3</div>
    <div class="small-9 pull-3 columns">9, last</div>
</div>

Таким образом, можно иметь списки слева, а контент справа на больших экранах, и переместить контент на уровень ниже на небольших экранах.

Блочная сетка

Перейдем к блочной сетке, которая используется чтобы сохранить элементы списка равномерно расположенными, с одинаковым интервалом, независимо от размера экрана. Они идеально подходят для блочного содержимого, поскольку он не нуждается в строках. Для создания такой сетки, мы будем использовать класс small-block-grid-#.

<ul class="small-block-grid-2 large-block-grid-4">
    <li><img src="/../img/photo1.png"></li>
    <li><img src="/../img/photo2.png"></li>
    <li><img src="/../img/photo3.png"></li>
    <li><img src="/../img/photo4.png"></li>
</ul>

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

Швейцарскую компанию под названием TAG Heuer основал еще в 1860 году Эдуард Хоер. Главными достоинствами часов, производимых компанией Хоера, были и есть надежная работа часового механизма, высокое качество часов и их точность, вызывающая истинное восхищение работой мастеров фирмы. Благодаря своим характеристикам часы компании

Orbit Plugin

Пожалуй, настало время перейти к Foundation плагину – Orbit.

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

<ul data-orbit>
    <li>
        <img src="/../img/demos/demo1.jpg" />
        <div class="orbit-caption">...</div>
    </li>
    <li>
        <img src="/../img/demos/demo2.jpg" />
        <div class="orbit-caption">...</div>
    </li>
    <li>
        <img src="/../img/demos/demo3.jpg" />
        <div class="orbit-caption">...</div>
    </li>
</ul>

Orbit использует структуру списка, каждый элемент списка отображается в виде слайда. Здесь, наряду с регулярными тегами изображений, наши элементы списка содержат контейнер с классом orbit-caption который, позволяет нам установить дополнительные подписи для каждого изображения. Разметка также имеет кучу вариантов отображения нумерации страниц, управления и даже таймер.

Взгляните на некоторые примеры параметров, которые можно изменить в плагине:

timer_speed: 10000,
animation_speed: 500,
bullets: true,
stack_on_small: true

Скорость, маркировка нумерации страниц и возможность отображения на маленьких экранах. Важно отметить, что параметры передаются для инициализации, таким образом, Вы должны вызвать стандартную функцию $(document).foundation();:

<script>
  $(document).foundation();
</script>

И передать ей параметры:

<script>
$(document).foundation('orbit', {
  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true
});
</script>

Эти параметры вы можете добавить классы для всех элементов производится с помощью плагина. Эти дополнительные опции (и более) можно найти в Фонде Docs.

 

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

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(4 голосов)

Оставить комментарий