Foundation 5 фреймворк

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

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

Этот код строится из трёх важных классов:строка (row), которая "держит" наши колонки сайта. В этой демонстрации мы используем сетку из 12-ти столбцов, это максимальное количество которое обычно используют. Класс, который определяет столбцы здесь - small-12. Изменение количества столбцов изменяет их ширину. Использование small-12 однако, определяет только ширину столбцов, чтобы создать столбец нам нужно синхронизировать его с классом columns. Проще говоря, разметка указанная выше определяет что div должен принять двенадцать столбцов с максимальной шириной в 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>

Вы видите что есть два div'а с классом columns, каждый связан с классом (например, small-4) диктует нужный размер. Наши две колонки  занимают ширину четыре колонны и восемь столбцов соответственно."small-4" составляет примерно 33.3% ширины, "small-8" - 66.6% от ширины body. Важно понимать, что два эти дива могут быть многоуровневыми и вложенными до бесконечности, это обеспечивает большую гибкость.

<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, что когда сайт просматривается на большом экране, этой должно изменить ширину боковой панели с 33.3% до large-3, что эквивалентно примерно 25% ширины body. Это упрощённый пример, который становится очень полезным когда дело доходит до перестановки макета для различных размеров экрана.Вы легко можете отцентровать столбец быстро и легко, только если есть один столбец в строке.Вы также можете управлять порядком элементов с помощью 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>

Этот код позволяет сдвинуть колонки "пирамидой", тоесть сдвинуть вниз при просмотре с мобильного телефона.

Изучив  систему колонок веб-сайта, мы должны посмотреть на блочную систему, она позволяет элементам списка отображаться правильно независимо от размера экрана.

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

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