В сети существует множество полезных инструментов для создания адаптивных сайтов, в том числе и готовых шаблонных решений, среди которых Тwitter Bootstrat, 1140 Grid, Skeleton и т.д. В использовании фреймворков есть, конечно, и свои минусы, но главное их достоинство в том, что они помогают существенно сократить время создания сайтов. Сегодня мы хотим познакомить вас с Zurb Foundation  и научимся делать простой шаблон блога при помощи этого фреймворка.

 Окончательный результат:

Демо

Знакомство с Foundation

Фреймворк состоит из демонстрационного HTML-кода, CSS- и JavaScript-файлов, а также дополнительных изображений. У вас есть возможность выбрать один из трeх вариантов: скачать версию со стилями по умолчанию (Default CSS), самостоятельно настроить некоторые стили: структуру сетки, цвета и типографику, размер кнопок и т.д. (Custom css) или установить Foundation SCSS ( Sass+Compass).

Посетить сайт

Создаем структуру сайта

Модульная сетка фреймворка (12-ти колоночная по умолчанию) позволяет с легкостью создавать адаптивные шаблоны шаблоны страниц для десктопа и мобильных устройств. Если вы знакомы с grid-системами, вы будете чувствовать себя, как дома.  Она состоит из двух ключевых элементов: строки и столбцов. Строки создают максимальную ширину и содержат столбцы, которые формируют структуру. Размер столбцов будет изменяться в зависимости от размеров экрана монитора. Мы установили максимальную ширину столбца (.row ) 1000px.

Для начала давайте определимся с «фундаментом». Структура макета нашего блога будет выглядеть приблизительно так:

<div class="row">
 <div class="twelve columns">
    <h2>Шапка/12 колонок</h2>
   </div>
</div>
<div class="row">
 <div class="twelve columns">
    <div class="row">
      <div class="eight columns">
        <h2>Контент/8 колонок</h2>
       </div>
       <div class="four columns">
         <h2>Сайдбар/4 колонки</h2>
       </div>
     </div>
   </div>
</div>
<div class="row">
 <div class="twelve columns">
    <h2>Футер/12 колонок</h2>
      </div>
</div>

Добавляем логотип

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

<div class="row">
 <div class="twelve columns">
 <header>
       <h2 class="logo"><a href="#">Дежурка</a></h2>
 </header>
   </div>
 </div>

Затем создадим новый файл стилей и прикрепим его к html-документу (у нас он называется main.css). Для замены текста картинкой мы будем использовать следующее решение:

h2 a{
 background: url("../images/logo.gif") no-repeat scroll 0 0 transparent;
 color: transparent;
 display: block;
 font: 0px/0 a;
 height: 83px;
 text-shadow: none;
 width: 229px;
}

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

Добавляем навигацию

Вы можете использовать готовое решение для вашей навигации. Просто выберите один из нескольких вариантов и вставьте код. Мы будем использовать горизонтальное выпадающее меню:

<li class="has-flyout">
  <a href="#">Nav Item 2</a>
  <a href="#" class="flyout-toggle"><span> </span></a>
  <ul class="flyout">
    <li><a href="#">Sub Nav Item 1</a></li>
    <li><a href="#">Sub Nav Item 2</a></li>
    <li><a href="#">Sub Nav 3</a></li>
    <li><a href="#">Sub Nav 4</a></li>
    <li><a href="#">Sub Nav Item 5</a></li>
  </ul>
</li>

Обратите внимание на то, что родитель имеет класс .has-flyout. Мы изменили названия разделов и добавили выпадающий список к пятому пункту. Меню для нашего блога будет иметь следующую структуру:

<ul class="nav-bar">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Графика</a></li>
  <li><a href="#">Веб-дизайн</a></li>
  <li><a href="#">Вдохновение</a></li>
  <li class="has-flyout"><a href="#">Статьюшечки</a>
  <a href="#" class="flyout-toggle"><span> </span></a>
    <ul class="flyout">
      <li><a href="#">Теория дизайна</a></li>
      <li><a href="#">Основы</a></li>
      <li><a href="#">Интервью</a></li>
      <li><a href="#">Инструменты</a></li>
    </ul>
   </li>
   <li><a href="#">Новости</a></li>
</ul>

Добавляем слайдер (Orient)

Огромный плюс Zurb Foundation в наличии адаптивного слайдера изображений Orbit, который вы также можете использовать отдельно от фреймворка. Для того, чтобы добавить слайдер, мы включили следующий код в контейнер для контента:

<div id="featured">
  <img src="images/foundation/orbit/demo1.jpg" />
  <img src="images/foundation/orbit/demo2.jpg" />
  <img src="images/foundation/orbit/demo3.jpg" />
</div> 

Загрузите нужные изображения и проверьте, правильно ли вы указали к ним путь. Чтобы активировать слайдер, добавьте следующий код внизу html-документа под остальными скриптами:

<script type="text/javascript">
   $(window).load(function() {
       $('#featured').orbit();
   });
</script>

Добавляем публикации

Наши публикации мы обозначили при помощи тега <article>

<article>
 <h3>Уроки по созданию тем для WordPress </h3>
 <p>If you want to be a successful web developer or designer, you always have to be a step ahead.
 Sooner or later, HTML5 is going to strengthen its position even further and you want to be ready
 when that happens.Mastering the latest technology will allow you to experiment, push things further,
 and give you a considerable edge in the market.For this roundup we prepared 30 fresh, brilliant and
 useful HTML5 tutorials from 2012 ranging from basic element explanation to advanced case studies.
 </p>
 <a href="#" class="secondary button">Подробнее</a>
 <hr>
</article>

Обратите вниманию на ссылку «Подробнее». Ей назначен класс «secondary button», благодаря этому она выглядит как кнопка. Фреймворк имеет много вариантов кнопок, и вы можете выбрать размер, тип и радиус кнопки, добавить группу кнопок и кнопки с выпадающим списком.

Добавляем постраничную навигацию

Теперь  давайте добавим постраничную навигацию под статьями. С Foundation это сделать очень легко: просто вставьте следующий код:

<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>

Добавляем табы

Теперь начнём работать над сайдбаром. Для начала давайте добавим табы. Согласно документации, сделать это можно так:

 
<dl class="tabs">
  <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
  <dd><a href="#simple2">Simple Tab 2</a></dd>
  <dd><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
  <li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
  <li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
  <li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
</ul>

Добавляем поиск

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

<div class="row collapse">
 <div class="eight mobile-three columns">
 <input type="text" />
 </div>
 <div class="four mobile-one columns">
 <a href="#" class="postfix button expand">Поиск</a>
 </div>
</div>

Добавляем видео

Чтобы добавить «резиновое» видео, достаточно выбрать нужный вариант , например:

<div class="flex-video widescreen vimeo">
 <iframe src="http://player.vimeo.com/video/5620113?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Добавляем футер

Для того, чтобы вставить футер, мы добавили следующий код:

<div class="row">
 <footer>
 <div class="twelve columns">
 <p>&copy; 2012 Все права защищены</p>
 </div>
 </footer>
</div> 

И в файл .main.css я добавила следующие стили:

footer{overflow: hidden; background: #444; padding-top: 10px; color: #bbb; }
footer p{font-size: 12px;

Последние штрихи

Затем мы немного изменили задний фон. Замечательный сайт subtlepatterns предлагает множество готовых решений. Мы выбрали заливку Bright Squares и установили ее для бекграунда сайта:

body { background: #e9e9e9 url(../images/main_bg.png);} 

А для столбцов (.row) я установила белый цвет

.row { background: #fff; }

Вот и всё, наш шаблон готов:

 Окончательный результат:

Демо

Тестируем

Существует множество сервисов для того, чтобы протестировать для того, чтобы протестировать ваш сайт на различных расширениях экранов, вот некоторые из них:

• Responsive Design Testing
• Screenfly

Фреймворк поддерживается всеми нормальными браузерами.

Заключение

Foundation есть еще много интересных возможностей: вы можете добавлять адаптивные модальные окна (Reveal), адаптивные таблицы, слайд-панели и многое другое. Надеюсь, данный урок вам пригодился. Все свои замечания и пожелания пишите в комментариях.

Автор: Дежурка

Возможно, вас также заинтересуют статьи:

• Создаём адаптивный сайт
• Адаптивные слайдеры и галереи изображений
• 6 уроков по созданию адаптивных навигационных меню
• Формы в отзывчивом веб-дизайне
• 24 полезных инструмента для создания адаптивных сайтов