gearmobile Reading time ~10 minutes

На моем пути повстречался еще один плагин для создания карусели (carousel), основанный на библиотеке jQuery.

Имя этого плагина запоминающиеся - liSlidik и проживает он здесь - liSlidik - jQuery Responsive Slider. Насколько я правильно понял, этот плагин был создан одним или несколькими русскоязычными веб-разработчиками. В принципе, вся документация с примерами подробно расписана на русском языке на этой странице и нет нужды пересказывать уже сказанное.

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

Сразу скажу, что плагин liSlidik мне не понравился. На это есть несколько причин, которые я укажу ниже, в самом обзоре. Причины эти могут быть субъективными, но все же они повлияли на мой вывод.

Установка плагина liSlidik

Установка и подключение плагина liSlidik производится совершенно стандартно для скриптов подобного рода. Сначала подключается библиотека jQuery (в этом обзоре использовалась версия 1.8), затем подключается сам скрипт liSlidik, а в конце - js-файл с инициализацией скрипта и его настройками:

...
<!--  SCRIPTS  -->
<script src="js/jquery-1.8.min.js"></script>
<script src="js/liSlidik.js"></script>
<script src="js/settings.js"></script>
</body>

Скачать архив скрипта liSlidik можно с домашней страницы проекта по это ссылке - liSlidik Download. Помимо этого, на jsFiddle выложен исходный код скрипта с примерами создания разных вариантов слайдов - liSlidik Demo. Библиотеку jQuery можно подключить через CDN или скачать для локального подключения - это кому как нравиться.

HTML-разметка для liSlidik

Разметка в HTML-документе для будущего слайдера под управлением скрипта liSlidik проста и семантична - в этом плане все на уровне современной веб-разработки. Структура будущего слайдера представляет из себя обычный маркированный список с вложенными изображениями:

<ul id="slider" class="slider">
  <li><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
</ul>

Единственный важный момент при создании HTML-разметки заключается в том, что для элемента ul необходимо задать идентификатор, к которому будет “цепляться” скрипт liSlidik - иначе слайдер не заработает (мне этот факт не понравился, так как я не люблю идентификаторы и стараюсь всячески избегать их использования). Класс для элемента ul понадобиться для последующей стилизации слайдера на HTML-странице.

Инициализация скрипта liSlidik

Для “запуска” скрипта liSlidik нужно его инициализировать, создав простой js-файл и прописав в нем такие строки:

$(document).ready(function(){
  $('#slider').liSlidik();
});

Минимальная стилизация скрипта liSlidik

Слайдер liSlidik после всех выполненных выше мною шагов не заработает, на самом деле. Потому что для его работы необходима минимальная CSS-стилизация, которую я выполню ниже. Стоит ли говорить, что данный шаг я бы не смог выполнить без незаменимого плагина Firebug под Mozilla Firefox?!

Минимальная CSS-стилизация слайдера liSlidik:

.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    position: absolute;
    top: 0;
    left: 0;
    img{
      vertical-align: top;
    }
  }

Конечно, можно воспользоваться готовыми CSS-стилями из архива скрипта liSlidik; но зачем пользоваться чужим кодом, когда можно создать более чистый и маленький по размеру свой собственный код, мне не понятно. Конечно, в приведенном выше коде значения свойств width и height являются произвольными и зависят от конкретных условий - ставить нужно вместо них то, что необходимо. Это же относится и к margin: 20px auto;, которое было применено здесь для “красоты”.

Вот теперь слайдер liSlidik готов к работе. Более того - он работает! Это минималистичный слайдер, без каких-либо кнопок управления:

Скрипт liSlidik работает

Кнопки управления для liSlidik

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

<!--  arrows  -->
<a data-slidik="slider" class="next" href="#">Next</a>
<a data-slidik="slider" class="prev" href="#">Prev</a>

HTML-разметка для кнопок перемотки создается через элемент a, у которого обязательным атрибутом должен быть data-slidik="slider", где slider - это имя идентификатора нашего слайдера. Классы class="next" и class="prev" присутствуют для тех же целей, что и в элементе ul - на них “вешаются” CSS-стили:

/*  ARROWS  */
.next,
.prev{
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 2;
  top: 95px;
  background-color: #000;
  @include border-radius(50%);
  @include squish-text;
  @include single-transition(background-color, .2s, ease-in);
}
.next{
  left: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}
.prev{
  right: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}

Смотрим результат подключения кнопок перемотки в liSlidik:

Плагин liSlidik c кнопками перемотки

Пагинация в слайдере liSlidik

Подключение пагинации в скрипте liSlidik выполняется аналогично - нужно вручную создать блочный элемент div с атрибутом data-slidik="slider" и классом class="dotted" (который также обязателен в данном случае!):

