html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

В сети существует множество полезных инструментов для создания адаптивных сайтов, в том числе и готовых шаблонных решений, среди которых Т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), адаптивные таблицы, слайд-панели и многое другое. Надеюсь, данный урок вам пригодился. Все свои замечания и пожелания пишите в комментариях.

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

2

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции