Страницы: 1   Вниз

UiKit

  • 17 Ответов
  • 4892 Просмотров

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

*

Spouqen

  • Новичок
  • *
  • 1
  • 0
UiKit
« : 14.01.2014, 11: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, 12:25:18 от Spouqen »
Записан
*

dennioushen

  • Осваиваюсь на форуме
  • ***
  • 86
  • 0
  • Don Corleone
Re: UiKit
« Ответ #1 : 21.01.2014, 18:24:02 »
Решение должно быть не только с данным шаблоном, а общее решение встраивание в шаблон :)
Записан
Cемья тебя простит... Дон Корлеоне
*

dennioushen

  • Осваиваюсь на форуме
  • ***
  • 86
  • 0
  • Don Corleone
Re: UiKit
« Ответ #2 : 23.01.2014, 03: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>
Записан
Cемья тебя простит... Дон Корлеоне
*

Alldar

  • Тестеры
  • *****
  • 1500
  • 185
Re: UiKit
« Ответ #3 : 23.01.2014, 07:28:11 »
Вам нужно переписать еще и логику шаблона, я рекомендую вам скачать шаблон бесплатный от yoo если у вас нет необходимых знаний
Записан
Пожалуйста не дублируйте сообщения в личку/skype/google+. Все вопросы задавайте на форуме! Спасибо!

Клуб шаблонов для Joomla - NorrTheme
*

FlahsAxel

  • Давно я тут
  • ****
  • 212
  • 0
Re: UiKit
« Ответ #4 : 22.02.2014, 23:15:57 »
Доброе время суток.

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

Sergiy-sv

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

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: UiKit
« Ответ #6 : 13.04.2014, 20:15:24 »
Sergiy-sv:
1. Где по-ссылке с демо вступительный текст? Ни скриншота, ни кода вы не приложили.
2. Шаблона платный. Поддержкой платных расширений занимается разработчик.
3. По второй ссылке у вас уже мануал написан.
4. Пару тем вы уже создали. В одной я написал как надо сделать, чтобы на ваш вопрос кто-нибудь ответил. Создавая бесконечные дубли неинформативных постов вы не только нарушаете правила форума, но вскоре попадёте под бан.
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

guliwer

  • Осваиваюсь на форуме
  • ***
  • 91
  • 0
Re: UiKit
« Ответ #7 : 15.09.2016, 15: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, 21:35:09 от guliwer »
Записан
познаю не опознанное!
*

guliwer

  • Осваиваюсь на форуме
  • ***
  • 91
  • 0
Re: UiKit
« Ответ #8 : 15.09.2016, 21:51:41 »
Разобрался сам добавил в конце строку jQuery(window).resize();
Код
jQuery("#tt").on('display.uk.check', function(){
   var slider = UIkit.slider('.uk-slider-container', {});
   jQuery(window).resize();
  });
Записан
познаю не опознанное!
*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: UiKit
« Ответ #9 : 25.10.2016, 04: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
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: UiKit
« Ответ #10 : 25.10.2016, 04:36:03 »
deminevgen, не очень понял. Что не получается? Офсет выставлять пробовали? <div data-uk-sticky="{top:100}">
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: UiKit
« Ответ #11 : 25.10.2016, 18:06:56 »
Цитата: Shustry от 25.10.2016, 04:36:03
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
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: UiKit
« Ответ #12 : 25.10.2016, 19:27:32 »
Нифига не понятно. ^-^ Выложите на любой бесплатный хостинг.
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

deminevgen

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

newvideo

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

KKAAZZOO

  • Практически профи
  • *******
  • 2138
  • 102
Re: UiKit
« Ответ #15 : 26.11.2016, 17:56:49 »
Цитата: newvideo от 26.11.2016, 17:52:23
но обнаружил во всех шаблонах в папке CSS файл bootstrap))))))))))

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

effrit

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

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
Re: UiKit
« Ответ #17 : 26.11.2016, 18:44:56 »
а какая у меню разметка?
Записан
Страницы: 1   Вверх