Что нового в Foundation 6?

Что нового в Foundation 6?

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

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

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

А что мне с выхода Foundation 6?

В отличие от предыдущих частей, где упор делался на количественные обновления, добавление новых возможностей, Foundation 6 был сильно переработан. Zurb в значительной степени вернулись к изначальному макету и использовали все свои навыки, все отзывы от сообщества и весь прогресс в браузерах для переработки Foundation.

Фреймворк прошел капитальный ремонт, для обеспечения базовой структуры множество компонентов были подчищены. Большинство элементов было упрощено, что сделало их быстрее, меньше и проще в использовании. В общем и целом, все стало лучше, чем раньше. Основной посыл этой версии это возвращение к основам.

Вместе с изменениями к уже существующим компонентам добавились новые свойства, такие как Flex Grid, Motion UI, Yeti Launch, а также дополнительные блоки и шаблоны.

Оптимизация Foundation: Полная переработка

Когда люди разговаривают о фреймворках, одна из основных жалоб, которые я слышал, это вес. Люди беспокоятся о времени загрузки и о том, что лишний функционал затормозит их сайты. И беспокойства небезосновательны, некоторые фреймворки впустую тратят до 90% своих ресурсов. С выходом новой версии Zurb удалось значительно снизить общий вес своей системы, сбросив более 50% веса в сравнении с Foundation 5.

Если в Foundation 5 вам необходим полный функционал, то вес CSS и JS файлов будет 160Кб и 110Кб соответственно. В Foundation 6 размер файлов снизился до 68Кб и 92Кб. Уменьшение веса произошло за счет нескольких фундаментальных изменений, которые Zurb обсуждали ближе к выходу новой версии. Среди этих изменений:

Переопределение множества крупных компонентов в более мелкие модульные компоненты (как меню).

Уменьшение специфичности. Взамен глубокому наследованию селекторов и стилей пришла простая стилизация (что позволяет намного легче настраивать свой сайт).

Упрощение переменных Sass и миксинов для уменьшения вариаций (основная цель это вручную настраиваемый фреймворк). Большинство компонентов были тем или иным образом изменены, чтобы они стали более обтекаемыми и менее раздутыми.

Переопределение кода JavaScript таким образом, чтобы каждый компонент не использовал только свой функционал, а чтобы все компоненты делили между собой универсальный утилиты (сокращение лишнего кода и поддержание модульности).

В двух словах, улучшения довольно радикальные. Оптимизация сократила код стилей на тысячи строк, а также совместила различные JavaScript утилиты.

Motion UI: Простая анимация и плавные переходы

Поистине замечательная особенность, которая, наконец, вышла в свет, это новая библиотека Motion UI. По сути, эта библиотека это набор плавных переходов и анимации, который Foundation использует для усиления различных компонентов (таких как элементы Reveal, Toggler и Orbit).

Motion UI пришел из ответвления Foundation for Apps и нашел свое место в Foundation в форме дополнительной библиотеки (но рекомендуемой). Zurb знают, что движение очень важно, и что когда движение правильно применяется, то оно прибавляет вашему сайту интерактивности и активности.

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

Motion UI опциональна, а значит, данную библиотеку необходимо выбрать при загрузке пакета установки. Если у вас Sass версия, то это будет так же просто, как проверить, подключена ли библиотека в файле app.scss.

@include motion-ui-transitions;
@include motion-ui-animations;

Заранее подготовленные плавные переходы

Один из простейших способов использовать данную библиотеку это заранее подготовленные классы. Добавить желаемый плавный переход очень просто (к примеру, scale-in-up). Motion UI сделает остальное за вас.

Кастомные переходы

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

Кастомная анимация

Библиотеку также можно использовать для создания своей анимации и эффектов. Для создания своих эффектов используются различные Sass миксины. К примеру, вы хотите, чтобы объект выехал на экран, подрожал и затем упруго отскочил на место. Такой эффект можно сделать самому при помощи анимации. Чтобы понять, как все это собрать вместе, посмотрите документацию.

Motion UI и JavaScript

Как помощь в обработке переходов и анимации с Motion UI идет также небольшой JS плагин. Основная его задача это позволить вам запускать переходы динамически и обрабатывать событие завершения перехода (которое можно использовать для запуска дополнительной анимации или чего-то еще). Данный скрипт уже включен в переходы fade-in и fade-out, которые плавно показывают и прячут элемент.

Yeti Launch: налаживает процесс

Вы можете спросить, что такое Yeti Launch? По сути, это дополнительное приложение, которое можно запускать для упрощения процесса установки и настройки Foundation через командную строку.

С одной стороны вы можете просто загрузить скомпилированные CSS и JS файлы, однако преимущество Foundation в том, что фреймворк можно настраивать при помощи Sass, что позволяет настраивать именно то, что вам необходимо (пользовательскую сетку, шаблоны, цвета, миксины и т.д.). Yeti Launch от Zurb позволяет наладить новый проект так быстро, как никогда раньше.

