Топ-10 речей, які ми зрозуміли під час роботи з Foundation for Apps

Зовсім нещодавно ми запустили <a href=«foundation.zurb.com/apps/>Foundation for Apps. Було чудово отримувати від вас відгуки і пропозиції з приводу нашого останнього фреймворку!

За цей невеликий час ми вже встигли дізнатися багато. Тут перші 10 речей, які нам здаються важливими:

1. Flexbox — це здорово, але складно

Ми почали будувати наш фреймворк з використанням Flexbox замість традиційної сітки float. Це дозволило нам акуратніше виконувати деякі речі на зразок змішування fixed — і fluid-width, істотно поліпшити вихідний код, і переорієнтувати сітку. Ми зрозуміли, що Flexbox просто чудовий, і в нього також є підтримка безлічі різних браузерів. Довелося розбиратися у всіх його тонкощах, робити його доступним для різних, але у нас вийшла просто чудова сітка!

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. Новий Єті


Коли нам захотілося створити рідного брата для нашого Єті, то ми звернулася до чудового ілюстратора. Адам створив досить схожий, але трохи відрізняється від першого образ Йєті.

Це лише небагато з того, що ми зрозуміли для себе на даний момент. Веб буде стрімко розвиватися, і Zurb Family не збирається відставати.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.