Plane UI

The Modern HTML5 Cross-Device Responsive Front-end UI Framework.

Plane UI, что означает бумажный самолёт или плоский пользовательский интерфейс (P(aper) (P)lane UI), является кроссплатформенным адаптивным фреймворком для создания фронтенда на HTML5 и решения проблем, связанных с этим процессом.

Содержание

• Концепция дизайна
• Основные характеристики
• Загрузка и установка
• Использование
• Список компонентов
• Зависимые проекты и благодарности
• Поддержка совместимости
• Документация по разработке
• Журнал обновлений
• Лицензия

Концепция дизайна

• Простота, универсальность и эффективность разработки;
• Модульность, слабая связанность;
• Приоритет мобильных устройств, элегантное ухудшение качества;
• Эстетика, взаимодействие в основе;
• Постоянное развитие, принятие новых технологий;

Основные характеристики

• На основе HTML5 + CSS3: приоритет мобильных устройств, быстрая разработка кроссплатформенных адаптивных веб-приложений;
• Интерактивная эстетика: плоский стиль, вдохновлённый и интегрированный с некоторыми элементами дизайна и спецификациями Google Material Design, но также имеющий свой собственный стиль;
• Настройка по требованию: семантическая стилизация, использование препроцессора SCSS;
• Основан на jQuery: более высокая эффективность разработки, удобство использования различных плагинов jQuery;
• Богатые компоненты: множество встроенных часто используемых компонентов, а также эволюция в сторону Web Components;
• Компонентная модульность: следование спецификации CommonJS, поддержка инструментов загрузки модулей AMD / CMD;
• Пространство имён: префиксное пространство имён CSS;
• Элегантное ухудшение качества: обратная совместимость до IE8;

Примечание: IE8 поддерживает основные контент и стили рендеринга и некоторые интерактивные функции.

Загрузка и установка

Скачать с GitHub: https://github.com/pandao/planeui/archive/master.zip

Установить с помощью Bower:

bower install planeui

Использование

<link rel="stylesheet" type="text/css" href="dist/css/planeui.min.css">
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.js"></script>

Совместимость с IE8~9 (основное содержание отображается или поддерживается частично, но всё же рекомендуется не учитывать совместимость с IE8):

<link rel="stylesheet" type="text/css" href="./dist/css/planeui.min.css">

<!--[if (gte IE 9) | !(IE)]><!-->
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.patch.ie8.min.js"></script>
<![endif]-->

<!--[if lt IE 10]>
<script type="text/javascript" src="./dist/js/planeui.patch.ie9.min.js"></script>
<![endif]-->

<script type="text/javascript" src="./dist/js/planeui.js"></script>

Адаптивный сеточный макет:

Общий макет и ограничение максимальной ширины:

<div class="pui-layout pui-layout-fixed"></div>

.pui-layout-fixed ограничивает максимальную ширину до 960px, другие ограничения ширины: pui-layout-fixed-980 pui-layout-fixed-1000 pui-layout-fixed-1200 pui-layout-fixed-1360 pui-layout-fixed-1400 pui-layout-fixed-1500 pui-layout-fixed-1600 pui-layout-fixed-1700 pui-layout-fixed-1800, используя медиазапросы для определения текущей ширины экрана и соответствующего максимального размера.

Пример макета из 12 равных частей:

<div class="pui-grid">
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-6"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-5"></div>
        <div class="pui-grid-xs-7"></div>
    </div>
</div>

Пример гибкого макета Flexbox (не поддерживается IE9 и ниже):

<div class="pui-flexbox pui-flex-column">
    <header>Заголовок</header>
    <div class="pui-flex">Содержимое слоя</div>
    <footer>Нижний колонтитул</footer>
</div>

Дополнительные примеры и способы использования см.: https://pandao.github.io/planeui/

Список компонентов

• Arrow
• Article
• App Layout
• Animations
• Basic
• Badge / Label / Tag
• Button
• Button Sheet
• Breadcrumb
• Card
• Colors (Material Design Colors)
• Color Picker (Material Design Color Picker)
• Checkbox
• Close Button
• Comment
• Dialog
• Date Picker (не реализовано)
• Fonts
• Font sizer
• File Input
• FullPage
• Flexbox Layout
• Forms
• Form Validator
• Grid Layout
• Gallery (не реализовано)
• Icons (в комплекте с Font Awesome и двумя наборами иконок для мобильных телефонов Tmall)
• Image
• List
• ListView Загрузка Меню Панель меню Аккордеон меню Маска Уведомление Пагинация Прогресс Рейтинг Радиокнопка Кольцевой прогресс Поиск Слайдер (не реализован) Кнопка-переключатель Прокрутка до (якорь + контейнер) Боковая навигация / боковой слайд (Off Canvas Plus) Вкладка Тексты Таблица Топ-10 Подсказка Временная шкала Выбор времени (не реализован) Загрузчик (не реализован) Z-глубина (Material Design Z-Depth)

Зависимые проекты и благодарности

1. Зависимые проекты

• jQuery Лицензия jQuery
• Normalize.css Неизвестная лицензия
• Font Awesome GPL License & CC BY 3.0 License
• Библиотека иконок мобильного Taobao Неизвестная лицензия
• HTML5 Shiv Лицензии MIT и GPL2
• Respond Лицензия MIT
• Selectivizr Лицензия MIT
• Modernizr Лицензия MIT
• Flexie Лицензия MIT
• Prefixes.scss Лицензия MIT

2. Справочные проекты

• Bootstrap
• Foundation
• Semantic UI
• Amaze UI
• UI Kit
• Google Material Design

3. Инструменты для разработки

• Gulp.js
• Sass/Scss Лицензия MIT

Примечание: все проекты перечислены без ранжирования.

Поддержка совместимости

Plane UI предоставляет многоуровневую поддержку браузеров (GBS, Graded Browser Support), отдавая предпочтение тем, которые поддерживают новые функции, такие как HTML 5, CSS3 и ES5 / 6.

Тестирование совместимости:

• iOS 7+
• Android 4.2+
• Chrome (последняя версия)
• Firefox (последняя версия)
• Safari 6+
• Opera (последняя версия)
• Internet Explorer 9+

IE 9 имеет ограниченную поддержку из-за отсутствия поддержки некоторых функций HTML5 (например, анимации, Flexbox и т. д.). IE 8 обеспечивает базовую поддержку, но некоторые функции могут быть не реализованы, иметь недостатки или низкую совместимость. IE 7 и более ранние версии, а также Windows Phone и другие платформы или браузеры не тестировались.

Другие среды тестирования совместимости:

• Node-webkit
• Phonegap

Примечание: Android и iOS других версий в настоящее время не тестируются из-за ограничений, и пользователи приветствуются для предоставления обратной связи и сообщения об ошибках.

Документация по разработке

Документация находится в процессе подготовки...

Журнал обновлений

См. журнал обновлений

Лицензия

The MIT License (MIT)

Plane UI следует лицензии MIT, которая позволяет любому лицу или организации свободно использовать её на условиях MIT.

Copyright (c) 2014~2015 Pandao