При помощи приложения можно создавать не только сайты, но также родственные фреймворки можно использовать для создания веб-приложений и email шаблонов, используя комплексный подход в разработке.

Sass Foundation или Zurb Development Stack

Еще одна крутая особенность Yeti в том, что во время создания нового проекта, программа предлагает вам использовать или стандартную установку Foundation через Sass, или специально разработанный фреймворк. В стек технологий от Zurb также входит несколько изящных технологий:

UnCSS (для удаления неиспользуемых CSS стилей)

UglifyJs (для сжатия JavaScript)

Image compression (сжатие изображений)

Static site generator (на основе шаблонов)

Handlebar Templates (для создания динамических шаблонов)

Именно такой набор установок Zurb использует в своих проектах. Будет интересно посмотреть, как это будет принято сообществом.

Поддержка платформ

Однако небольшой нюанс – если вы работаете на Windows, то вам не повезло, приложение пока что только разрабатывается.

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

Совместная работа и отзывы при помощи Notable Code

Еще одна из особенностей Zurb это возможность загрузить разрабатываемый сайт в онлайн репозиторий, к которому будут иметь доступ члены вашей команды, которые смогут оставлять свои отзывы и предложения. Сервис называется Notable Code и предлагает уникальный способ совместной работы и обработки предложений. Основная концепция приложения включает несколько простых этапов: Загрузка, приглашение, совместная работа.

С помощью Notable можно загрузить разрабатываемый сайт в онлайн репозиторий при помощи экспорта из Yeti Launch (только для OSX) или через интерфейс командной строки (CLI) Foundation. Также можно просто запаковать сайт и загрузить его.

Можно приглашать людей для просмотра проекта. Каждому члену команды будет предоставлен надежный URL вашего сайта, при любом обновлении они будут оповещаться.

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

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

Улучшения доступности

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

В предыдущих версиях Foundation несколько компонентов были доступны для клавиатуры и скрин ридеров, но все же с некоторыми из них возникали проблемы (такие как меню на JS).

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

Шаблоны и основные элементы

С сайта Zurb можно скачать бесплатные примеры кода. Также можно скачать шаблоны (полностью готовые сайты) или основные элементы (компоненты), которые можно сбросить напрямую в проект.

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

Шаблоны

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

Два интересных шаблона, на которые вы бы захотели взглянуть — News/Magazine и Real Estate/Travel. Оба шаблона полностью адаптивны и используют последние версии меню и компонентов.

Основные блоки

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

В их репозитории есть множество примеров, но не все из них сделаны под Foundation 6. Zurb неохотно выпускает новые блоки, заточенные под обновленные компоненты, однако есть некоторые по-настоящему крутые Top Menu и Login Form.

Новые публичные JavaScript утилиты для создания плагинов

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

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

Утилита Media Query

Утилита media query особенно полезна в сочетании с обновленными настройками изменения размеров экрана. Основное преимущество в том, что с помощью этой утилиты можно легко взаимодействовать с размерами экрана. Использовать ее можно через Foundation.MediaQuery. Ниже я привел пару полезных функций:

get – Возвращает минимальное значение в пикселях для выбранного разрешения.

atLeast – Проверяет, текущее разрешение больше проверяемого (к примеру, маленькое или среднее)

Получить название текущего разрешения можно при помощи свойства current. Свойство вернет имя на подобии small или medium. Также запустить утилиту можно во время события при переключении к другому разрешению экрана. Событие changed.zf.mediaquery обеспечит нам данные о самом событии, данные о новом размере экрана и старом размере. В общем и целом, это отличная утилита, помогающая взаимодействовать с элементами адаптивного дизайна, а также помогающая выжать все возможности из разрешений экранов.

Утилита Times & Images Loaded

Данная библиотека позволяет получить доступ к таймерам и триггерам действий. С помощью объекта Timer можно запускать простые таймеры. Принцип работы схож с setInterval, только с большим функционалом (можно ставить на паузу и продолжать). К примеру, вы хотите загружать новые изображения каждые 10 секунд, но при появлении определенных действий вам необходимо остановить таймер и запустить его только, после завершения действия. Ниже мы запускаем функцию checkStuff() каждые 10 секунд:

var imagesTimer = new Foundation.Timer(myElement, 10000, checkStuff);

Таймер означает, что вы можете контролировать весь процесс start, pause, continue. Такой подход используется в слайдере Orbit. Для запуска функции можно использовать функцию onImagesLoaded, когда все изображения загрузились. К примеру, у вас есть сетка из 6 изображений, и вы хотите запустить какой-либо функционал только после полной отрисовки всех шести изображений (или показать сообщение):

var $images = $('.gallery-image');
Foundation.onImagesLoaded($images, processGallery);

// вызывается после загрузки галереи. 
function processGallery() {
  alert('Loaded!');
}

Данная утилита крайне полезна для получения момента окончания загрузки элементов.

Утилита Touch

Утилита touch делает именно то, что заложено в этом слове – простой и легкий метод добавления интерактивности с тач скрином. Обработать события прикосновения к экрану можно при помощи вызова метода addTouch() для селектора, а затем передать в функцию нашу логику:

// обработка свайпа вправо
$('.my-element').addTouch().on('swiperight', 'handleSwipeFunction');

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

Orbit Slider: новое назначение

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

В Foundation 5 Orbit Slider был комплексным компонентом, с помощью которого пользователи могли создавать полностью адаптивные, интерактивные слайдеры видео, изображений и контента. Orbit в Foundation уже очень давно, и за эти годы он был накачан множеством конфигураций, что привело к усложнению в обслуживании.

С выходом Foundation 6 Zurb объявили о прекращении разработки Orbit, что, как вы можете представить, расстроило множество людей, которым нравилась его гибкость.

Тем не менее, вместо полного удаления, в Foundation 6 изменилось назначение Orbit. Слайдер стал легковесным, простым с сохранением хорошей кастомизации. Сейчас это уже не тот комплексный слайдер, а скорее вайрфрейм.

Обновленные адаптивные размеры экрана

Foundation 5 задали набор различных размеров экрана под свой адаптивный дизайн, включающий в себя small, medium, large, xlarge и xxlarge. При использовании варианта с Sass необходимо указать профиль нужного устройства, которому вы хотите добавить стили:

// низкие разрешения
@media #{$small-only} {
  .primary{
    border: solid 1px red;
  }
}
// средние разрешения
@media {$medium-only} {
  .primary{
    padding: 25px;
  }
}
// стандартные 
.primary {
  position: relative;
  margin-bottom: 15px;
  padding: 15px;
}

Миксины в Foundation 6 стали намного легче и интуитивнее. Вместо того, чтобы вызывать профили устройств и присваивать им стили для каждого элемента, теперь можно подключить миксин напрямую в элемент:

.primary {
  // низкие разрешения
  @include breakpoint(small only) {
    border: solid 1px red;
  }
  // средние
  @include breakpoint(medium only) {
    padding: 25px;
  }
  // стандартные
  position: relative;
  margin-bottom: 15px;
  padding: 15px;
}

Преимущество состоит в том, что все стили находятся в одном месте. Не нужно искать нужные стили по всем файлам и смотреть, какие стили к какому профилю относятся. Теперь для вас все в одном месте. С помощью Breakpoint mixin можно передать большой набор разных значений, который повлияет на то, к чему будут применены стили.

Профили размеров экрана устройств small, medium, large, а также есть дополнительные модификаторы down, up, only (нужны для установки размера экрана меньше, больше или по точным размерам). Если вы через чур кропотливо подошли к дизайну, то можно добавить опции landscape, portrait или retina.

Пользовательские размеры

Поскольку мы говорим о размерах экрана, в Foundation 6 есть возможность задавать свои профили размеров для сайта при помощи настройки переменной $breakpoints в файле _settings.scss. Это основной файл настроек в Sass версии Foundation (настройки используются для генерации CSS). В коде ниже можно переопределить значения размеров экранов или даже добавить новые.

// Foundation 6 значения по умолчанию
$breakpoints: (
  small: 0,
  smedium: 420px, // мой размер
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

Как видно, новый размер добавить очень просто (в примере был добавлен профиль smedium для устройств с экраном в 420px). Даже если вы зададите свои размеры, они не применятся в выходном файле CSS до тех пор, пока вы также не добавите их в переменную $breakpoint-classes(), определенную немного ниже в файле настроек. По умолчанию используются только small, medium и large профили. Вам необходимо добавить свои профили для того, чтобы все заработало.

// добавлен новый размер (smedium)
$breakpoint-classes: (small smedium medium large);

Чем больше размеров задано, тем больший CSS код генерируется. Будьте осторожны с добавлением тонн новых размеров на свой сайт.

Уникальные дизайны с меньшим количеством стилей

Часто люди жалуются на сайты, разработанные с помощью популярных фреймворков, что «они все одинаковые». В Zurb приняли к сведению данные жалобы и резко сократили свои стили. Там, где раньше основа обеспечивала пользователей кучей стилей и элементов, в новой версии Foundation 6 от всего этого остался только основной каркас, вайрфрейм.

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

Только время даст ответ на то, как сообщество встретит данные нововведения. А сейчас же каждый должен попробовать отойти от всем надоевшим, старым клише в дизайне.

Что по поводу сетки и меню в Foundation?

Бросается в глаза, что в списке нововведений Foundation 6 отсутствуют два улучшенных инструмента, это сетка и меню. В данных инструментах были также значительные изменения, про которые я расскажу на следующей неделе. Так что следите за обновлениями!

Заключительные мысли

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

Некоторые разработчики могут разочароваться решением сократить функционал компонентов, тем самым уменьшив количество опций и заставляя пользователей самим прописывать стили. Однако компромисс заключался в том, что система стала работать намного лучше, выполняя функции фреймворка, а не комплексного решения для создания сайтов. В процессе разработки существенно сократился вес, увеличилась скорость работы, тем самым упрости обслуживание Foundation. Короче говоря, Foundation 6 удивительный фреймворк, и вам стоит его попробовать.

Автор: Simon Codrington

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree