UIKit обзор css/js фреймоврка

Содержание

b7ffda2829fd47fae78d5a76b522835a

Я бы хотел рассказать о UIKit — очень полезном и интересном css и js фреймворке.

UIKit родился в недрах компании Yootheme и вышел в свет после долгого тестирования и обкатки в проектах и шаблонах компании в июле 2013 года, и за почти год жизни дошел большими шагами до версии 2.5 (и это не просто ежемесячное повышение версии, но результат реальный работы команды).

Изначально фреймворк задумывался (да таким и получился) как современный, быстрый и модульный, что с одной стороны накладывает некоторые ограничения на использование поддержка ie9+ (ниже мягкая деградация), но позволяет отбросить большой пласт «хаков и хуков», который приходится поддерживать в проектах «конкурентов».
Скачать/ознакомиться с фреймворком можно тут — getuikit.com/

Фрейморк сделан с использованием less и примесей. В случае UIKit ядро полностью отделено от стилей «шаблона». Удобные переменные позволят начинающим быстро сориентироваться и подогнать внешний вид под себя. Кто плохо ориентируется в less или не ориентируется вообще — есть удобный базовый визуальный редактор стилей, позволяющий получить вполне приемлемый результат — getuikit.com/docs/customizer.html

Модульность и размер.

Начальные размеры стартуют с 55Kb (js – 33Kb / css – 22Kb / без минификации и гзипа).

Фреймворк идет с очень богатым и интересным набором компонентов, но такое богатство подразумевает под собой и значительный размер (100Кб полная сборка js ) – модульная же структура позволяет насладиться всем необходимым при серьезном сокращении размеров.

В сравнении с другими фреймворками:
Хотя тут конечно разработчики чуть-чуть лукавят, немного подгоняя данные, под себя да и версия сравнения 1.0, но фреймворк на самом деле легок.

CSS
Без иконок.
e039d9aac67f61bccfdb57f84bad6f2f

С иконками
d1f80cececb7153c3d9f3b08f0837e13

JS
0aead9bf552cbaf45269ba79ef1ebe46

И все вместе
10c8005770f99ef21cb92582305b5319

На самих компонентах мы остановимся чуть позже.

Шрифты

У бутстрапа есть возможность использования глифов – уикит пошел дальше и внедрил полную поддержу шрифта Awesome — fortawesome.github.io/Font-Awesome

«Глифов» больше — кастомизируемость шире.

Заложена поддержка гугл шрифтов из коробки.

Адаптивность

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

Нейминг

Любой новый фреймворк выступает дефакто в роли догоняющего (того же бутстрапа) и нормальной практикой является использование не конфликтующих неймингов – с чем разработчики из yootheme прекрасно справились. Нейминги просты, уникальны и ничего не «ломают».

Компоненты/Addons

Одной из приятных особенностей фреймоврка является Очень гибкая возможность комбинирования компонентов без создания «велосипеда».
Как пример можно рассмотреть создание выпадающих списков. Во фрейморке есть 2 независимых компонента Button и Dropdown – чтобы получить группу кнопок с персональными выпадающими списками можно просто соединить эти компоненты. И так везде буттонс + табс / инпут + иконс или даже 3/4 компонента вместе бутон + дропдаун + субнав + грид + поиск – легко и без конфликтов.

Компоненты в сравнении с бутстрапом:
Bootstrap UIKit
Glyphicons Font Awesome
Dropdowns Dropdown
Button groups Button
Button dropdowns Button + Dropdown
Input groups Form (частично)
Navs Nav
Navbar Navbar
Breadcrumbs Breadcrumb
Pagination Pagination
Labels
Badges Badge
Jumbotron
Page header
Thumbnails Thumbnail
Alerts Alert
Progress bars Progress
Media object Comment
List group ELEMENTS (но скуднее намного)
Panels Panel
Wells LAYOUT
JS
Transitions Animation
Modal Modal
Dropdown Dropdown
Scrollspy Scrollspy
Tab Tab
Tooltip Tooltip
Popover Tooltip
Alert Alert / Notify
Button Button
Collapse Toggle
Carousel
Affix Sticky
Уникальные/интересные компоненты UIKit
  • Off-canvas — очень приятен и удобен для мобильных устройств
  • Switcher — вариация буттонс с вшитым «тригером» активного состояния
  • Navigations — тут серия компонентов для удобства навигации
  • Form file / Form password/Upload — расширения возможностей форм
  • Placeholder
  • Search — поисковое поле с готовой возможностью показа аякс результатов
  • Sortable — базовый ui управления порядком элементов (удобен в админке) — не нужен JQueryUI
  • Timepicker/ Datepicker — базовый ui выбора дат и времени — не нужен JQueryUI
  • Autocomplete — тут все ясно
  • Markdown area — превью для работы с CodeMirror
В сухом итоге:

Есть все необходимое, а то, что отсутствует — легко реализуется стандартными средствами CSS (ну за исключением «карусели»).

Стили и темы

Уже говорилось – тут все прекрасно.

Документация

Прекрасно сделанная и поданная документация позволит новичкам быстро вникнуть в принципы работы. Серьезные вещи – через гихаб или суппорт.

Зачем Yootheme сделали новый «движок» — кому это все надо?

Yootheme уже много лет работают над созданием шаблонов и компонентов для Joomla.
Но не просто делают, а пытаются улучшить этого «корявого монстра»

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

Далее было Zoo — именно полноценного / современного / удобного CCK джумле очень не хватало (k2 хорош — но тоже монстроватый).
Zoo позволяет практически полностью отказаться как от базовых компонентов, так и от сторонних расширений и модулей.

Теперь yootheme замахнулись на создание своей собственной CMS — PageKit (symfony).
Отчетливо видно, что команда, нацеленная на создание и долгосрочную поддержу полноценного CMS, хочет иметь под рукой свой собственный гибкий инструментарий для реализации задумок.

Приятно знать, что все свои проекты, начиная от Warp/Zoo и кончая UIKit/PageKit Yootheme реализуют в качестве опенсорс проектов.

Кстати, сам PageKit на данный момент проходит закрытое предальфа тестирование, и в течение недели разработчики обещают открыть первую волну открытого альфа (после препарирования обзор появится тут).

Ссылки: