Топ-10 вещей, которые мы поняли во время работы с Foundation for Apps

Совсем недавно мы запустили Foundation for Apps ^[1]. Было замечательно получать от вас отзывы и предложения ^[2] по поводу нашего последнего фреймворка!

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

1. Flexbox — это здорово, но сложно

Мы начали строить наш фреймворк с использованием Flexbox вместо традиционной сетки float. Это позволило нам аккуратнее выполнять некоторые вещи вроде смешения fixed- и fluid-width, существенно улучшить исходный код, и переориентировать сетку. Мы поняли, что Flexbox просто замечателен, и у него также есть поддержка множества разных браузеров ^[3]. Пришлось разбираться во всех его тонкостях, делать его доступным для разного ПО, но у нас получилась просто замечательная сетка!

2. Люди любят ASCII арт

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

3. Тяжело давать имена

Нет, это правда. Четыре года назад, когда мы создали Foundation for Sites, вся сетка имела простые и понятные имена для каждого из своих элементов. Когда мы стали переделывать структуру и переходить на вертикальную сетку, многие из этих имен утратили свой смысл (например, столбцы и строчки). Некоторые идеи типа 'group' и 'block' показались нам слишком абстрактными, но, все же, стали основой для некоторых CMS. Все сошлись на том, чтобы называть все в формате :grid-<имя того, что использовано>. "Grid-block" был использован для создания шаблонов, а "grid-content" — для контента приложения.

4. Пространство имен — еще более сложная штука

Используя Angular, мы стали разделять код на отдельные библиотеки, например, для создания всплывающих окон и сообщений. Чтобы не запутаться, необходимо давать всем файлам одинаковые префиксы. Первой идеей было использовать 'fa-' но тогда многие рассказали нам о том, что они пользуются Famo.us или Font Awesome, имена файлов которых начинаются с FA. Итак, мы выбрали частицу zf-, которая также совпадала с Zend Framework, но они таковую не использовали.

5. В приложениях нет определенных отзывчивых моделей

ZURB создавал отзывчивые шаблоны на протяжении пяти лет, но вот фреймворками такого типа не занимался никогда. Мы создавали модели, по которым бы могли работать веб-приложения. Как оказалось, у таких приложений нет своего языка дизайна с какими-то принципами и нормами. Для нас это стало неким экспериментом, и, как мы думаем, опыт удался. У наших разработчиков получилось создать отдельные элементы и блоки веб-приложения, меняющие свои размеры в зависимости от размера экрана устройства. Появились даже элементы, меняющиеся при прокрутке и выпадающие списки, выполняющие некие действия при выборе элементов. Мы все еще работаем над этим «языком», расширяя его и адаптируя под него все современные стандарты веба.

6. Приложения не являются веб-приложениями

Foundation for Apps создавался именно как фреймворк веб-приложения с самого первого дня. Я повторю: Foundation for Apps создавался с ВЕБ-ПРИЛОЖЕНИЯМИ! Мы хотели создать именно отзывчивое веб-приложение, которое бы работало в большинстве веб-браузеров.

7. Маршрутизация — это сложно

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

---
name: home
url: /home
animationIn: bounceIn
animationOut: bounceOut
--- 

Мы читаем:

var routerApp = angular.module('routerApp', ['ui.router']);
 
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
 
$stateProvider
.state('home', {
url: '/url',
templateUrl: 'partial-home.html',
controller: 'PageController', //default controller
data: { vars: {
name: home,
url: /home,
animationIn: bounceIn,
animationOut: bounceOut
}}
});
}); 

8. Все компоненты просто отображаются и скрываются

Мы пришли к выводу, что все JS компоненты просто появляются и скрываются на странице во время создания Foundation for Apps. Разработчики сделали API, показывающий нужные элементы с простым синтаксисом вроде open, close или toggle, взаимодействующий с объектами через их ID.

9. Высота — гражданин второго сорта

Многие люди, которые хоть раз использовали проценты для указаны высоты элемента, должны были быть очень удивлены. Если указать высоту, равную 100%, то мало что изменится. Нам хотелось создать веб-приложения, работающие во весь экран, из-за чего воспользовались VH (viewport height).

10. Новый Йети

Когда нам захотелось создать родного брата для нашего Йети, то мы обратилась к замечательному иллюстратору ^[4]. Адам создал довольно похожий, но немного отличающийся от первого образ Йети.

Это лишь немногое из того, что мы поняли для себя на данный момент. Веб будет стремительно развиваться, и Zurb Family не собирается отставать.

Автор: alexandfox

Источник ^[5]