Большинство современных веб-сайтов используют CSS-сетку для визуальной организации контента в строки и столбцы.

И почти любой из современных front-end фреймворков имеют в своем составе полноценную систему CSS-сеток. Если читатель немного знаком с фреймворками, то система CSS-сеток в Zurb Foundation 5 должна почти полностью отвечать его потребностям. В пользу изучения CSS-сеток в фреймворке можно сказать, что она значительно снижает объем кода, который бы иначе потребовалось написать вручную.

Первым шагом при создании разметки под Foundation нужно скачать файл архива данного фреймворка и включить его в свой собственный проект. Если вы новичек в этом деле, то я рекомендую вам Getting Started With Foundation CSS; однако, помимо этого вы можете пойти по пути Getting Started With Sass или же Applications.

Основы CSS-сетки Foundation

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

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

Шаблон CSS-сетки

Прежде чем описывать CSS-классы для создания сетки, я бы хотел показать вам HTML-шаблон на сайте Zurb:

HTML-шаблон Foundation

CSS-сетка в фреймворке Foundation состоит из 12 колонок. По горизонтали страница разбивается на строки (row). Таким образом, колонки помещаются внутрь каждой из строк. Каждая группа колонок внутри строки row в сумме составляет 12, однако существуют дополнительные возможности для того, чтобы обойти это правило.

В приведенном выше HTML-шаблоне секция заголовка

1
header
является строкой. Внутри этой строки помещен блок div для логотипа и блок div для навигации. Блок-логотип имеет класс
1
large-3
, что означает, что данный блок должен в сумме занимать три колонки по ширине. Блок навигации имеет класс
1
large-9
, что заставляет этот блок в сумме занимать ширину девяти колонок. Оба класса
1
large-3
и
1
large-9
в сумме составляют 12 колонок (3 + 9 = 12) и полностью занимают всю ширину блока
1
header
.

Следующее, большое изображение по центру страницы также является строкой row, внутри которой расположена одна единственная колонка. Эта колонка имеет класс

1
large-12
, чтобы занимать ширину всех 12 колонок CSS-сетки в целом. Остальная часть этой страницы-примера построена по такому же принципу, используя строки
1
row
и колонки
1
columns
. на картинке ниже мною были добавлены оранжевые границы к блокам-колонкам для того, чтобы визуально облегчить понимание того, как была построена эта страница:

Страница примера Foundation с очерченными границами блоков

Если взглянуть на исходный код данной страницы-примера, то можно увидеть достаточно много кода, большая часть из которого не имеет отношения к созданию CSS-сетки на этой странице. Мною специально было произведено упрощение кода данного шаблона, чтобы оставить только те классы и элементы, которые создают CSS-сетку этой страницы. Изучите представленный мною ниже код с тем, чтобы затем перейти к более детальному описанию каждого из CSS-классов:

<!-- Header and Nav -->
<div class="row">
  <div class="large-3 columns">
    <!-- logo -->
  </div>
  <div class="large-9 columns">
    <!-- navigation -->
  </div>
</div>

<!-- First Band (Image) -->
<div class="row">
  <div class="large-12 columns">
    <!-- large center image -->
  </div>
</div>

<!-- Second Band (Image Left with Text) -->
<div class="row">
  <div class="large-4 columns">
    <!-- left image -->
  </div>
  <div class="large-8 columns">
    <!-- text content -->
  </div>
</div>

<!-- Third Band (Image Right with Text) -->
<div class="row">
  <div class="large-8 columns">
    <!-- text content -->
  </div>
  <div class="large-4 columns">
    <!-- right image -->
  </div>
</div>

<!-- Footer -->
<footer class="row">
  <div class="large-12 columns">
    <div class="row">
      <div class="large-6 columns">
        <!-- copyright -->
      </div>
      <div class="large-6 columns">
        <!-- footer links -->
      </div>
    </div>
  </div>
</footer>

Классы CSS-сетки Foundation

