Download Шаблон UIKIT для JBZOO
version: beta 1

Доброго времени суток форумчане - вот и дождались, Uikit Framework "уже с нами".

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

Топик создан по мотивам http://forum.jbzoo.com/topic/4224- и является неким его логическим продолжением.

[color=#800000]-=Чем новым порадуете?=-[/color]
1. Возможность выбора шаблона.
Теперь, при создании нового приложения или при изменении текущего, можно выбрать какой шаблон использовать.


 

2. Подключены файлы фреймворка.
Были подключены файлы самого фреймворка, а так же иконочный шрифт FontAwesome . Как использовать можно посмотреть в официальной документации .
Расположение файлов фреймворка:

сайтmediazooapplicationsjbuniversalassets--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


Вот и все радости.

[color=#800000]-=Минусы использования Uikit шаблона=-[/color]
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.

 

[color=#800000]Вывод: [/color]

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

[color=#800000]-=Эпилог=-[/color]
Шаблон создавался как эксперимент и не тестировался в боевых условиях и выкладывается только в качестве ознакомления. Так же ни каких изменений не вносилось в шаблоны элементов, т.к это заняло бы много время и данный релиз затянулся на неопределенное время.

Вы можете скачать по ссылке патч.Распакуйте его с заменой файлов в папку

сайтmediazooapplications

 

Или установите полную версию JBZoo вместе с новым шаблоном Uikit