0 Пользователей и 1 Гость просматривают эту тему.
  • 17 Ответов
  • 8406 Просмотров
*

Spouqen

  • Новичок
  • 1
  • 0 / 0
UiKit
« : 14.01.2014, 09:59:38 »
Здравствуйте.

Обнаружил очень отличную вещь, под названием UiKit: (http://www.getuikit.com/index.html оф. сайт с возможностью свободного скачивания без всяких вступлений в клубы и т.д.)

Так вот, данная штука способна решить столько задач, что идей в голове неимоверное количество. Проблема в том, что шаблоны в которую интегрирован UiKit я обнаружил только у Yootheme, но их шаблоны мне очень не нравятся, в частности их  Framework. Для своих задач я избрал Framework от Gavick'а, а именно бесплатный шаблон Meet Gavern, который можно скачать лишь зарегистрировавшись, вот ссылка: http://www.gavick.com/joomla-templates/meet-gavern,93.html.

Вот тут у меня вопрос, как интегрировать данную вещь в шаблон от Гавика, по мимо этого на сколько я понял нужна и интеграция в шаблон jQuery.

К сожалению о интеграции таких вещей я не понимаю ничего, если найдется человек который все объяснит, я буду очень признателен и обещаю написать гайд по этому поводу, судя по поиску многие инструментом Uikit интересуются, но никто ничего не объяснил к сожалению. Умоляю гуру о помощи в разрешении данного вопроса. В заранее спасибо.     
« Последнее редактирование: 14.01.2014, 10:25:18 от Spouqen »
*

dennioushen

  • Захожу иногда
  • 86
  • 0 / 0
  • Don Corleone
Re: UiKit
« Ответ #1 : 21.01.2014, 16:24:02 »
Решение должно быть не только с данным шаблоном, а общее решение встраивание в шаблон :)
*

dennioushen

  • Захожу иногда
  • 86
  • 0 / 0
  • Don Corleone
Re: UiKit
« Ответ #2 : 23.01.2014, 01:57:12 »
Подключаем в index шаблона
Download UIkit

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>
*

Alldar

  • Завсегдатай
  • 1504
  • 195 / 1
Re: UiKit
« Ответ #3 : 23.01.2014, 05:28:11 »
Вам нужно переписать еще и логику шаблона, я рекомендую вам скачать шаблон бесплатный от yoo если у вас нет необходимых знаний
*

FlahsAxel

  • Захожу иногда
  • 210
  • 0 / 0
Re: UiKit
« Ответ #4 : 22.02.2014, 21:15:57 »
Доброе время суток.

UiKit Modal - Модальное окно
Если на сайте появляется боковая полоса прокрутки, что обычно имеет место, то при всплытии окна, эта полоса пропадает. Визуально - получаем скачок сайта. Смотрится ужасно. Посмотреть можно на демо сайте, ссылка в 1-м посте.
Можно ли запретить исчезать полосе прокрутке, и как?
*

Sergiy-sv

  • Осваиваюсь на форуме
  • 21
  • 2 / 0
Re: UiKit
« Ответ #5 : 13.04.2014, 17:22:29 »
Как изменить "Изображение для вступительного текста" чтоб выводилось как здесь - http://www.getuikit.com/docs/overlay.html
Шаблон - http://www.yootheme.com/demo/joomla/digit
Куда прописывать этот клас UIkit? Для картинок в отдельности выходит, но надо гдето изменить код "Изображение для вступительного текста" чтоб все картинки которые добавляются как "Изображение для вступительного текста" имели такой эффект.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: UiKit
« Ответ #6 : 13.04.2014, 18:15:24 »
Sergiy-sv:
1. Где по-ссылке с демо вступительный текст? Ни скриншота, ни кода вы не приложили.
2. Шаблона платный. Поддержкой платных расширений занимается разработчик.
3. По второй ссылке у вас уже мануал написан.
4. Пару тем вы уже создали. В одной я написал как надо сделать, чтобы на ваш вопрос кто-нибудь ответил. Создавая бесконечные дубли неинформативных постов вы не только нарушаете правила форума, но вскоре попадёте под бан.
*

guliwer

  • Захожу иногда
  • 103
  • 1 / 1
Re: UiKit
« Ответ #7 : 15.09.2016, 13:44:27 »
Подскажите почему вложеный слайдер в табы некорректно работает ?

Нашел на сайте разработчиков заметку http://getuikit.com/docs/documentation_javascript.html#data-check-display
Прописал у себя
Код
<script>
jQuery(document).ready(function(){
jQuery("#tt").on('display.uk.check', function(){
   var slider = UIkit.slider('.uk-slider-container', {});
  });
});
</script>

Работает только после изменении размера окна  браузера

http://travel.climb.travel/ru/vse-tury/tur-vtoroj (вкладка фотогалерея)

Подскажите, как заставить работать слайдер, а то сам уже ни как не вкурю )))
« Последнее редактирование: 15.09.2016, 19:35:09 от guliwer »
*

guliwer

  • Захожу иногда
  • 103
  • 1 / 1
Re: UiKit
« Ответ #8 : 15.09.2016, 19:51:41 »
Разобрался сам добавил в конце строку jQuery(window).resize();
Код
jQuery("#tt").on('display.uk.check', function(){
   var slider = UIkit.slider('.uk-slider-container', {});
   jQuery(window).resize();
  });
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: UiKit
« Ответ #9 : 25.10.2016, 02:27:43 »
Добрый день. Есть задумка сделать слайдер fullscrenn а в нем вверху div с соц кнопками а ниже меню, которое будет прилипать.
Что то типа этого
Спойлер
[свернуть]
Но ещё с одним дивом с контактами и соц кнопками в самом верху.
Вообщем делаю вот так:
Код
<div class="uk-position-relative">
<div></div>
<div data-uk-sticky>
<nav class="uk-position-top uk-position-z-index">
<ul class="uk-navbar-nav">
<li><a href="">...</a></li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</nav>
</div>
<ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow="{autoplay:'5s', kenburns:'50s'}">
<li><img src="img/slide1.jpg" alt=""></li>
<li><img src="img/slide2.jpg" alt=""></li>
<li><img src="img/slide3.jpg" alt=""></li>
</ul>
</div>
<div style="height: 500px;"></div>
Всё бы ничего но вот если навбару сделать отступ, то при прокрутке он остается. Как выставить это долбаное позиционирование?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: UiKit
« Ответ #10 : 25.10.2016, 02:36:03 »
deminevgen, не очень понял. Что не получается? Офсет выставлять пробовали? <div data-uk-sticky="{top:100}">
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: UiKit
« Ответ #11 : 25.10.2016, 16:06:56 »
deminevgen, не очень понял. Что не получается? Офсет выставлять пробовали? <div data-uk-sticky="{top:100}">
Пробовал.
Сделал вот так:
Код
<style>

#header {
height: 50px;
background: rgba(227, 227, 227, 0.52);
}

.z-index-my {
z-index: -1;
}

.colortest1 {
background: rgba(150, 66, 41, 0.45);
}
</style>
<!-- Основной резиновый контейнер -->
<div id="header"></div>


<div data-uk-sticky class="colortest1 uk-container uk-container-center">
<nav class="uk-position-z-index uk-position-relative">
<ul class="uk-navbar-nav">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
</div>
<div class="uk-position-top z-index-my">
<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
<li><img src="img/slide1.jpg" width="" height="" alt=""></li>
<li><img src="img/slide2.jpg" width="" height="" alt=""></li>
<li><img src="img/slide3.jpg" width="" height="" alt=""></li>
</ul>
</div>
<div style="height: 5000px; background: rgba(53, 58, 205, 0.45);"></div>
Теперь проблема с последним div. Он не может отталкиваться от slideshow. Как сделать что бы все последующие div были относительно slideshow?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: UiKit
« Ответ #12 : 25.10.2016, 17:27:32 »
Нифига не понятно. ^-^ Выложите на любой бесплатный хостинг.
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: UiKit
« Ответ #13 : 30.10.2016, 00:19:14 »
Нифига не понятно. ^-^ Выложите на любой бесплатный хостинг.
Вообщем с помощью UIKIT хотел сделать слайдер, что бы он был fullscreen а на нем вверху было меню с небольшим отступом, но при скролле оно липло к верху.
Начал читаль про позиционированиеи нашел для себя flexbox, который есть в uikit. Теперь сижу и пытаюсь сделать всё тоже самое но через flex + grid ))))) Как то так)
И вообще, flex уже устаревает)))) на смену идёт grid layout CSS )))
« Последнее редактирование: 30.10.2016, 00:22:36 от deminevgen »
*

newvideo

  • Захожу иногда
  • 194
  • 2 / 0
Re: UiKit
« Ответ #14 : 26.11.2016, 15:52:23 »
3 шаблона от ютэм скачал, хотел найти как реализовано меню юикит, но обнаружил во всех шаблонах в папке CSS файл bootstrap))))))))))
короче я так понял в современных шаблонах будут использоваться все фрэймворки, только толку от них пока маловато
*

KKAAZZOO

  • Живу я здесь
  • 2288
  • 118 / 9
Re: UiKit
« Ответ #15 : 26.11.2016, 15:56:49 »
но обнаружил во всех шаблонах в папке CSS файл bootstrap))))))))))

А что в этом удивительного?
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: UiKit
« Ответ #16 : 26.11.2016, 16:19:07 »
у меня только 1 шаблон от них - Master2.
и в нем есть галочка - отключить бутстрап...
так вот, галочка - включена, а меню - работает.
что я делаю не так?
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: UiKit
« Ответ #17 : 26.11.2016, 16:44:56 »
а какая у меню разметка?
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Master3 – современный удобный гибкий шаблон для Joomla! 3 на фреймворке UIkit 3

Автор dron

Ответов: 81
Просмотров: 7580
Последний ответ 11.09.2021, 03:12:59
от vasileк
ВОПРОС по UIkit. Как применять UIkit.lightbox к ссылкам с определенным классом?

Автор IlyaJom

Ответов: 5
Просмотров: 687
Последний ответ 12.03.2019, 17:28:05
от dm-krv
Uikit tabs: добавление вкладки из контента вкладки

Автор St@lker

Ответов: 2
Просмотров: 744
Последний ответ 18.01.2019, 19:31:11
от dm-krv
Форма заказа с помощью uikit

Автор saschka

Ответов: 2
Просмотров: 759
Последний ответ 10.04.2018, 08:53:43
от saschka
[Решено] шаблон модуля выпадающего меню на Uikit

Автор effrit

Ответов: 19
Просмотров: 2472
Последний ответ 11.11.2017, 19:27:44
от maxshe