Существует пять основных классов CSS-сетки, которые следует запомнить при работе в фреймворке Foundation 5:

  • 1
    
    row
    - класс
    1
    
    .row
    служит контейнером для вертикальных блоков-колонок; ни для каких других целей он не предназначен. При добавлении контента в HTML-страницу каждая новая строка занимает всю ее ширину. Например, такие блоки, как “шапка” сайта и его “подвал” обязаны иметь класс
    1
    
    row
    с вложенными в него колонками.
  • 1
    
    columns
    - внутри каждой строки любому HTML-элементу можно добавить класс
    1
    
    columns
    для того, чтобы он смог занимать определенную часть от общей ширины в 12 колонок. Для удобства, можно использовать как класс
    1
    
    columns
    , так и класс
    1
    
    column
    - результат будет одинаковым. Каждый элемент, которому присвоен класс
    1
    
    columns
    или
    1
    
    column
    обязан иметь еще один класс, который определяет ширину этого элемента.
  • 1
    
    small-#
    - фреймворк Foundation имеет в своем составе несколько CSS-классов, которые устанавливают адаптивную ширину колонки; каждый из таких классов имеет число, обозначающее, сколько именно колонок следует занимать для данного класса. Например, элемент с классом
    1
    
    small-4
    будет занимать ширину четырех колонок. Если не указан никакой другой адаптивный размер, такой как
    1
    
    medium-#
    или
    1
    
    large-#
    , то указанные в этом классе CSS-правила унаследуются и для больших размеров экранов.
  • 1
    
    medium-#
    - этот класс впервые был введен в Foundation 5 и он предназначен для экранов планшетных компьютеров. Если в коде HTML-элемент имеет как класс
    1
    
    small-#
    , так и класс
    1
    
    medium-#
    , то маленькие размеры колонок будут использоваться для показа на мобильных устройствах; средние размеры колонок будут использоваться на экранах планшетных компьютеров и десктопных также. Например, у вас в коде HTML-элемент может иметь одновременно класс
    1
    
    small-4
    и класс
    1
    
    medium-8
    , если необходимо, чтобы этот элемент занимал ширину четырех колонок на экране мобильного телефона, но увеличивал свой размер до восьми колонок на экране планшетного компьютера.
  • 1
    
    large-#
    - как вы уже могли догадаться, класс
    1
    
    large-#
    предназначен для создания колонок под экраны ноутбуков или десктопов. Однако, если для HTML-элемента будет задан только один класс для больших мониторов, без указания классов для средних и маленьких размеров экранов, то в результате разметка будет изменять свой вид и превращаться в одноколоночную при изменении размеров экрана. Это очень полезно в том случае, если разметка является многоколоночной для десктопного монитора, а для планшетного или мобильного - одноколоночной. В рассмотренном выше шаблоне-примере вы могли заметить, что все HTML-элементы имеют только один класс
    1
    
    large-#
    ; этот шаблон превращается в одноколоночный при меньший размерах экрана, потому что для элементов не заданы классы
    1
    
    small-#
    и
    1
    
    medium-#
    .

Рассказанное выше звучит довольно запутанно, но на самом деле все просто. Если необходимо создать двухколоночную разметку сайта, которая будет превращаться в одноколоночную на экранах мобильных телефонов, необходимо поступить таким образом:

<div class="row">
  <div class="large-8 columns">
    <!-- text content -->
  </div>
  <div class="large-4 columns">
    <!-- right image -->
  </div>
</div>

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

1
small-6
:

<div class="row">
  <div class="small-6 large-8 columns">
    <!-- text content -->
  </div>
  <div class="small-6 large-4 columns">
    <!-- right image -->
  </div>
</div>

Именно класс

1
small-6
заставляет оба блока быть равными по ширине. Эти классы переопределяют значения классов
1
large-8
и
1
large-4
.

Дополнительные возможности CSS-сетки

Как и следовало ожидать, у CSS-сетки фреймворка Foundation имеется гораздо больше возможностей, чем было описано выше. Данная статья имеет целью описать только ее основные возможности, но если вы хотите узнать больше, почитайте эту документацию - [Getting Started][8].

Вложенность в CSS-сетке

В CSS-сетке фреймворка Foundation имеется возможность вкладывать строки внутрь колонок. Такой прием называется “вложенность” и с ним нужно быть достаточно осторожным на практике, так как можно легко запутаться при написании кода:

<div class="row">
  <div class="large-8 columns">
    <!-- вложенность -->
    <div class="row">
      <div class="small-4 columns">
        <!-- вложенный контент -->
      </div>
      <div class="small-8 columns">
        <!-- nested right image -->
      </div>
    </div>
  </div>
  <div class="large-4 columns">
    <!-- right image -->
  </div>
</div>

Центрирование колонок в Foundation

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

1
footer
в целом. Класс
1
small-centered
поместит маленький элемент точно по центру внутри его строки-контейнера. Если необходимо, чтобы элемент располагался по центру только для больших экранов, то к нему необходимо применить класс
1
large-centered
:

<div class="row">
  <div class="large-8 large-centered columns">
    <!-- центрируемое содержимое -->
  </div>
</div>

Смещение в CSS-сетке Foundation

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

В этих случаях можно использовать классы смещения (offset), например, такой -

1
large-offset-3
. Такой класс заставит элемент сместиться вправо на указанную ширину. Также, как и с классами колонок, здесь есть варианты смешения для маленьких экранов (
1
small-offset-#
), средних экранов (
1
medium-offset-#
), маленьких экранов (
1
small-offset-#
):

<div class="row">
  <div class="large-8 large-offset-3 columns">
    <!-- смещаемый контент -->
  </div>
</div>

Незавершенные строки в Foundation

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

Такой подход позволяет решить некоторые проблемы, связанные с кросс-браузерностью, но если необходимо отменить такое поведение фреймворка, то просто добавьте класс

1
end
к последнему элементу, чтобы заставить его смещаться влево (
1
float: left
):

<div class="row">
  <div class="large-2 columns">
    <!-- левая колонка -->
  </div>
  <div class="large-3 columns">
    <!-- центральная колонка -->
  </div>
  <div class="large-2 end columns">
    <!-- последняя колонка -->
  </div>
</div>

Порядок следования

При создании HTML-страниц с помощью строк row и колонок columns имеется уникальная возможность расположить элементы внутри этих страниц совсем не в том порядке, в каком они располагаются в браузере. Например, у вас имеется двухколоночная HTML-разметка, в которой есть левый боковой блок и блок с основным содержимым.

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

Два блока могут поменяться своими местами друг с другом используя такую возможность в фреймворке Foundation. Используя классы типа

1
large-pull-3
и
1
large-pull-9
можно изменить местоположение элементов (или группы элементов):

<div class="row">
  <div class="large-9 large-pull-3 columns">
    <!-- основной блок -->
  </div>
  <div class="large-3 large-pull-9 columns">
    <!-- боковой блок -->
  </div>
</div>

И еще …

Данная статья является всего лишь введением в систему CSS-сеток фреймворка Foundation; но в нем есть еще много тем для изучения, таких как стилизация форм, модули и типографика. Обо всем этом вы можете почитать в главе Getting Started.

На этом перевод окончен. Оригинал статьи размещен здесь - The Beginner’s Guide to Grids with Zurb Foundation 5.


Обзор установки слайдера slick под библиотеку jQuery. Данный плагин занимает одно из наиболее высоких мест в рейтинге плагинов для создания слайдшоу - slick - jQuery.

Наверное, это место он получил заслуженно, поэтому стоит с ним разобраться и положить в свою копилочку веб-разработчика. Домашняя страничка плагина с описание установки и различных примеров работы находится здесь - slick Demos. Плагин мне понравился всем - он имеет в своем составе все функции управления, легок и прост в установке, HTML-разметка для его создания проста и семантична. В комплекте плагин slick имеет полный набор настроек, которые легко подключить в файле конфигурации.

Подключение плагина slick

Процесс подключения плагина slick в рабочем проекте очень прост, только нужно соблюдать правильность выполнения шагов.

Создание разметки под slick

HTML-разметка под плагин slick семантична и проста. Достаточно создать список с произвольным именем класса. В руководстве Getting Started на официальной странице плагина slick приводится такой пример HTML-разметки:

<div class="slider">
  <div><img src="images/slide_02.jpg" alt="Slider 2" /></div>
  <div><img src="images/slide_03.jpg" alt="Slider 3" /></div>
  <div><img src="images/slide_04.jpg" alt="Slider 4" /></div>
  <div><img src="images/slide_05.jpg" alt="Slider 5" /></div>
  <div><img src="images/slide_06.jpg" alt="Slider 6" /></div>
</div>

Моя попытка создать слайдер на основе HTML-разметки в виде обычного маркированного списка:

<ul>
  <li><img src="images/slide_02.jpg" alt="slick 1" /></li>
  <li><img src="images/slide_03.jpg" alt="slick 2" /></li>
  <li><img src="images/slide_04.jpg" alt="slick 3" /></li>
  <li><img src="images/slide_05.jpg" alt="slick 4" /></li>
</ul>

… успеха не принесла - плагин slick не заработал! Возможно, стоит через CSS-стили преобразовать элементы

1
ul
,
1
li
в блочные и тогда все заработает? Однако, это дополнительные действия, без которых можно обойтись и поступить так, как описано в официальной документации.

Получение файла плагина slick

Следующим шагом будет получение архива плагина slick. Это можно сделать несколькими способами. Первый - это скачать его со страницы Go Get It. Или же перейти на страницу GitHub автора и забрать оттуда zip-архив плагина - slick GitHub. В обоих случаях получим архив с именем

1
slick-master.zip
, который нужно распаковать. И разархивированной папки нам необходима только одна папка, которая находиться внутри - slick. Переносим ее в свой проект целиком, как есть.

Подключение плагина slick в HTML-документе

В “шапке”

1
head
HTML-документа производим подключение готовых CSS-стилей плагина slick:

<link rel="stylesheet" href="slick/slick.css" />

В теле HTML-документа перед закрывающим тегом

1
</body>
вставляем три строки с js-скриптами:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Как видим, в первых двух строках производится скачивание библиотеки jQuery-1.11.0 и плагина jQuery Migrate 1.2.1 через CDN. Третий плагин

1
slick.min.js
- сам скрипт slick, который подключается локально, из распакованной и перемещенной в проект папки slick.

Инициализация плагина slick

Перед закрывающим тегом

1
</body>
подключаем скрипт инициализации плагина:

$(document).ready(function(){
  $('.slider').slick({
    dots: true
  });
});

Итоговая HTML-разметка и подключение CSS-таблиц, JS-скриптов будет выглядеть таким образом:

<ul class="slider">
  <li><img src="images/slide_02.jpg" alt="Slider 2" /></li>
  <li><img src="images/slide_03.jpg" alt="Slider 3" /></li>
  <li><img src="images/slide_04.jpg" alt="Slider 4" /></li>
  <li><img src="images/slide_05.jpg" alt="Slider 5" /></li>
  <li><img src="images/slide_06.jpg" alt="Slider 6" /></li>
</ul>

Консоль браузера Google Chrome

Мне хочется упомянуть о такой полезной вещи, как консоль браузера Google Chrome. Почему она полезная? Потому что она уже второй раз выручает меня (первый раз это было с плагином jqFancyTransitions - Слайдер jqFancyTransitions) и помогает найти ошибки при подключении скриптов в HTML-документе. Незаменимая штука!

Чтобы проиллюстрировать пример использования и полезности консоли Chrome, запускаю в браузере индексный index.html файл, который создал ранее.

И что?! Позвольте, а где-же плагин slick - где слайдер, созданный с его помощью? Где те обещанные красоты, которые так ярко продемонстрированы на официальной странице проекта - Demos?! Странно - но их нет!

Хех, а я правильно выполнил подключение скрипта? Ну-ка, еще раз “пробегусь” по документации… Все верно, но у меня ничего не работает… Может, все-же переписать индексную страницу заново? Может быть, но таких “а может” наберется большое количество, с различными вариациями…

Но давайте я открою консоль браузера Google Chrome и перейду в ней на вкладку “Network”:

Консоль браузера Google Chrome

Вот и причина того, что плагин slick не работает на моей странице! Просто библиотеку jQuery 1.11.0 и ее плагин jQuery Migrate 1.2.1 браузеру Chrome не удалось подгрузить через CDN. Сколько бы я еще потратил времени и нервов, чтобы методом “научного тыка” определить причину “поломки”, если бы не эта консоль, неизвестно.

Разбираться, почему не удалось браузеру подгрузить оба этих файла через CDN, у меня нет ни желания, ни времени. Поэтому я просто скачаю оба этих файла “вручную” и подключу локально:

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>

Снова запускаю индексную страницу index.html в браузере Google Chrome и … о Чудо! Плагин slick работает:

Плагин slick работает

Картинки прокручиваются автоматически и внизу видна пагинация, сгенерированная скриптом slick согласно настройкам:

dots: true,
autoplay: true

… в конфигурационном файле. Помимо этого, были сгенерированы стрелки для перемотки изображений “вручную” взад-вперед (они не видны на белом фоне HTML-страницы). Другие многочисленные настройки плагина slick можно посмотреть на официальной странице - Settings.

Кстати, стоит отметить, что автор плагина slick настоятельно рекомендует выносить настройки плагина в отдельный внешний js-файл, вместо того, чтобы вставлять скрипт непосредственно в HTML-документ:

NOTE: I highly recommend putting your initialization script in an external JS file.

В этой статье я так не поступил по одной простой причине - ради наглядности примера и быстроты его создания.

Редактирование плагина slick

Теперь осталось дело за малым - вооружившись инспектором элементов страницы (к примеру, Firebug), “вытащим” из DOM-дерева нашей страницы имена классов нужных нам элементов и произведем их легкое редактирование через CSS-правила:

body{
  background-color: lighten(#ccc,5%);
  .slider{
    width: 300px;
    margin: 10px auto;
    padding: 5px;
    background-color: #ccc;
    border: 3px solid #000;
    @include border-radius(3px);
    .slick-dots{
      bottom: -30px;
    }
  }
}

Создаю для тела HTML-документа

1
body
легкую заливку. Для блока со слайдером
1
.slider
добавлю padding, границу со скруглением и фоновую заливку; отцентрирую его на странице и немного опущу вниз. А также немного приподниму вверх блок
1
.slick-dots
с пагинацией.

Смотрим результат:

Видоизмененный слайдер slick

Заключение

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

Удачного кодинга!


Продолжение темы Foundation, в которой рассмотрен вопрос создания группы кнопок (button group) и панели кнопок (button bar).

В предыдущем обзоре я с вами научился создавать кнопки на Foundation - “Foundation - создаем кнопки”. В этом обзоре мы научимся создавать группы кнопок (button group) - несколько кнопок, объединенных в группу. Такие кнопки могут применяться на странице для самых различных целей.

Группы кнопок (button group) на Foundation

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

1
.button
, как и в предыдущей статье. А для элемента
1
ul
мы присваиваем класс
1
.button-group
:

<ul class="button-group">
  <li><a href="#" class="button">Link 1</a></li>
  <li><a href="#" class="button">Link 2</a></li>
  <li><a href="#" class="button">Link 3</a></li>
</ul>

В результате получаем группу с набором кнопок внутри:

Button group на Foundation

Видоизменение группы кнопок (button group) на Foundation

Созданную таким образом группу кнопок можно видоизменять с помощью дополнительных классов, как это делалось ранее. К примеру создадим две группы кнопок и применим к ним дополнительные классы.

1
.radius
,
1
.round
,
1
.alert
,
1
.secondary
,
1
.success
Кстати, дополнительные классы можно применять не только к элементам
1
a
, но и к элементу
1
ul
:

<ul class="button-group radius">
  <li><a href="#" class="button alert">Link 1</a></li>
  <li><a href="#" class="button secondary">Link 2</a></li>
  <li><a href="#" class="button success">Link 3</a></li>
</ul>
<ul class="button-group round">
  <li><a href="#" class="button alert">Link 1</a></li>
  <li><a href="#" class="button secondary">Link 2</a></li>
  <li><a href="#" class="button success">Link 3</a></li>
</ul>

Результат будет что-то в виде цветов итальянского флага:

Button group с дополнительными классами

Панели кнопок (button bar) на Foundation

Группы кнопок, в свою очередь, можно объединять между собой, создавая панели кнопок (button bar). Для этой цели применяется элемент

1
div
в классом
1
.button-bar
:

<div class="button-bar">
  <ul class="button-group">
    <li><a href="#" class="button success small round">Link 1</a></li>
    <li><a href="#" class="button success small round">Link 2</a></li>
    <li><a href="#" class="button success small round">Link 3</a></li>
  </ul>
  <ul class="button-group round">
    <li><a href="#" class="button alert small">Link 1</a></li>
    <li><a href="#" class="button alert small">Link 2</a></li>
    <li><a href="#" class="button alert small">Link 3</a></li>
  </ul>
</div>

Результат будет примерно таким:

Button bar на Foundation

Видоизменение панели кнопок (button bar) на Foundation

Точно также, как и группу кнопок с классом

1
.button-group
, панель кнопок
1
.button-bar
можно видоизменять с помощью все тех же дополнительных классов, как показано на примере выше.

Создание button group и button bar c помощью Sass

Ну и по становящейся уже традиции переходим к вопросу создания панели кнопок (button bar) на Foundation c помощью Sass. Для этой цели служат два миксина:

  • 1
    
    button-group-container
  • 1
    
    button-group-style

Создаю HTML-разметку с произвольным именем класса

1
.horizontal
:

<ul class="horizontal">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

В файле

1
app.scss
прописываю для него следующие правила:

.horizontal{
  @include button-group-container;
  a{
    @include button;
  }
  &>li{
    @include button-group-style;
  }
} /* end horizontal */

Результат получается таким:

Button bar с помощью Sass на Foundation

У миксинов

1
button-group-container
и
1
button-group-style
имеются дополнительные параметры для тонкой настройки. Пример использования данных параметров показан на странице официальной документации - Button groups.

Редактирование файла app.scss

До этого момента так и не удосужился рассмотреть вопрос редактирования файла

1
app.scss
. Точнее, я уже упоминал о нем в начале обзора Foundation как о пользовательской таблице стилей, куда можно и нужно писать свои собственные CSS-правила. Вот теперь решил, что как раз настало время исправить свой недочет.

В начале файла

1
app.scss
имеются две строки:

@import "settings";
@import "foundation";

Назначение их должно быть понятно:

  • строка
    1
    
    @import "settings";
    импортирует Sass-переменные и их значения в проект
  • строка
    1
    
    @import "foundation";
    импортирует сам фреймворк Foundation в проект

Однако, по аналогии с библиотекой Compass под препроцесор Sass, фреймворк Foundation позволяет выборочно импортировать в проект те свои возможности, которые необходимы на данный момент. Все эти возможности оформлены в виде отдельных модулей и прописаны каждый в отдельной строке файла

1
app.scss
в виде длинного закоментированного списка:

@import "settings";
@import "foundation";

// Or selectively include components
//   @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
...

Допустим, на данный момент нам необходим модуль фреймворка Foundation для создания групп (button group) и панелей (button bar) кнопок. Такой модуль располагается в строке (легко найти по названию!):

// "foundation/components/button-groups";

И чтобы подключить только его, нужно выключить весь фреймворк Foundation целиком - закоментировать строку:

// @import "foundation";

и раскомментировать нижележащие строки следующим образом (только не забыть заменить запятую на точку с запятой в конце):

@import "settings";
// @import "foundation";

// Or selectively include components
@import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
"foundation/components/button-groups";
// @import "foundation/components/buttons";
//   "foundation/components/clearing",

Вуаля! Все работает и не нужно “тащить” за собой целый воз плюшек, которые не нужны на данный момент.


Начинаем изучение фреймворка Foundation. Этот фреймворк входит в двойку самых популярных и распространенных CSS-фреймворков на момент написания статьи (еще один - Twitter Bootstrap).

Можно по разному относиться к фреймворкам - любить их или не любить. Однако, они есть и ими пользуются при создании сайтов. Данный факт говорит о том, что фреймворки - это все-таки не такое уж и Зло. Скорее всего, нужно выработать для себя такое отношение к фреймворкам, что это быстрый способ создать что-либо непритязательное - не слишком оригинальное по дизайну, со стандартизированными элементами и не слишком оптимизированным кодом (читай - с большой долей мусора). А вот если к шаблону предъявляются повышенные требования, вот тогда нужно писать весь код вручную.

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

Сайт проекта Foundation

Официальный сайт проекта находится по этому адресу - Foundation. Если внимательно присмотреться, то можно заметить, что на странице проекта и в других местах часто мелькает слово ZURB - это название дизайнерской фирмы, которая и создала фреймворк.

Если бегло пробежаться по документации, то можно увидеть множество “плюшек” у данного фреймворка:

  • фирменную консольную утилитку foundation для разворачивания или обновления проекта на Foundation
  • коллекцию сниппетов под Sublime Text для быстрого создания различных компонент HTML-страницы
  • тесная интерграция с препроцессором Sass

Естественно, Foundation заявляется как полностью адаптивный фреймворк, нацеленный прежде всего на создание мобильных версий сайтов (Mobile First).

Способы установки Foundation

Как говориться на странице документации, существует три способа установки фреймворка на локальном компьютере:

  • Getting Started With Foundation CSS - самый простой и быстрый способ установки и начала работы. Нужно просто скачать и распаковать архив с готовым фреймворком
  • Getting Started With Sass - разворачивание фреймворка c поддержкой Sass/Compass. Установка на локальный компьютер производится автоматически, с помощью уже упоминавшейся консольной утилиты foundation
  • Applications - это что-то связано с разработкой приложений под Foundation. В общем, для front-end это не интересно

В дальнейшей статье приступим в установке Foundation вторым способом, так как мы уже хорошо знаем и умеем пользоваться препроцессором Sass и его библиотекой Compass.

Установка Foundation c поддержкой Sass

Для установки фреймворка на локальный компьютер с поддержкой Sass/Compass потребуется предварительное начилие на нем таких программных продуктов, как:

  • Git - нужен для работы Bower
  • Ruby - нужен для работы Sass/Compass
  • Nodejs - нужен для работы Grunt

Foundation версии 5 использует для установки своих компонентов, а также для обновления себя самого в целом менеджер пакетов Bower, поэтому его наличие также жизненно необходимо в системе. Помимо этого, фреймворк может работать совместно с менеджером задач Grunt для конкатенации файлов; но наличие Grunt не является обязательным.

Проверяю наличие трех вышеназванных пакетов в своей системе Linux Mint 17. Все три пакета были установлены мною гораздо раньше. Как выполнить установку Git, Ruby, Nodejs, Grunt и Bower под Linux Mint 17, можно почитать в этой статье - “Установка Node.js, npm и Bower под Linux Mint”:

$ git --version
git version 1.9.1
$ ruby --version
ruby 1.9.3p484 (2013-11-22 revision 43786) [x86_64-linux]
$ nodejs --version
v0.10.25
$ bower --version
1.3.3

Установка Bower и Grunt, если они еще не были инсталлированы в системе, производится простой командой:

$ npm install -g bower grunt-cli

Все готово для установки консольной утилиты

1
foundation
. Вы спросите - что это еще за утилита такая и зачем она нужна? Все просто - это фирменная утилитка от Foundation и ее задача - автоматизированное разворачивание готового проекта на локальной машине.

Устанавливаем утилиту foundation:

$ gem install foundation

Сама утилитка foundation очень проста. Вызову команду

1
help
и все станет понятно без слов:

$ foundation help
Commands:
  foundation help [COMMAND]  # Describe available commands or one specific command
  foundation new             # create new project
  foundation update          # update an existing project
  foundation upgrade         # Upgrade your Foundation 4 compass project
  foundation version         # Display CLI version

Разворачивание Foundation c поддержкой Compass

C помощью утилиты foundation можно развернуть на локальной машине фреймворк c поддержкой:

  • Grunt и Libsass
  • Compass

Я воспользуюсь вторым вариантом и запущу установку Foundation c поддержкой Compass. Для этого нужно выполнить команду:

$ foundation new new_project_name

В моем случае имя нового проекта было оригинальным - foundation )) Пару секунд ожидания и я получаю папку с таким содержимым:

