This topic is locked
Доброго времени суток форумчане - вот и дождались, Uikit Framework "уже с нами".
Вашему вниманию хотим предоставить экспериментальный шаблон каталога сделанный на основе Uikit Framework. Вся разработка велась на последней версии JBZoo, а именно версии 2.0.2.
Топик создан по мотивам http://forum.jbzoo.com/topic/4224- и является неким его логическим продолжением.
-=Чем новым порадуете?=-
1. Возможность выбора шаблона.
Теперь, при создании нового приложения или при изменении текущего, можно выбрать какой шаблон использовать.
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 это выглядит так - все слипалось
Но с новым шаблоном Uikit мы увидим значительную разницу. При нормальных размерах разницы нет(1 левое изображение). Начинаем уменьшать ширину окна браузера и видим(2 слева изображение) колонки немного сузились. Еще уменьшим размер окна и увидим(3 - последние изображение). Деление на колонки не происходит и все колонки идут вниз, друг за другом.
Это и есть основная "фича" нового шаблона Uikit - которая дает нам нормальный просмотр сайта а в частности каталога на мобильных устройствах.
Казалось бы все гладко и красиво - да так и есть, но изменять стили уже намного труднее чем в шаблоне Catalog. Ближе к концу будут приведены примеры - минусы использования этого шаблона. А сейчас ещё немного плюсов.
4. Изменения блоков
Из картинок вы уже могли заметить что фон и рамка блока немного видоизменилась - для этого использовались стили из раздела Panel Uikit Framework.
5. Uikit Pagination
Так же был переопределен стандартный pagination на Uikit Pagination. Теперь внизу находятся красиво оформленные кнопки навигации.
6. Изменен шаблон материала - FULL
1. Рейтинг теперь находится ниже заголовка.
2. Jquery вкладки были заменены на вкладки от Uikit Framework - теперь они стали адаптивные
3. Комментарии также подверглись не большим изменениям и используют стили Uikit
Вот и все радости.
-=Минусы использования Uikit шаблона=-
1. Т.к шаблон и сам Uikit Framework использует строгую сетку, изменение ширины, отступов и рамок будут критичным для всего каталога. Например, изменили мы ширину на 0,1% и видим:
Все колонки "потерялись".
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.9KB
221 downloads
Или установите полную версию JBZoo вместе с новым шаблоном Uikit
jbzoo_app_2.0.2_tpl_uilit.zip 1.36MB
162 downloads
Edited by Cheren-dow, 29 December 2013 - 11:21.
Answered
