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


Загрузил

Тема поддержки файла Информация

  • Загружен: Jun 22 2014 13:09
  • Последнее обновление: Jun 22 2014 13:11
  • Размер: 1.65МБ
  • Просмотров: 7765
  • Скачан: 175
  • Версия JBZoo: Все версии
  • Версия Zoo: Все версии
  • Версия Joomla: Все версии

Загрузить Шаблон UIKIT для JBZOO
version: beta 1

* * * * * 1 Голосов
uikit шаблон



Доброго времени суток форумчане - вот и дождались, 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




Фотография
Шингисович
Jul 01 2014 10:50

Наверное в папку: сайт/media/zoo/applications

    • 0
  • Ответить
  • Жалоба
Фотография
Евгений_К
Apr 07 2015 21:20

Здравствуйте! Не пойму, где шаблон UIkit в версии 2.1.5 вижу только "Catalog"?

    • 0
  • Ответить
  • Жалоба

или Войти


Так же вам могут быть интересны файлы



Случайные файлы





посетителей за последние 15 минут

пользователей, гостей, анонимных

Click to return to top of page in style!