$ ls -l
drwxr-xr-x bower_components
-rw-r--r-- bower.json
-rw-r--r-- config.rb
-rw-rw-rw- Foundation.md
-rw-r--r-- humans.txt
-rw-r--r-- index.html
drwxr-xr-x js
-rw-r--r-- README.md
-rw-r--r-- robots.txt
drwxr-xr-x scss

Новый проект на Foundation

Новый проект на Foundation

Видим здесь файлы

1
config.rb
,
1
bower.json
,
1
index.html
; папки
1
bower_components
,
1
js
,
1
scss
. Другими словами - это готовый проект!

Немного подредактирую файл

1
config.rb
и запускаю Compass на мониторинг изменений в текущем проекте:

$ compass watch .

Проект готов для работы! В следующем обзоре будет рассмотрен самый простой пример работы с данным фреймворком - я с вами научусь создавать кнопки на Foundation.


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

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

Итак, в [первой части знакомства с Foundation][1] я с вами установил фреймворк Foundation c поддержкой Sass/Compass под операционной системой Linux Mint 17 и подготовил его к работе. Давайте откроем созданный утилитой foundation индексный файл index.html и рассмотрим его содержимое. “Шапка”

1
head
этого HTML-документа не представляет из себя что-то особенное, кроме двух строк:

