Что нового в 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 обсуждали ближе к выходу новой версии. Среди этих изменений:

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

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

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

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

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

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

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

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

Именно такой набор установок 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. Ниже я привел пару полезных функций:

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

Утилита Times & Images Loaded

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

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

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

Утилита Touch

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Simon Codrington

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

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

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