Доброго часу доби, дорогі мешканці Хабра!
У своїй першій статті я б хотів розповісти про UIKit - дуже корисний і цікавий css- і js- фреймворку, який, як мені здається, незаслужено обходять на Хабре стороною.
Спочатку фреймворк замислювався (та таким і вийшов) як сучасний, швидкий і модульний, що з одного боку накладає деякі обмеження на використання підтримка ie9 + (нижче м'яка деградація), але дозволяє відкинути великий пласт «хаков і хуков», який доводиться підтримувати в проектах « конкурентів ».
Завантажити / ознайомитися з фреймворком можна тут - getuikit.com/
Модульність і розмір.
Початкові розміри стартують з 55Kb (js - 33Kb / css - 22Kb / без мініфікаціі і гзіпа).
Фреймворк йде з дуже багатим і цікавим набором компонентів, але таке багатство має на увазі під собою і значний розмір (100 Кб повна збірка js) - модульна ж структура дозволяє насолодитися всім необхідним при істотному скороченні розмірів.
У порівнянні з іншими фреймворками:
Хоча тут звичайно розробники трохи лукавлять, трохи підганяючи дані, під себе та й версія порівняння 1.0, але фреймворк насправді легкий.
На самих компонентах ми зупинимося трохи пізніше.
У бутстрапа є можливість використання гліфів - уікіт пішов далі не відстав і дуже якісно впровадив повну підтримку шрифту Awesome - fortawesome.github.io/Font-Awesome
«Гліфів» більше - кастомізіруемость ширше.
Закладена підтримка гугл шрифтів з коробки.
адаптивність
Так як фреймворк створювався з оглядкою на сучасні тренди, а адаптивність і гнучка грід структура - зараз мало не основний тренд - уікіт спочатку «заточений» під них. Цим, звичайно, нікого зараз не здивуєш, але підтримка цих можливостей тут зроблена дійсно на високому рівні.
Будь-який новий фреймворк виступає де-факто в ролі наздоганяючого (того ж бутстрапа) і нормальною практикою є використання неконфліктний найманого - з чим розробники з yootheme прекрасно впоралися. Найманого прості, унікальні і нічого не «ламають».
Компоненти / Addons
Однією з приємних особливостей фреймворка є Дуже гнучка можливість комбінування компонентів без створення «велосипеда».
Як приклад можна розглянути створення випадаючих списків. У фреймворку є два незалежні компоненти Button і Dropdown - щоб отримати групу кнопок з персональними випадають списками можна просто з'єднати ці компоненти. І так скрізь: буттонс + табс / інпут + іконс або навіть 3-4 компонента разом буттон + дропдаун + субнаем + грід + пошук - легко і без конфліктів.
Компоненти в порівнянні з бутстрапа:
Унікальні / цікаві компоненти 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 на даний момент проходить закрите предальфа тестування, і протягом тижня розробники обіцяють відкрити першу хвилю відкритого альфа (після препарування огляд з'явиться тут).
Так в бутстрапа теж «гарна підтримка». У 3-й версії спеціально «рідні» іконки зробили з неймспейсом «glyphicon-», щоб можна було підключати будь-які інші іконочние шрифти. Ну і сам Font Awesome спочатку був зроблений для бутстрапа.
Yootheme зібрали свій фреймфорк, щоб уніфікувати розробку шаблонів відразу для Joomla / Wordpress / Pagekit
Must have при використанні Zoo CCK.
А я вважаю за краще UIkit, Bootstrap має потворну надлишкову верстку (наприклад, порівняйте код, потрібний для модального діалогового вікна), не має префіксів в класах, що перетворює верстку в хаос.
UIkit ж дозволяє меншою кількістю коду легко і логічно робити більше. Часто для використання компонентів досить повісити клас (+ атрибут іноді) і не потрібно навіть писати свого JS коду.
До того ж якісний графічний конфігуратор, який при оновленні дозволяє завантажити отриманий в минулий раз LESS і отримати стислий CSS на виході, на відміну від Bootrstrap, де купа незрозумілих параметрів без preview.
Він не легше, він в рази зручніше, при чому майже у всіх конкурентних моментах.
До речі, якщо об'єктивно оцінювати, то в уікіте місце «надлишкової верстки» займає «надлишкове параметрування», якого теж досить - наприклад все, що стосується гріда і блоків.
Зрозуміло, поточна структура дозволяє повністю контролювати зовнішній вигляд на мобільних пристроях, але то що вона мінімальна - сказати язик не повертається.
- - і це лише початок
Справа не в «стандартних» або «нестандартних». Замість пояснень докладу скріншоти мабуть)
SemanticUI:
Своє оформлення, чисто, гладко і красиво. Гуд
Fondation:
Мінімум нововведень, але все виглядає охайно і симпатично. Гуд
UiKit:
Справа обрізаний бордер у випадних елементів, в тому ж місці немає заокруглень (як буд-то Борер йде «під» елемент). Та й шрифт для цифр не підходить зовсім. В цілому, виглядає дуже неохайно.
Розділ «Документація», друге речення: «гіхаб» → «гіт хаб»
Мій улюблений мінімалістичний html / css framework - purecss.io
Всього 4.5кб і нічого зайвого.
Використовую його тоді, коли розмір дійсно має значення.
Де ви раніше були?) А для модальних вікон, бува, не знаєте якусь хорошу бібліотечку, так, щоб jQuery не вимагав?
Час вказано в тому часовому поясі, який встановлений на вашому телефоні.