<!--  pagination  -->
<div data-slidik="slider" class="dotted"></div>

Создаю для нового элемента CSS-стили. Снова оговорюсь, что для блока пагинации (насколько я правильно понял) имя класса dotted является обязательным. Я пробовал менять это имя на произвольное и в результате слайдер перестал работать (вот такие мелкие обязательства мне и не нравятся в этом плагине!):

/*  PAGINATION  */
.dotted{
  position: absolute;
  bottom: 2px;
  left: 2px;
  z-index: 3;
  @include pie-clearfix;
  .dottedItem{
    cursor: pointer;
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    background-color: lighten(#000,30%);
    text-align: center;
    @include border-radius(50%);
    @include single-transition(background-color, .2s, ease-in);
    &:hover,&:focus{
      background-color: lighten(#000,40%);
    }
    &.cur{
      background-color: lighten(#000,50%);
    }
  }
}

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

Скрипт liSlidik c пагинацией

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

Заголовок слайдера liSlidik

Заголовок для слайдера liSlidik создается вручную (неужели нельзя создать скрипт, который автоматически генерирует нужные HTML-элементы?) также с помощью блочного элемента div, для которого прописывается атрибут data-slidik="slider" с обязательным именем класса class="caption":

<!--  caption  -->
<div data-slidik="slider" class="caption"></div>

И произвольные CSS-стили для него:

/*  CAPTION  */
.caption{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 6px 0;
  text-indent: 1em;
  width: 100%;
  background-color: rgba(0,0,0,.6);
  color: rgba(255,255,255,.5);
}

Текст для показа на странице скрипт liSlidik берет из содержимого атрибута alt= для элемента img. Поэтому не забудьте его прописать в своей HTML-разметке!

Скрипт liSlidik c заголовком

Миниатюры в скрипте liSlidik

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

Заключение

Все примеры и варианты создания слайдеров под управлением скрипта liSlidik можно посмотреть на официальной страничке проекта - liSlidik - jQuery Responsive Slider. Ниже привожу полный HTML и SCSS-код примера, рассмотренного в данной статье:

<ul id="slider" class="slider">
  <li class="show"><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
  <!--  arrows  -->
  <a data-slidik="slider" class="next" href="#">Next</a>
  <a data-slidik="slider" class="prev" href="#">Prev</a>
  <!--  pagination  -->
  <div data-slidik="slider" class="dotted"></div>
  <!--  caption  -->
  <div data-slidik="slider" class="caption"></div>
  <!--  previews  -->
  <!-- <div data-slidik="slider" class="thumbs"></div> -->
</ul><!--  SCRIPTS  -->
.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    border: 2px solid #000;
    position: absolute;
    top: -2px;
    left: -2px;
    &.show{
      display: block;
      z-index: 2;
    }
    img{
      vertical-align: top;
    }
  }
  /*  ARROWS  */
  .next,
  .prev{
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    top: 95px;
    background-color: #000;
    @include border-radius(50%);
    @include squish-text;
    @include single-transition(background-color, .2s, ease-in);
  }
  .next{
    left: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  .prev{
    right: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  /*  PAGINATION  */
  .dotted{
    position: absolute;
    bottom: 2px;
    left: 2px;
    z-index: 3;
    @include pie-clearfix;
    .dottedItem{
      cursor: pointer;
      float: left;
      margin: 0 5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      font-size: 12px;
      background-color: lighten(#000,30%);
      text-align: center;
      @include border-radius(50%);
      @include single-transition(background-color, .2s, ease-in);
      &:hover,&:focus{
        background-color: lighten(#000,40%);
      }
      &.cur{
        background-color: lighten(#000,50%);
      }
    }
  }
  /*  CAPTION  */
  .caption{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    padding: 6px 0;
    text-indent: 1em;
    width: 100%;
    background-color: rgba(0,0,0,.6);
    color: rgba(255,255,255,.5);
  }
}

На этом все.

gearmobile Reading time ~5 minutes

Обзор еще одного слайдера под библиотеку jQuery под названием bxSlider.

Данный слайдер обладает полным набором возможностей, адаптивный и легко устанавливается в проекте. Адрес проживания слайдера bxSlider - The Responsive jQuery Content Slider.

Конкретно какими возможностями обладает bxSlider:

  • полностью адаптивный
  • может быть горизонтальным, вертикальным
  • может содержать в себе изображения, видео или HTML-контент
  • поддержка функций touch/swipe
  • для анимаций используются CSS transitions
  • маленький размер файла, легко видоизменяется и настраивается
  • поддержка браузерами Firefox, Chrome, Safari, iOS, Android, Ie7+
  • большое число настроек

Установка слайдера bxSlider

Установка bxSlider ничем не отличается от установки ему подобных скриптов для создания carousel. Скачиваем с сайта архив - в нем есть все необходимое для подключения и работы. Помимо этого, там есть несколько дополнительных файлов типа jquery.easing.1.3.js и jquery.fitvids.js. Но нет библиотеки jQuery, которую автор рекомендует подключать в проект через CDN. Я подключу jQuery локально, версии 1.11.1.

В HTML-файле перед закрывающим тегом body произвожу подключение скриптов в таком порядке:

...
<!--  SCRIPTS  -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/bxslider.js"></script>

Файл jquery.bxslider.min.js беру из скачанного архива, файл bxslider.js - произвольного имени, для настроек плагина bxSlider.

В head HTML-документа, помимо этого, производится подключение таблицы стилей для плагина bxSlider, которую также беру из скачанного архива. Данный шаг выполнять совершенно необязательно - можно обойтись без файла jquery.bxslider.css и тогда получим “чистый” слайдер, который можно видоизменять по своему с помощью CSS:

<head>
  <meta charset="utf-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  ...
 </head>

Плагин bxSlider подключен и готов к работе. Осталось создать HTML-разметку для него.

HTML-разметка для слайдера bxSlider

Внутри тега body создаю разметку для будущего слайдера. Она проста и семантична, представляет из себя обычный маркированный список, в котором каждый элемент li является слайдом. Внутри li может размещаться изображение, видео или любой другой HTML-контент. Контейнер ul должен иметь класс с произвольным именем:

<ul class="slider">
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
</ul>

Инициализация скрипта bxSlider

В созданном ранее js-файле bxslider.js произвожу инициализацию плагина bxSlider. Важно заметить, что строка инициализации должна быть обязательно заключена в “обертку” $(document).ready(), иначе слайдер не будет работать:

$(document).ready(function(){
  $('.slider').bxSlider();
});

Смотрю готовый результат:

Запущенный слайдер bxSlider

Слайдер bxSlider запущен и работает - есть кнопки пагинации и перемотки, изображения крутятся при нажатии на них. Пробую отключить таблицу стилей jquery.bxslider.css и смотрю результат. Действительно, слайдер bxSlider получается “голым”, но рабочим:

Чистый слайдер bxSlider

Стилизация слайдера bxSlider

Произведу небольшую стилизацию слайдера bxSlider. Для этого необходимо воспользоваться плагином Firebug под браузер Mozilla Firefox, чтобы инспектировать DOM-дерево и находить нужные HTML-элементы с их классами. Как можно было понять из базовой HTML-разметки, все элеметы управления слайдером генерируются скриптом автоматически.

Стилизация слайдера bxSlider с помощью CSS-правил (в данном примере это SCSS) может быть такой:

$asidePos: 50px;
$color: #778899;

.bx-wrapper{
  margin: 10px auto;
  width: 300px;
  border: 5px solid #fff;
  box-shadow: 0 0 5px #ccc;
  position: relative;
  .bx-viewport{
    box-shadow: 0 0 5px #ccc;
  }
  /*  Скрывать пагинацию  */
  .bx-pager{
    display: none;
  }
  /*  Кнопки перемотки  */
  .bx-prev,
  .bx-next{
    position: absolute;
    top: 92px;
    width: 20px;
    height: 20px;
    background-color: $color;
    @include squish-text;
    @include border-radius(50%);
    @include single-transition(background-color, .1s, ease-in-out);
    &:hover,&:focus{
      outline: none;
      background-color: darken($color,5%);
    }
    &:active{
      background-color: darken($color,10%);
    }
  }
  .bx-prev{
    left: -$asidePos;
  }
  .bx-next{
    right: -$asidePos;
  }
  img{
    vertical-align: top;
  }
}

И посмотрим результат наших трудов. Уже гораздо лучше, однако:

Стилизованный слайдер bxSlider

Настройка слайдера bxSlider

Плагин bxSlider имеет большое количество настроек, которые легко подключать в коде. Разнообразные (и многочисленные) примеры создания слайдера приведены на странице - Examples. Эти примеры можно и стоит изучить (хотя бы слегка, для будущего).

В этой статье давайте я воссоздам один из приведенных на странице Examples примеров. Пусть это будет слайдер с автоматической прокруткой и кнопками управления прокруткой - запуско и остановкой. Такой готовый пример размещен здесь - Auto show with start / stop controls. Я просто сделаю свой собственный дубликат, со своими стилями.

Для этого в SCSS-коде добавляю такие строки:

/*  auto controls  */
.bx-controls-auto{
  margin: 5px 0 0;
  @include pie-clearfix;
  .bx-controls-auto-item{
    display: inline-block;
    float: left;
    .bx-start,
    .bx-stop{
      display: block;
      @include squish-text;
      @include single-transition(background-color, .1s, ease-in-out);
    }
    .bx-start{
      @include arrow-right(7px,lighten($color,20%));
    }
    .bx-stop{
      width: 14px;
      height: 14px;
      margin: 0 0 0 5px;
      background-color: lighten($color,20%);
    }
  }
}

HTML-разметку на странице я не меняю, как вы могли заметить. Блок .bx-controls-auto генерируется скриптом bxSlider автоматически.

Файл настроек bxslider.js подправляю, чтобы он выглядел таким образом:

$(document).ready(function(){
  $('.slider').bxSlider({
    auto: true,
    autoControls: true
  });
});

Смотрю результат в браузере:

Слайдер bxSlider с автоматической прокруткой

Отлично! Появились кнопки запуска и остановки показа слайдшоу; сам слайдер стартует автоматически, при открытии страницы в окне браузера.

Заключение

Плагин bxSlider мне однозначно понравился. Семнатичная простая разметка, использование произвольного имени класса (а не идентификатора), автоматическое генерирование HTML-элементов слайдера, большое количество настроек, хорошие эффекты, простота подключения.

Все эти преимущества однозначно сделали плагин bxSlider номером один в моей копилке.

gearmobile Reading time ~23 minutes

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

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

Данный прием может быть применен для создания страниц с описанием продукта или даже для своего рода презентаций типа Powerpoint/Keynote. В этом приеме кроется большой потенциал для создания иллюстрированных online-страниц.

Ниже описан способ, как можно добиться такого результата.

Это все CSS

Основой данного приема является CSS-свойство background-attachment: fixed, которое доступно для использования веб-разработчиками, начиная с версии CSS2.1. Любое фоновое изображение, к которому применено данное свойство, начинает занимать фиксированное положение относительно окна браузера. Мы воспользуемся данным свойством для того, чтобы зафиксировать иллюстрации страницы в определенном месте, в то время как весь остальной контент будет перемещаться при прокрутке.

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

Также необходимо помнить, что данное CSS-свойство прекрасно работает в десктопных версиях браузеров; однако в мобильной версии браузера Chrome оно работает некорректно, а в остальных мобильных браузерах возможно отображение страницы рывками. Поэтому, несмотря на то, что посетители с мобильных устройств будут прекрасно видеть все изображения на странице, сам эффект скроллинга лучше всего смогут оценить пользователи настольных систем.

Основные шаги

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

  1. Создать элемент-контейнер и наполнить его содержимым
  2. Задать для контейнера (в нашем случае это блок div) с одной стороны padding, равный 50%-м от ширины контейнера, таким образом сдвинув весь контент в противоположную сторону
  3. Добавить на страницу фоновое изображение шириной, равной 50%-м от ширины контейнера и поместить его на противоположной стороне от контента
  4. Задать для фонового изображения CSS-свойство background-attachment: fixed; и любоваться результатом!

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

1. Основная настройка

Для начала давайте создадим папку проекта и добавим в нее индексный файл index.html, а также папку css с вложенным в нее файлом стилей style.css. Скопируйте и поместите четыре изображения из скачанного архива в папку с именем images.

Добавьте следующую HTML-разметку в файл index.html:

<div class="content right illustration_01">
  <h2>Scroll Down and Watch What Happens</h2>
  <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'</p>
  <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy- chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
  <p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat- pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
  <p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
  <p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
  <p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
  <p>`Well!' thought Alice to herself, `after such a fall as this, I shall think nothing of tumbling down stairs! How brave they'll all think me at home! Why, I wouldn't say anything about it, even if I fell off the top of the house!' (Which was very likely true.)</p>
</div>

Данным действием мы создали основной HTML-каркас страницы, подключили к нему файл CSS-стилей и шрифт Roboto с сервиса Google Fonts. Внутри HTML-каркаса мы создали первый блок-контейнер div с содержимым, к которому будем применять CSS-свойства.

Блок-контейнер div имеет три класса:

  1. .content - служит для задания CSS-свойств, общих для всех блоков-контейнеров;
  2. .right - задает контейнеру правило для смещения его содержимого вправо (немного позже мы будет создавать контейнеры со смещенным влево контентом);
  3. .illustration_01 - создает правило для использования конкретного фонового изображения и для задания фонового цвета блока-контейнера.

Стилизация

Теперь у нас все готово для создания CSS-стилей нашей страницы. Начнем с добавления в файл style.css основных правил сброса стилей и форматирования шрифта:

* {
    box-sizing: border-box;
  }
html {
  font-size: 1em;
  font-family: 'Alike';
  background-color: #262626;
  color: #d9d9d9;
}
body {
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Roboto';
  line-height: 1.313em;
}
h1 {
  font-size: 3em;
  margin: 0.563em 0;
}
h2 {
  font-size: 2.25em;
  margin: 0.625em 0;
}
h3 {
  font-size: 1.5em;
  margin: 1.313em 0;
}
h4 {
  font-size: 1.313em;
  margin: 1.313em 0;
}
h5 {
  font-size: 1.125em;
  margin: 1.313em 0;
}
h6 {
  font-size: 1em;
  margin: 0.75em 0;
}

Затем переходим к классу .content. Добавим внизу таблицы стилей следующее содержимое:

.content {
  font-size: 1.875rem;
  color: #262626;
  background-size: 49% auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

В этом классе заключена почти вся магия нашего примера. Для текста задаем размер шрифта и цвет. Для фона блока-контейнера задаем свойство background-size: 49% auto;.

Это означает, что фоновое изображение блока будет всегда растягиваться или сжиматься в своем размере, стремясь заполнить 49% от ширины страницы; высота изображения при этом будет изменяться пропорционально. В нашем примере мы используем значение 49% вместо 50%, потому что браузер Firefox иначе будет отображать артефакт в виде странной линии по середине окна браузера.

Затем мы задаем правило background-attachment: fixed;, которое, как вы уже знаете из предыдущего описания, заставляет фоновое изображение занимать фиксированное положение относительно окна браузера.

И наконец, мы задаем правило background-repeat: no-repeat; чтобы наше изображение повторялось только один раз на странице.

Теперь добавим в стили еще один класс .right:

.right {
  padding: 1.618em 6.472em 3.236em 50%;
  background-position: 0 50%;
}

Этот последний класс помещает текст контейнера в одной половине экрана, а фоновое изображение - в другой половине.

Правило background-position: 0 50%; задает для фонового изображения нулевую позицию относительно левого края окна браузера и выравнивает его точно по центру по вертикали окна.

Наконец, для класса .illustration_01 добавляем следующее содержимое:

.illustration_01 {
  background-color: #00c17b;
  background-image: url("../images/minipadwhite.png");
}

Таким образом задается конкретное изображение и фоновый цвет контейнера.

Проверим нашу страницу - мы должны увидеть следующий результат:

Страница с одним блоком-контейнером

Когда вы будете прокручивать страницу вниз, то увидите, что содержимое этой страницы будет перемещаться, в то время как изображение будет оставаться на своем месте.

Добавляем второй контейнер

Давайте добавим еще один контейнер, в котором содержимое будет смещено влево. Добавьте HTML-контейнер ниже последнего блока div:

<div class="content left illustration_02">
  <h2>Fixed Background Scrolling Effect</h2>
  <p>Down, down, down. Would the fall never come to an end! `I wonder how many miles I've fallen by this time?' she said aloud. `I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down , I think--' (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) `--yes, that's about the right distance--but then I wonder what Latitude or Longitude I've got to?' (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say .)</p>
  <p>Presently she began again. `I wonder if I shall fall right through the earth! How funny it'll seem to come out among the people that walk with their heads downward! The Antipathies, I think--' (she was rather glad there was no one listening, this time, as it didn't sound at all the right word) `--but I shall have to ask them what the name of the country is, you know. Please, Ma' am, is this New Zealand or Australia?' (and she tried to curtsey as she spoke-- fancy curtseying as you're falling through the air! Do you think you could manage it?) `And what an ignorant little girl she'll think me for asking! No, it'll never do to ask: perhaps I shall see it written up somewhere.'</p>
  <p>Down, down, down. There was nothing else to do, so Alice soon began talking again. `Dinah'll miss me very much to-night, I should think!' (Dinah was the cat .) `I hope they'll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, I'm afraid, but you might catch a bat, and that's very like a mouse, you know. But do cats eat bats, I wonder?' And here Alice began to get rather sleepy, and went on saying to herself, in a dreamy sort of way, `Do cats eat bats? Do cats eat bats?' and sometimes, `Do bats eat cats?' for, you see, as she couldn't answer either question, it didn't much matter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her very earnestly, `Now, Dinah, tell me the truth: did you ever eat a bat?' when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fall was over.</p>
  <p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, `Oh my ears and whiskers, how late it's getting!' She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.</p>
  <p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.</p>
</div>

Обратите внимание, что на этот раз мы используем класс .left вместо класса .right; также изменяем порядковый номер класса .illustration_01 на .illustration_02.

Добавляем два новых класса в таблицу стилей:

.left {
  padding: 1.618em 50% 3.236em 6.472em;
  background-position: 100% 50%;
}
.illustration_02 {
  background-color: #e8697b;
  background-image: url("../images/minipadblack.png");
}

На этот раз мы добавляем padding, равный 50%, с правой стороны блока-контейнера так, чтобы контент внутри блока смещался влево; фоновое изображение позиционируем по горизонтали на 100% - другими словами, вправо до упора. Также добавляем другой цвет для фоновой заливки блока и меняем файл изображения для фоновой картинки.

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

Страница с двумя блоками-контейнерами

Добавляем блок-разделитель

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

Между двумя блоками div вставляем следующий HTML-код:

<section class="separator">
  <h3>Another Section Starts Here</h3>
</section>

И для него в таблице стилей создаем отдельный класс с несколькими правилами:

.separator {
  font-size: 1.875rem;
  padding: 1.618em 0;
  text-align: center;
}

Теперь, если обновить нашу страницу-пример, то мы заметим, как между двумя контейнерами появился замечательный блок-разделитель:

Блок-разделитель

Третий и четвертый контейнеры

Пример почти готов и мы можем добавить в него оставшиеся блоки-разделители и блоки-контейнеры. Для этого вставим нижеследующий HTML-код в индексную страницу index.html:

<section class="separator">
  <h3>Another Section Starts Here</h3>
</section>
<div class="content right illustration_03">
  <h2>Great For Product Presentations</h2>
  <p>Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!</p>
  <p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head though the doorway; `and even if my head would go through,' thought poor Alice, `it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only know how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p>
  <p>There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book of rules for shutting people up like telescopes: this time she found a little bottle on it, (`which certainly was not here before,' said Alice,) and round the neck of the bottle was a paper label, with the words `DRINK ME' beautifully printed on it in large letters.</p>
  <p>It was all very well to say `Drink me,' but the wise little Alice was not going to do that in a hurry. `No, I'll look first,' she said, `and see whether it's marked "poison" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked `poison,' it is almost certain to disagree with you, sooner or later.</p>
  <p>However, this bottle was NOT marked `poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry- tart, custard, pine-apple, roast turkey, toffee, and hot buttered toast,) she very soon finished it off.</p>
</div>
<section class="separator">
  <h3>Another Section Starts Here</h3>
  </section>
  <div class="content left illustration_04">
    <h2>Simple Technique Using Pure CSS</h2>
  <p>`What a curious feeling!' said Alice; `I must be shutting up like a telescope .'</p>
  <p>And so it was indeed: she was now only ten inches high, and her face brightened up at the thought that she was now the right size for going though the little door into that lovely garden. First, however, she waited for a few minutes to see if she was going to shrink any further: she felt a little nervous about this; `for it might end, you know,' said Alice to herself, `in my going out altogether, like a candle. I wonder what I should be like then?' And she tried to fancy what the flame of a candle is like after the candle is blown out, for she could not remember ever having seen such a thing.</p>
  <p>After a while, finding that nothing more happened, she decided on going into the garden at once; but, alas for poor Alice! when she got to the door, she found he had forgotten the little golden key, and when she went back to the table for it, she found she could not possibly reach it: she could see it quite plainly through the glass, and she tried her best to climb up one of the legs of the table, but it was too slippery; and when she had tired herself out with trying, the poor little thing sat down and cried.</p>
  <p>`Come, there's no use in crying like that!' said Alice to herself, rather sharply; `I advise you to leave off this minute!' She generally gave herself very good advice, (though she very seldom followed it), and sometimes she scolded herself so severely as to bring tears into her eyes; and once she remembered trying to box her own ears for having cheated herself in a game of croquet she was playing against herself, for this curious child was very fond of pretending to be two people. `But it's no use now,' thought poor Alice, `to pretend to be two people! Why, there's hardly enough of me left to make ONE respectable person!'</p>
  <p>Soon her eye fell on a little glass box that was lying under the table: she opened it, and found in it a very small cake, on which the words `EAT ME' were beautifully marked in currants. `Well, I'll eat it,' said Alice, `and if it makes me grow larger, I can reach the key; and if it makes me grow smaller, I can creep under the door; so either way I'll get into the garden, and I don't care which happens!'</p>
  <p>She ate a little bit, and said anxiously to herself, `Which way? Which way?', holding her hand on the top of her head to feel which way it was growing, and she was quite surprised to find that she remained the same size: to be sure, this generally happens when one eats cake, but Alice had got so much into the way of expecting nothing but out-of-the-way things to happen, that it seemed quite dull and stupid for life to go on in the common way.</p>
  <p>So she set to work, and very soon finished off the cake.</p>
</div>
<section class="separator">
  <h1>THE END</h1>
</section>

И добавим в таблицу стилей классы для двух оставшихся фоновых изображений:

.illustration_03 {
  background-color: #14b29a;
  background-image: url("../images/miniwhite.png");
}
.illustration_04 {
  background-color: #80b9f1;
  background-image: url("../images/miniblack.png");
}

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

Третий и четвертый блоки-контейнеры

Прокручиваем страницу до конца и видим последний блок-разделитель:

Последний блок-разделитель

Делаем страницу адаптивной

Последний штрих, который нам необходимо выполнить - это учесть вариант отображения нашей страницы на экранах устройств с разными размерами. Когда область просмотра страницы становится слишком маленькой для того, чтобы вмешать фоновые изображения, нам необходимо сделать так, чтобы картинки страницы из фоновых становились встраиваемыми (через тег img).

Для этого в начале каждого из блоков-контейнеров вставим еще один блок figure с классом .smallscreen, внутри которого поместим тег img для вставки тех же самых изображений, которые мы использовали для фона нашей страницы.

Для первого блока-контейнера добавим в его начало:

<div class="smallscreen">
  <image src="images/minipadwhite.png"></image>
</div>

Второй блок-контейнер будет содержать:

<figure class="smallscreen">
  <image src="images/minipadblack.png">
</figure>

Начало третьего блока-контейнера:

<figure class="smallscreen">
  <image src="images/miniwhite.png">
</figure>

Четвертый контейнер:

<figure class="smallscreen">
  <image src="images/miniblack.png">
</figure>

Класс .smallscreen мы будем использовать для того, чтобы по умолчанию скрывать изображения <image src="images/miniblack.png">, но показывать их, когда размер экрана становиться маленьким.

Для этого добавим в таблицу стилей следующее правило:

.smallscreen {
  display: none;
}

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

Для этого добавим медиа-запросы в таблицу стилей:

@media (max-width: 106.25rem) {
  .wrapper,
  .separator {
    font-size: 1.6875rem;
  }
}
@media (max-width: 93.75rem) {
  .content,
  .separator {
    font-size: 1.5rem;
  }
  .right {
    padding: 1.618em 4.854em 1.618em 50%;
  }
  .left {
    padding: 1.618em 50% 1.618em 4.854em;
  }
}
@media (max-width: 81.25rem) {
  .content,
  .separator {
    font-size: 1.3125rem;
  }
  .right {
    padding: 1.618em 3.236em 1.618em 45%;
    background-size: 44% auto;
    background-position: 0 55%;
  }
  .left {
    padding: 1.618em 45% 1.618em 3.236em;
    background-size: 44% auto;
    background-position: 100% 55%;
  }
}
@media (max-width: 68.75rem) {
  .content,
  .separator {
    font-size: 1.125rem;
  }
  .right {
    padding: 1.618em 3.236em 1.618em 40%;
    background-size: 39% auto;
    background-position: 0 60%;
  }
  .left {
    padding: 1.618em 40% 1.618em 3.236em;
    background-size: 39% auto;
    background-position: 100% 60%;
  }
}
@media (max-width: 50rem) {
  .smallscreen {
    display: block;
  }
  .right {
    padding: 1.618em 3.236em;
    background-image: none;
  }
  .left {
    padding: 1.618em 3.236em;
    background-image: none;
  }
}
@media (max-width: 31.25rem) {
  .right {
    padding: 1.618em 1.618em;
  }
  .left {
    padding: 1.618em 1.618em;
  }
}
@media (max-width: 12rem) {
  html {
    min-width: 12rem;
  }
}

В приведенном выше коде первые четыре медиа-запроса просто уменьшают размер теста страницы и padding внутри блоков-контейнеров таким образом, чтобы ширина страницы соответсвовала ширине экрана.

В пятом медиа-запросе с правилом max-width: 50rem мы включаем код, который делает класс .smallscreen видимым, удаляет 50%-ый padding у содержимого блока-контейнера и скрывает фоновое изображение на странице. Когда медиа-запрос “обнаруживает”, что большое фоновое изоражение больше не вписывается в размер окна, он заменяет фоновое изображение на обычное, которое помещается в начале контента блока-контейнера.

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

Самый маленький размер экрана

Заключение

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

Попробуйте сами создать описанный выше прием - это быстро и легко и должно вам понравиться!

Оригинал статьи размещен здесь - Create a Masked Background Effect With CSS”

gearmobile Reading time ~3 minutes

Краткий обзор плагина jQuery Mask Plugin, упоминание о котором я нашел на Google+.

Этот плагин понравился мне простотой установки и настройки. Работа плагина jQuery Mask Plugin заключается в том, чтобы форматировать вводимые пользователем в полях данных и приводить их к виду, заданному соответствующей маской в коде.

Помимо этого, плагин jQuery Mask Plugin производит фильтрацию данных и не позволяет пользователю вводить недопустимое количество данных и данных другого формата.

В общем, весьма полезный и удобный плагин, который можно положить в копилку веб-разработчика “на всякий случай”. Наверняка такой может пригодиться при случае. Поэтому приступаю к установке и настройке плагина jQuery Mask Plugin.

Подключение jQuery Mask Plugin

Плагин jQuery Mask Plugin “живет” по этому адресу - jQuery Mask Plugin, где дано подробное описание работы этого скрипта. На этой странице дано краткое описание установки и настройки плагина “от автора” Igor Escobar - Masks With Jquery Mask Plugin.

Подключение скрипта в рабочем проекте производится стандартно для всех плагинов, созданных под библиотеку jQuery. Сначала производится подключение самой библиотеки jQuery, а затем скрипта jQuery Mask Plugin:

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.mask.min.js"></script>

Плагин совместим со всеми версиями библиотеки jQuery. Более того, в архиве с исходниками находятся тестовые HTML-странички, с помощью которых можно проверить все возможности работы скрипта под конкретную библиотеку jQuery, конкретный браузер и конкретную ОС:

Тестовые страницы для плагина jQuery Mask Plugin

Создание разметки под jQuery Mask Plugin

Для примера работы с плагином jQuery Mask Plugin создаю тестовую разметку с несколькими полями ввода:

<div class="wrapper">
  <h1>
    jQuery Mask Plugin
  </h1>
</div>

Как видно из примера выше, каждое поле предназначено для ввода определенной информации пользователем, будь то дата, время, проценты, номер телефона или денежная сумма. В принципе, больше ничего сказать по поводу HTML нечего. Самое интересное будет в настройке скрипта.

Расширенный пример с возможными вариантами масок можно посмотреть на странице примера - Basic Usage Examples. На ней также показаны примеры расширенной настройки плагина jQuery Mask Plugin.

Инициализация плагина jQuery Mask Plugin

Создаю еще один js-файл, в котором будет производиться инициализация скрипта и заданы маски для каждого из полей ввода. Файл будет иметь произвольное имя masks.js и в нем будет такое содержимое:

$(document).ready(function(){
$('.date').mask('00/00/0000');
$('.time').mask('00:00:00');
$('.percent').mask('##0,00%');
$('.money').mask('000.000.000.000.000,00');
$('.phone').mask('0(000)-000-00-00');
});

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

Открываю в браузере созданный мною HTML-файл и вижу форму с полями ввода:

Форма ввода с плагином jQuery Mask Plugin

Тестирование плагина jQuery Mask Plugin

Давайте попробуем ввести в созданные на примере поля данные. При вводе в каждом из полей хорошо видно, как данные приводятся именно к тому виду, который задан маской в js-коде. Более того, плагин не позволит ввести данные другого формата, то есть будет производиться фильтрация данных:

Результат работы плагина jQuery Mask Plugin

В поле ввода номера телефона маска создана мною произвольно, буквально на лету. Этот факт говорит о том, что создание масок в плагине jQuery Mask Plugin - дело очень простое и легкое.

На этом обзор плагина jQuery Mask Plugin можно завершить.

gearmobile Reading time ~10 minutes

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

Следующее, большое изображение по центру страницы также является строкой row, внутри которой расположена одна единственная колонка. Эта колонка имеет класс large-12, чтобы занимать ширину всех 12 колонок CSS-сетки в целом. Остальная часть этой страницы-примера построена по такому же принципу, используя строки row и колонки 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:

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

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

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

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

Именно класс small-6 заставляет оба блока быть равными по ширине. Эти классы переопределяют значения классов large-8 и 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 колонок сетки, но, тем не менее, этот элемент должен располагаться точно по центру. К примеру, может потребоваться добавить в “подвал” сайта изображение, которое по ширине немного уже, чем весь элемент footer в целом. Класс small-centered поместит маленький элемент точно по центру внутри его строки-контейнера. Если необходимо, чтобы элемент располагался по центру только для больших экранов, то к нему необходимо применить класс large-centered:

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

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

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

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

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

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

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

Такой подход позволяет решить некоторые проблемы, связанные с кросс-браузерностью, но если необходимо отменить такое поведение фреймворка, то просто добавьте класс end к последнему элементу, чтобы заставить его смещаться влево (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. Используя классы типа large-pull-3 и 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.