Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Делаем адаптивный сайт при помощи Foundation

20 августа 2012 | Опубликовано в Веб-дизайн | 10 Комментариев »

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

 

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

Демо

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

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

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

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

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

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

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

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

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

Демо

 

Тестируем

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

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

Заключение

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

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

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




Комментарии

  1. Dasha
    Thumb up Thumb down -1

    Протестировать сайт на адаптивность можно легко и быстро!

    plastilin5.com/tools/

  2. Marina
    Thumb up Thumb down +1

    Привет! спасибо за классный туториал.

    если у меня 10 итемс-ов в меню. они сваливаются на след строку.

    как изменить паддинг чтоб они вместились?

    спасибо заранее!

    Elena Ответ:

    Thumb up Thumb down 0

    sebnitu.github.com/HorizontalNav/ — как вариант, можете использовать этот плагин

  3. JSN
    Thumb up Thumb down -1

    У Вас маленькая погрешность (а точнее избыточность кода) в начале поста в разделе создания структуры сайта. При создании блока контента и сайдбара нет необходимости их заключать в лишний .row с 12тью колонками т.к. эти 2 блока и так будут занимать всю ширину. Можно просто сразу было написать:

    8 колонок

    4 колоноки

    Вот если бы нам надо было чтобы контент и сайдбар были таких же пропорций (8/4), но занимали не всю ширину, а например только 9 колонок, то можно было использовать Ваш вариант, только в первом div написать соответственно class="nine columns". Хотя ничего страшного нет если так сделать как Вы предлагаете, но если таких «избыточных» описаний row-ов будет не один, как в примере, а 10 и более, то скорость рендеринга страницы может существенно уменьшиться.

    Надеюсь смог доступно изложить свою мысль.

  4. JSN
    Thumb up Thumb down +1

    ой съелся мой код =-O

  5. Александр
    Thumb up Thumb down -1

    Здравствуйте! Не подскажите на основе какой темы для wordpress, шло построение данного шаблона? Если я правильно понял, то достаточно скачать тему с официального сайта, установить её, и делать все так, как описано выше? Только как её установить, если она не для wordpress? Заранее спасибо.

  6. deb
    Thumb up Thumb down +1

    скажите пожалуйста как изменить задний фон

    body { background: #e9e9e9 url (../images/main_bg.png);} у меня не работает.

    body {

    background: white;

    пробовал

    1 background: #e9e9e9 url (bs.png);

    2 background: url (bs.png);

    color: #222222;

    padding: 0;

    margin: 0;

    font-family: «Helvetica Neue», «Helvetica», Helvetica, Arial, sans-serif;

    font-weight: normal;

    font-style: normal;

    line-height: 1;

    position: relative;

    cursor: default; }

  7. Ламер
    Thumb up Thumb down 0

    Странно, сайт на джикуаери, а чел про фоундаэйшэн пишет. *CRAZY* Написал бы сначала, как установить, чем писать

  8. Galamoon
    Thumb up Thumb down 0

    Урок из категории «Как нарисовать сову». :-D

[an error occurred while processing the directive]


[an error occurred while processing the directive]