Перейти к содержимому


Фотография
* * * * - 4 Голосов

Шаблон UIKIT для JBZOO

эксперимент uikit jbzoo 2.0+

  • Закрытая тема Тема закрыта
Сообщений в теме: 137

Опрос: Нужно ли дальше развивать шаблон Uikit и полностью переходит на него? (110 пользователей проголосовало)

Нужен ли Uikit?

Вы не можете видеть результаты проса пока не проголосуете.
Голосовать

#1 Cheren-dow

Cheren-dow

Отправлено 05 November 2013 - 08:25

Доброго времени суток форумчане - вот и дождались, Uikit Framework "уже с нами".
 
Вашему вниманию хотим предоставить экспериментальный шаблон каталога сделанный на основе Uikit Framework. Вся разработка велась на последней версии JBZoo, а именно версии 2.0.2.

Топик создан по мотивам http://forum.jbzoo.com/topic/4224- и является неким его логическим продолжением.
 
-=Чем новым порадуете?=-
1. Возможность выбора шаблона.
Теперь, при создании нового приложения или при изменении текущего, можно выбрать какой шаблон использовать.
515635_200x0.png
 
 
 
2. Подключены файлы фреймворка.
Были подключены файлы самого фреймворка, а так же иконочный шрифт FontAwesome. Как использовать можно посмотреть в официальной документации.
Расположение файлов фреймворка:

сайт\media\zoo\applications\jbuniversal\assets

--\css
----uikit.css
--\js
----uikit.min.js
--\fonts
----FontAwesome.otf
----fontawesome-webfont.eot
----fontawesome-webfont.ttf
----fontawesome-webfont.woff

 
 
3. Деление колонок и responsive
Деления категорий и материалов на колонки реализовано с помощью Сетки(Grid) самого фрейворка. Теперь устанавливая на сайт шаблон  с адаптивной версткой JBZoo с шаблоном Uikit будет подстраивать ширину колонок под ширину экрана.
C шаблоном Catalog это выглядит так - все слипалось
018def_200x0.jpg
 
Но с новым шаблоном Uikit мы увидим значительную разницу. При нормальных размерах разницы нет(1 левое изображение). Начинаем уменьшать ширину окна браузера и видим(2 слева изображение) колонки немного сузились. Еще уменьшим размер окна и увидим(3 - последние изображение). Деление на колонки не происходит и все колонки идут вниз, друг за другом.
a9c9b9_200x0.jpg    6d9a5e_200x0.jpg    804036_200x0.jpg
 
Это и есть основная "фича" нового шаблона Uikit  - которая дает нам нормальный просмотр сайта а в частности каталога на мобильных устройствах.
 
Казалось бы все гладко и красиво - да так и есть, но изменять стили уже намного труднее чем в шаблоне Catalog. Ближе к концу будут приведены примеры - минусы использования этого шаблона. А сейчас ещё немного плюсов.
 
 
 
4. Изменения блоков
Из картинок вы уже могли заметить что фон и рамка блока немного видоизменилась - для этого использовались стили из раздела Panel Uikit Framework.
 
 
 
5. Uikit Pagination
Так же был переопределен стандартный pagination на Uikit Pagination. Теперь внизу находятся красиво оформленные кнопки навигации.
cc602b_200x0.jpg          35d2bc_200x0.jpg
 
 
 
6. Изменен шаблон материала - FULL
39b95b_200x0.jpg
 
1. Рейтинг теперь находится ниже заголовка.
2. Jquery вкладки были заменены на вкладки от Uikit Framework - теперь они стали адаптивные
9db271_200x0.png
3. Комментарии также подверглись не большим изменениям и используют стили Uikit
9806a0_200x0.png
 
Вот и все радости.
 
-=Минусы использования Uikit шаблона=-
1. Т.к шаблон и сам Uikit Framework использует строгую сетку, изменение ширины, отступов и рамок будут критичным для всего каталога. Например, изменили мы ширину на 0,1% и видим:
30cb86_200x0.png
Все колонки "потерялись".
 
 
 
2. Что бы что то изменить в самом фреймворке нужно заходит в css файл и делать в нем правки. А так как css файл достаточно много весит он был сжат. И разобраться в одной длинной строчке будет очень трудно даже знающему человеку. Так что же делать? На выбор 3 способа.
 
2.1. Скачать исходники фреймворка изменить их и компилировать их в css
2.2. Скачать полную(не сжатую) версию CSS файла и делать правки в нем
2.3. Добавить ещё один CSS файл и переопределять стили uikit в нем
 
Процедура довольно не сложная, но может занять достаточно много времени. Перед тем что бы внести изменения в фреймворк -  его нужно знать, придется на это потратить время, разобраться со всеми классами и нюансами. Когда в стандартном шаблоне, Catalog, подключается один файл стилей jbzoo.css и в нем нет медиа запросов, и он состоит из ~2000 строк. Когда css файл Uikit состоит почти из 7000 строк и весит почти в 2 раза больше.
 
 
 
3. C шаблоном UIKit подключается на 2 файла больше чем в шаблоне Catalog - замедляется работа сайта.
Добавится более 200кб (!).
 
 
 
4. Мало кто использует все возможности фреймворка. От сюда получается что большинство классов не используются и они просто так каждый раз загружаются снова и снова.

 
 
5. Нет и не будет возможности обновить текущий ваш сайт до возможностей uikit.
 
 
 
Вывод:

  • Что бы вносить изменения - нужно разобраться с фреймворком и очень хорошо разбираться в CSS+HTML
  • Если не вносить изменения все созданные сайты будут однотипные, похожие друг на друга.
  • В css файле находится много строк кода которые не используются - падает скорость.

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

сайт\media\zoo\applications 

Прикрепленный файл  jbuniversal_tpl_uilit_patch.zip   300.9К   206 Количество загрузок:
 
 
 
Или установите полную версию JBZoo вместе с новым шаблоном Uikit
Прикрепленный файл  jbzoo_app_2.0.2_tpl_uilit.zip   1.36МБ   147 Количество загрузок:


Сообщение отредактировал Cheren-dow: 29 December 2013 - 11:21

  • 3
Изображение
 

#2 Tunga

Tunga

Отправлено 05 November 2013 - 16:45

На мой взгляд нужно разделить развитие вашего продукта на две ветки, дабы не усложнять жизнь тем людям которые создают на вашем приложении интернет магазины для себя. Для них одно направление юзер зачем им разбираться с фреймворком и очень хорошо разбираться в CSS+HTML если их главная задача продавать товары. Второе направление это разработчики делающие магазины на заказ вот тут можно ставить какие угодно эксперименты ::) 


  • 0

JBZoo это круто!


#3 SmetDenis

SmetDenis

Отправлено 05 November 2013 - 17:27

Кратко напишу свое небольшое ИМХО по этому поводу =)

Считаю UIkit почти полной копией небезызвестного Bootstap.
Возможности, компоненты, названия и даже внешний вид (и ссылка) официального сайта - все честно слизано с детища Twitter.
И многое пока сыровато.

Что даст UIkit для JBZoo ?
- Единый профессиональный стиль всего шаблона
- Нативную адаптивность
- Решение некоторых проблем с версткой
- Проблемы с обновлением при переходе на UIkit
- Сложность кастомизации для тех кто боится CSS+HTML и уже тем более такой спорной штуки как LESS
- Фундаментальные изменения в некоторых блоках HTML
- Шаблонность сайта, которую сложно скрыть.

... в принципе эти проблемы решает (или добавляет) и бутстрап (или его модификация из протостара).

Подобные фреймворки нужны для быстрого создания панелей управления и сервисов.

Пока склоняюсь к той мысли, что нужно как-то причесать внешний вид в ближайших релизах.
Осталось только найти оптимальный способ =)

Делать два разных шаблона - не желательно. Это сложно поддерживать. Будет много костылей (особенно с элементами).
Резкий переход на новый шаблон - болезненное обновление.
Оставлять все как есть - тоже проблематично в перспективе разработки.
Делать отдельную ветку JBZoo - точно нет =)


Так что делитесь своими мыслями ;)
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#4 ilham76

ilham76

Отправлено 05 November 2013 - 18:12

5. Нет и не будет возможности обновить текущий ваш сайт до возможностей uikit.

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


  • 0

там за окном...сказка с несчастливым концом....


#5 SmetDenis

SmetDenis

Отправлено 05 November 2013 - 18:25

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

Совершенно разные стили и даже разметка HTML + каждый сайт в каком-то смысле уникален.
Поэтому автоматически обновиться - больная тема, хотя теоретически возможно.

как вариант можно попробовать экспериментальную сборку и решить, стоит ли игра свеч или нет.
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#6 IPname

IPname

Отправлено 05 November 2013 - 19:48

вовремя однако, спс) утром начал новый проект и на тебе подарочек)


  • 0
Иной толкает пылесос, который нужен мне едвали, Изжога, перхоть и понос, О Боже, как Вы задолбали. Я не хотел бы Вас ругать, к больным мозгам претензий нету, Но раздается"Вашу мать"тебе в ответ по интернету

#7 Tunga

Tunga

Отправлено 05 November 2013 - 23:18

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

Я так понял вы можете создать новый сайт на сборке jbzoo_app_2.0.2_tpl_uilit.zip , но выйдет jbzoo_app_2.0.3 и вы не сможете до нее обновиться , или не так?


  • 0

JBZoo это круто!


#8 ilham76

ilham76

Отправлено 05 November 2013 - 23:37

я эти слова понял как то что нынешний сайт каталог не на uilit невозможно обновить до всех возможностей чистой установки jbzoo_app_2.0.2_tpl_uilit , могу ошибаться.


Сообщение отредактировал ilham76: 05 November 2013 - 23:38

  • 0

там за окном...сказка с несчастливым концом....


#9 Tunga

Tunga

Отправлено 06 November 2013 - 02:48

я эти слова понял как то что нынешний сайт каталог не на uilit невозможно обновить до всех возможностей чистой установки jbzoo_app_2.0.2_tpl_uilit , могу ошибаться.

Но если так то это уже радует, придется старый сайт убить, еще прочел что компания yootheme выпустила свою CMS теперь мне вообще страшно, а вдруг их  Zoo в будущем будет работать только с их CMS и на поддержу своих приложений в Joomla они забьют )))

http://www.pagekit.com/


Сообщение отредактировал Tunga: 06 November 2013 - 02:54

  • 0

JBZoo это круто!


#10 SmetDenis

SmetDenis

Отправлено 06 November 2013 - 08:52

Даже если они сделают свою CMS то она будет никому не нужна пока не обрастет большим кол-вом расширений и сообществом разработчиков. Процес не быстрый.
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.






Темы с аналогичным тегами эксперимент, uikit, jbzoo 2.0+

Click to return to top of page in style!