<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>

В первой строке производится подключение файла CSS-стилей

1
app.css
, который служит для создания пользовательских CSS-правил. Другими словами, фреймворк Foundation представляет из себя набор готовых CSS-стилей (на то он и фреймворк). Но не всегда готовые CSS-стили отвечают конкретным требованиям дизайна страницы. Чтобы изменить или переопределить готовые CSS-стили фреймворка Foundation, служит таблица стилей
1
app.css
- именно туда нужно вносить свои собственные CSS-правила.

Вторая строка - это подключение библиотеки Modernizr и больше тут сказать нечего.

Если заглянуть в самый конец HTML-документа, то увидим три строки подключения js-скриптов перед закрывающим тегом

1
</body>
:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>

Ситуация здесь почти такая же, как и с “шапкой” head документа. Подключается библиотека jQuery (куда же без нее?), коллекция готовых js-скриптов от Foundation

1
foundation.min.js
для создания разнообразных меню, табов и тому подобное. Скрипт
1
app.js
служит для тех же целей, что и таблица стилей
1
app.css
- для внесения пользовательских изменений.

Между тегами

1
<body></body>
размещено содержимое документа в виде CSS-сетки Grid, к которой я вернусь немного позже. Сейчас я произвожу очистку этого содержимого, чтобы писать в нем свой собственный HTML-код.

Кнопки на Foundation

Создание кнопок на фреймворке Foundation занятие малоутомительное. Для этой цели используется тег

1
a
, которому присваивается имя готового CSS-класса
1
.button
. Помимо этого, имеются три или четыре группы классов, с помощью которых можно создавать различные варианты кнопок - разного цвета, формы и назначения.

Кнопки, созданные на Foundation c помощью предопределенных классов, имеют полностью готовый вид, вплоть до CSS-свойства transition.

Обычная кнопка на Foundation

Как я уже упоминал выше, для создания кнопки под Foundation достаточно присвоить тегу

1
a
имя готового класса
1
.button
. Давайте так и сделаем:

<a href="#" class="button">read more</a>

Обычная кнопка на Foundation

Все очень просто. Готовый результат можно посмотреть в браузере. Я же перейду к более интересному вопросу создания различных модификаций (вариантов) стандартной кнопки

1
.button
.

Кнопки разных размеров

Начнем с группы классов, служащих для создания кнопок различных размеров. В этой группе имеются четыре класса для создания четырех размеров кнопок:

  • 1
    
    .tiny
    - крошечная кнопка
  • 1
    
    .small
    - маленькая кнопка
  • 1
    
    .medium
    - средняя кнопка
  • 1
    
    .large
    - большая кнопка

В качестве примера приведу ниже HTML-код создания таких кнопок:

<a href="#" class="button tiny">tiny</a>
<a href="#" class="button small">small</a>
<a href="#" class="button medium">medium</a>
<a href="#" class="button large">large</a>

Кнопки разных размеров на Foundation

Как видно из приведенного выше кода, используется мультиклассовость - добавление к классу

1
.button
любого из классов размера кнопки -
1
.tiny
,
1
.small
,
1
.medium
,
1
.large
. Смешение CSS-правил обоих классов дает в результате нужный вид кнопки. Впрочем, все это должно быть известно из основ CSS.

Скругленные кнопки на Foundation

В фреймворке имеются два готовых класса для создания скругленной формы у кнопки. Первый класс -

1
.radius
задает радиус скругления углов у кнопки. Второй радиус
1
.round
создает круглую кнопку.

  • 1
    
    .radius
    - радиус ускругления углов у кнопки
  • 1
    
    .round
    - круглая кнопка

HTML-код создания таких кнопок показан ниже:

<a href="#" class="button radius">radius</a>
<a href="#" class="button round">round</a>

Скругленные кнопки на Foundation

Информационные кнопки на Foundation

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

  • 1
    
    .secondary
    - обычная кнопка
  • 1
    
    .success
    - кнопка, информирующая об успешном выполнении задачи
  • 1
    
    .alert
    - кнопка предупреждения о чем-либо

HTML-код для создания информационных кнопок:

<a href="#" class="button secondary">secondary</a>
<a href="#" class="button success">success</a>
<a href="#" class="button alert">alert</a>

Информационные кнопки на Foundation

Другие варианты кнопок

Есть еще два класса для создания двух состояний кнопки. Первый класс

1
.disabled
делает кнопку неактивной с помощью CSS-свойства
1
cursor: default;
. Второй класс
1
.expand
заставляет кнопку занимать всю ширину блока-родителя и становиться просто огромной!

  • 1
    
    .disabled
    - кнопка делается неактивной
  • 1
    
    .expand
    - кнопка на всю ширину блока-родителя

HTML-код двух описанных выше кнопок:

<a href="#" class="button disabled">disabled</a>
<a href="#" class="button expand">expand</a>

Другие варианты кнопок на Foundation

Тонкая настройка кнопок в Foundation

Помимо возможности использования готовых классов с предустановленными CSS-значениями, в фреймворке Foundation можно изменять значения по умолчанию из готового файла настроек. Данный файл называется

1
_settings.scss
и располагается в папке scss.

В этом файле собраны настройки в виде переменных Sass для всех компонентов фреймворка Foundation, но в данном случае нам необходимы переменные, отвечающие за настройку кнопок. Данные переменные находятся в секции файла, начинающейся со строки

1
BUTTONS
:

$include-html-button-classes: $include-html-classes;

// Настройка величины padding кнопок
// $button-tny: rem-calc(10);
// $button-sml: rem-calc(14);
// $button-med: rem-calc(16);
// $button-lrg: rem-calc(18);

// Настройка блочной модели и нижнего margin кнопки
// $button-display: inline-block;
// $button-margin-bottom: rem-calc(20);

// Настройка шрифта надписей кнопок
// $button-font-family: $body-font-family;
// $button-font-color: #fff;
// $button-font-color-alt: #333;
// $button-font-tny: rem-calc(11);
// $button-font-sml: rem-calc(13);
// $button-font-med: rem-calc(16);
// $button-font-lrg: rem-calc(20);
// $button-font-weight: $font-weight-normal;
// $button-font-align: center;

// Настройка эффекта hover
// $button-function-factor: -20%;

// Настройка границ кнопок
// $button-border-width: 0px;
// $button-border-style: solid;
// $button-bg: $primary-color;
// $button-border-color: scale-color($bg, $lightness: $button-function-factor);

// Настройка радиуса скругления кнопок
// $button-radius: $global-radius;
// $button-round: $global-rounded;

// Настройка прозрачности кнопки с классом disabled
// $button-disabled-opacity: 0.7;

В принципе, элементарных знаний CSS должно быть достаточно, чтобы понять предназначение всех этих переменных. Поэтому давайте ради примера выполним пару изменений, чтобы увидеть результат. Для этого находим в файле

1
_settings.scss
строку
1
BUTTONS
(за поиск в Sublime Text отвечает сочетание клавиш Ctrl+F) и раскомментируем строки с теми переменными, которые нам необходимы.

Пусть это будут строки:

$button-tny: rem-calc(10);
$button-font-color: #fff;

… в которых изменим значение переменных по умолчанию на:

$button-tny: rem-calc(12);
$button-font-color: #ddd;

Если теперь заглянуть в инспектор свойств Firebug, то увидим, что padding для кнопки с классом

1
.tiny
увеличился; а также изменился цвет шрифта надписи с белого
1
#fff
на серый
1
#ddd
.

Создание кнопок с помощью Sass

Рассмотренный выше способ редактирования значений переменных для тонкой настройки кнопок хорош. Но все-таки он утомителен и времязатратен - это нужно открыть файл

1
_settings.scss
, найти в нем Sass-переменные, раскомментировать их и изменить их значение.

Фреймворк Foundation имеет в своем арсенале еще один способ использования готовых CSS-классов и тонкой настройки Sass-переменных. Преимущество этого способа еще в том, что он по настоящему семантичен и позволяет не загромождать HTML-разметку чрезмерным количеством CSS-классов. Короче - этот способ использует Sass-миксины для подключения CSS-классов и изменения значений Sass-переменных.

Допустим, в нашей HTML-разметке имеется ссылка:

<a class="readmore">Read More</a>

Чтобы превратить ее в кнопку на Foundation, нужно в файле

1
app.css
прописать следующее:

.readmore{
  @include button;
}

В результате получим готовую кнопку! Чтобы иметь более тонкую настройку при создании кнопки, нужно передать миксину button переменные в качестве аргументов:

.readmore{
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

Например, таким образом:

.readmore{
  @include button($bg: #778899, $radius: true);
}

Кнопка с помощью миксина на Foundation

На этом все.