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

vlusting

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Вопрос по CSS в uikit
« : 06.10.2015, 18:43:59 »
Мучаюсь над проблемой 2-ой день, учитывая неопытность в CSS , да и в целом разработке шаблонов.
Требуется заменить эффект при наведении на иконки.
Помогите, пожалуйста.

И так...
Имеем шаблон YT Nite ( demo http://yootheme.com/demo/joomla/nite )
Вопрос, как я полагаю, касается непосредственно плагину uikit ( возможно и вовсе не плагин )

На главной странице в центре расположены 4 круглые иконки
При загрузке страницы они поднимаются снизу вверх
А при наведении на них происходит увеличение
Все это дело находится в позиции fullscreen , модуль Home Fullscreen Icons

Вырубаем редактор в общих настройках, заходим в модуль и видим следующее

Код
<div>
    <h1 class="uk-heading-large tm-heading-border" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:100}">Our Services</h1>
    <p class="uk-text-large" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:200}">We are a growing company <br class="uk-hidden-small">which focuses on modern web technologies.</p>
    <ul class="tm-nite-icons">
        <li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:100}"><a href="#"><span class="tm-icon-yootheme-uikit"></span></a></li>
        <li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:200}"><a href="#"><span class="tm-icon-yootheme-warp"></span></a></li>
        <li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}"><a href="#"><span class="tm-icon-yootheme-widgetkit"></span></a></li>
        <li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:400}"><a href="#"><span class="tm-icon-yootheme-pagekit"></span></a></li>
    </ul>
</div>

Наши иконки находятся под
Код
<ul class="tm-nite-icons">

Видим, что иконкам задана "функция
Код
data-uk-scrollspy="{cls:'uk-animation-slide-bottom
Это и есть эффект появления снизу вверх. При замене
Код
uk-animation-slide-bottom
на
Код
uk-animation-slide-top
будет обратный эффект. Все что касается этой "функции" написано здесь http://www.getuikit.ru/docs/scrollspy.html
Разобрался, с этим не возникло проблем, заменил на нужный вариант.гуд.

Ниже начинается главная часть проблемы

Теперь осталось заменить эффект анимации при наведении...
На том же оф. сайте uikit нашел руководство по внедрению "функции" анимации при наведении
Здесь так же четко и ясно все прописано http://www.getuikit.ru/docs/animation.html
Я хочу заменить эффект увеличение при наведении на эффект встряхивание при наведении
Такая "функция" несет название shake \ встряхнуть
Код
.uk-animation-shake
Исходя из руководство нужно найти функцию
Код
.uk-animation-*
, и как в случаи с scrollspy просто заменить на нужное.
Но...
Как видим в первом коде ничего подобного нету.
Вопрос 1:  Где искать ?
Опять же, исходя из руководство достаточно добавить строку и все заработает
Я попробовал добавить несколькими способами - ничего не произошло.
В первом случаи иконка исчезла, в другом перестала работать функция scrollspy ( при загрузке страницы оставался статичным, а остальные 3 поднимались снизу вверх )
Вопрос 2:  Как правильно прописать ?

Далее решил покопаться в CSS файле...

Открыв файл theme.css первым делом в поиск вбил
Код
data-uk-scrollspy
и вот что вышло

Код
* ========================================================================
   Component: Animation
 ========================================================================== */
[class*='uk-animation-'] {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/* Hide animated element if scrollspy is used */
@media screen {
  [data-uk-scrollspy*='uk-animation-'] {
    opacity: 0;
  }
}
/*
 * Fade
 * Higher specificity (!important) needed because of reverse modifier
 */
.uk-animation-fade {
  -webkit-animation-name: uk-fade;
  animation-name: uk-fade;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: linear !important;
  animation-timing-function: linear !important;
}
/*
 * Fade with scale
 */
.uk-animation-scale-up {
  -webkit-animation-name: uk-fade-scale-02;
  animation-name: uk-fade-scale-02;
}
.uk-animation-scale-down {
  -webkit-animation-name: uk-fade-scale-18;
  animation-name: uk-fade-scale-18;
}
/*
 * Fade with slide
 */
.uk-animation-slide-top {
  -webkit-animation-name: uk-fade-top;
  animation-name: uk-fade-top;
}
.uk-animation-slide-bottom {
  -webkit-animation-name: uk-fade-bottom;
  animation-name: uk-fade-bottom;
}
.uk-animation-slide-left {
  -webkit-animation-name: uk-fade-left;
  animation-name: uk-fade-left;
}
.uk-animation-slide-right {
  -webkit-animation-name: uk-fade-right;
  animation-name: uk-fade-right;
}
/*
 * Scale
 */
.uk-animation-scale {
  -webkit-animation-name: uk-scale-12;
  animation-name: uk-scale-12;
}
/*
 * Shake
 */
.uk-animation-shake {
  -webkit-animation-name: uk-shake;
  animation-name: uk-shake;
}
/* Direction modifiers
 ========================================================================== */
.uk-animation-reverse {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Duration modifiers
========================================================================== */
.uk-animation-15 {
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}
/* Origin modifiers
========================================================================== */
.uk-animation-top-left {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.uk-animation-top-center {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
.uk-animation-top-right {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.uk-animation-middle-left {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.uk-animation-middle-right {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.uk-animation-bottom-left {
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.uk-animation-bottom-center {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.uk-animation-bottom-right {
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
/* Sub-object: `uk-animation-hover`
========================================================================== */
/*
 * Enable animation only on hover
 * Needed for Firefox because animations are not triggered when switching between display `hidden` and `block`
 */
.uk-animation-hover:not(:hover),
.uk-animation-hover:not(:hover) [class*='uk-animation-'],
.uk-touch .uk-animation-hover:not(.uk-hover),
.uk-touch .uk-animation-hover:not(.uk-hover) [class*='uk-animation-'] {
  -webkit-animation-name: none;
  animation-name: none;

Скинул весь основной код, где и упоминается функция uk-animation-*

В первых же строках смутила надпись
Цитировать
Hide animated element if scrollspy is used */

И вот вроде первая причина почему не работают анимации...ведь у нас работает scrollspy ...
Но сразу же назревает второй вопрос, как же тогда работает функция эффекта увеличение ?
Вопрос 3:  Как отключить scrollspy , чтобы работала animation , или же совместно?

Так и не разобрался, что к чему и пошел дальше искать в CSS знакомые строки...
На сей раз решил пробить
Код
tm-nite-icons
Вот что вышло
Код
*
 * Nite demo icons
 */
.tm-nite-icons {
  margin: 30px 0 0 0;
  padding: 0;
  list-style: none;
}
.tm-nite-icons > li {
  display: inline-block;
}
.tm-nite-icons > li > a {
  display: inline-block;
  border: 3px solid #ffffff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 85px;
  margin: 15px 15px 0 15px;
  padding: 20px;
  font-size: 64px;
  -webkit-transition: all 0.1s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  color: #ffffff;
}
.tm-nite-icons > li > a:hover {
  border-color: rgba(0, 0, 0, 0);
  background-color: #ffffff;
  color: #2b3034;
  text-decoration: none;
  -webkit-transform: scale(1.2);
}
/* Only phones */
@media (max-width: 768px) {
  .tm-nite-icons > li > a {
    width: 48px;
    height: 48px;
    line-height: 53px;
    margin: 10px;
    padding: 12px;
    font-size: 43px;

Вопрос 4:  Может быть здесь прописана функция анимации увеличение ?

В общем то все...

Помогите разобраться, уже сил нет.

И еще вопрос...
Как двигать этими иконками ? вправо, влево...ближе друг к другу..

Спасибо большое.
Полный CSS Скачатьtheme.css
*

AlekVolsk

  • Гуру
  • 6916
  • 413 / 4
Re: Вопрос по CSS в uikit
« Ответ #1 : 06.10.2015, 23:25:44 »
1) юикит - это семантический фреймворк, аналог bootstrap и прочих http://getuikit.com

2) ваш шаблон использует less, учите его, компилятор встроен в шаблон, который также имеет встроенный кастомизатор стилей (правда, анимация в нем не задается), не ищите в CSS, ибо в вашем случае CSS - это скомпилированный less и он не содержит всего, что возможно к использованию

3) ковыряйте less в папке less шаблона, а также в папке warp/vendor/uikit/less - там все исходники, в т.ч. варианты анимации; в доке все стили, подвластные управлению с помощью data-uk-*, описаны преподробно

4) скроллспай и увеличение - разные независимые функции, скролспай - это js (имейте ввиду, что везде, где встречается data-uk-* - это js), увеличение - это стили, в частности transform: scale(1.2) - это оно и есть, его плавность регулируется transition: all 0.1s, гуглите связку transform+transition - чудеса будут вам подвластны
*

vlusting

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Вопрос по CSS в uikit
« Ответ #2 : 06.10.2015, 23:45:42 »
1) юикит - это семантический фреймворк, аналог bootstrap и прочих http://getuikit.com

2) ваш шаблон использует less, учите его, компилятор встроен в шаблон, который также имеет встроенный кастомизатор стилей (правда, анимация в нем не задается), не ищите в CSS, ибо в вашем случае CSS - это скомпилированный less и он не содержит всего, что возможно к использованию

3) ковыряйте less в папке less шаблона, а также в папке warp/vendor/uikit/less - там все исходники, в т.ч. варианты анимации; в доке все стили, подвластные управлению с помощью data-uk-*, описаны преподробно

4) скроллспай и увеличение - разные независимые функции, скролспай - это js (имейте ввиду, что везде, где встречается data-uk-* - это js), увеличение - это стили, в частности transform: scale(1.2) - это оно и есть, его плавность регулируется transition: all 0.1s, гуглите связку transform+transition - чудеса будут вам подвластны

Спасибо за ответ!!
Начну ковырять less'ы...

Как плюсануть тебя, добряк ?)
а то, не могу кнопку найти(
*

Grigory S.

  • Давно я тут
  • 661
  • 70 / 0
  • (с)
Re: Вопрос по CSS в uikit
« Ответ #3 : 07.10.2015, 00:02:48 »
Спасибо за ответ!!
Как плюсануть тебя, добряк ?)
а то, не могу кнопку найти(

Кнопка появиться после 10 сообщений на форуме. Плюсанул от вас.
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".
*

vlusting

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Вопрос по CSS в uikit
« Ответ #4 : 08.10.2015, 04:28:27 »
В общем ничего у меня не получилось, сколько не ковырял толком ничего не нашел...
единственное нашел less файл компонента animation
Код
// Name:            Animation
// Description:     Provides a useful set of keyframe animations
//
// Component:       `uk-animation-*`
//
// Modifiers:       `uk-animation-fade`
//                  `uk-animation-scale-up`
//                  `uk-animation-scale-down`
//                  `uk-animation-slide-top`
//                  `uk-animation-slide-bottom`
//                  `uk-animation-slide-left`
//                  `uk-animation-slide-right`
//                  `uk-animation-scale`
//                  `uk-animation-shake`
//                  `uk-animation-reverse`
//                  `uk-animation-15`
//                  `uk-animation-top-left`
//                  `uk-animation-top-center`
//                  `uk-animation-top-right`
//                  `uk-animation-middle-left`
//                  `uk-animation-middle-right`
//                  `uk-animation-bottom-left`
//                  `uk-animation-bottom-center`
//                  `uk-animation-bottom-right`
//
// Sub-objects:     `uk-animation-hover`
//
// Uses:            Scrollspy
//
// Used by:         Dropdown
//                  Icon
//                  Search
//                  Datepicker
//                  Slideshow
//
// ========================================================================


/* ========================================================================
   Component: Animation
 ========================================================================== */

[class*='uk-animation-'] {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Hide animated element if scrollspy is used */
@media screen {

    [data-uk-scrollspy*='uk-animation-'] { opacity: 0; }

}

/*
 * Fade
 * Higher specificity (!important) needed because of reverse modifier
 */

.uk-animation-fade {
    -webkit-animation-name: uk-fade;
    animation-name: uk-fade;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
}

/*
 * Fade with scale
 */

.uk-animation-scale-up {
    -webkit-animation-name: uk-fade-scale-02;
    animation-name: uk-fade-scale-02;
}

.uk-animation-scale-down {
    -webkit-animation-name: uk-fade-scale-18;
    animation-name: uk-fade-scale-18;
}

/*
 * Fade with slide
 */

.uk-animation-slide-top {
    -webkit-animation-name: uk-fade-top;
    animation-name: uk-fade-top;
}

.uk-animation-slide-bottom {
    -webkit-animation-name: uk-fade-bottom;
    animation-name: uk-fade-bottom;
}

.uk-animation-slide-left {
    -webkit-animation-name: uk-fade-left;
    animation-name: uk-fade-left;
}

.uk-animation-slide-right {
    -webkit-animation-name: uk-fade-right;
    animation-name: uk-fade-right;
}

/*
 * Scale
 */

.uk-animation-scale {
    -webkit-animation-name: uk-scale-12;
    animation-name: uk-scale-12;
}

/*
 * Shake
 */

.uk-animation-shake {
    -webkit-animation-name: uk-shake;
    animation-name: uk-shake;
}


/* Direction modifiers
 ========================================================================== */

.uk-animation-reverse {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}


/* Duration modifiers
========================================================================== */

.uk-animation-15 {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}


/* Origin modifiers
========================================================================== */

.uk-animation-top-left {
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
}

.uk-animation-top-center {
     -webkit-transform-origin: 50% 0;
     transform-origin: 50% 0;
}

.uk-animation-top-right {
     -webkit-transform-origin: 100% 0;
     transform-origin: 100% 0;
}

.uk-animation-middle-left {
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
}

.uk-animation-middle-right {
     -webkit-transform-origin: 100% 50%;
     transform-origin: 100% 50%;
}

.uk-animation-bottom-left {
     -webkit-transform-origin: 0 100%;
     transform-origin: 0 100%;
}

.uk-animation-bottom-center {
     -webkit-transform-origin: 50% 100%;
     transform-origin: 50% 100%;
}

.uk-animation-bottom-right {
     -webkit-transform-origin: 100% 100%;
     transform-origin: 100% 100%;
}


/* Sub-object: `uk-animation-hover`
========================================================================== */

/*
 * Enable animation only on hover
 * Needed for Firefox because animations are not triggered when switching between display `hidden` and `block`
 */

.uk-animation-hover:not(:hover),
.uk-animation-hover:not(:hover) [class*='uk-animation-'],
.uk-touch .uk-animation-hover:not(.uk-hover),
.uk-touch .uk-animation-hover:not(.uk-hover) [class*='uk-animation-'] {
    -webkit-animation-name: none;
    animation-name: none;
}


/* Keyframes: Fade
 * Used by dropdown, datepicker and slideshow component
 ========================================================================== */

@-webkit-keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* Keyframes: Fade with slide
 ========================================================================== */

/*
 * Top
 */

@-webkit-keyframes uk-fade-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom
 */

@-webkit-keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Left
 */

@-webkit-keyframes uk-fade-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Right
 */

@-webkit-keyframes uk-fade-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Keyframes: Fade with scale
 ========================================================================== */

/*
 * Scale by 0.2
 */

@-webkit-keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.5
 * Used by slideshow component
 */

@-webkit-keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.8
 */

@-webkit-keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Keyframes: Slide
 * Used by slideshow component
 ========================================================================== */

/*
 * Left
 */

@-webkit-keyframes uk-slide-left {
    0% { -webkit-transform: translateX(-100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/*
 * Right
 */

@-webkit-keyframes uk-slide-right {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/*
 * Left third
 */

@-webkit-keyframes uk-slide-left-33 {
    0% { -webkit-transform: translateX(33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left-33 {
    0% { transform: translateX(33%); }
    100% { transform: translateX(0); }
}

/*
 * Right third
 */

@-webkit-keyframes uk-slide-right-33 {
    0% { -webkit-transform: translateX(-33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right-33 {
    0% { transform: translateX(-33%); }
    100% { transform: translateX(0); }
}


/* Keyframes: Scale
 ========================================================================== */

@-webkit-keyframes uk-scale-12 {
    0% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1); }
}

@keyframes uk-scale-12 {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* Keyframes: Rotate
 * Used by icon component
 ========================================================================== */

@-webkit-keyframes uk-rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); }
}

@keyframes uk-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}


/* Keyframes: Shake
 ========================================================================== */

@-webkit-keyframes uk-shake {
    0%, 100% { -webkit-transform: translateX(0); }
    10% { -webkit-transform: translateX(-9px); }
    20% { -webkit-transform: translateX(8px); }
    30% { -webkit-transform: translateX(-7px); }
    40% { -webkit-transform: translateX(6px); }
    50% { -webkit-transform: translateX(-5px); }
    60% { -webkit-transform: translateX(4px); }
    70% { -webkit-transform: translateX(-3px); }
    80% { -webkit-transform: translateX(2px); }
    90% { -webkit-transform: translateX(-1px); }
}

@keyframes uk-shake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-9px); }
    20% { transform: translateX(8px); }
    30% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}


/* Keyframes: Fade with slide fixed
 * Used by dropdown and search component
 ========================================================================== */

/*
 * Top fixed
 */

@-webkit-keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom fixed
 */

@-webkit-keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


// Hooks
// ========================================================================

.hook-animation-misc;

.hook-animation-misc() {}

Там прописано то, что мне нужно
Код
.uk-animation-shake {
    -webkit-animation-name: uk-shake;
    animation-name: uk-shake;
}

Как присвоить сие чудо моим иконкам - понятия не имею...

и опять же, огорчающая надпись
Цитировать
/* Hide animated element if scrollspy is used */
Как сделать, чтобы совместно работали и animation и scrollspy ...


А так же нашел на оф.сайте гениальное описание по подключению компонентов
Цитировать
Использование

После загрузить UIkit, вы можете найти все дополнительные компоненты в отдельной /css и /js папки:

Код
/css
    /components
        <!-- Component with the basic style -->
        autocomplete.css
        autocomplete.min.css

        <!-- Component with the Gradient style -->
        autocomplete.gradient.css
        autocomplete.gradient.min.css

        <!-- Component with the Almost flat style -->
        autocomplete.almost-flat.css
        autocomplete.almost-flat.min.css
        ...

/js
    /components
        <!-- JavaScript of the component and minified version -->
        autocomplete.js
        autocomplete.min.js
        ...
Чтобы использовать один из этих компонентов, все, что вам нужно сделать, это добавить CSS и компонента JavaScript в шапке документа.
Пример

Код
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
        <!-- Autocomplete CSS -->
        <link rel="stylesheet" href="components/autocomplete.css">
        <!-- Autocomplete Javascript -->
        <script src="components/autocomplete.js"></script>
    </head>
    <body>
    </body>
</html>

В шапку какого файла - я хз...

Мужики, помогите, пожалуйста...я уже с ума схожу и жестко туплю



Кнопка появиться после 10 сообщений на форуме. Плюсанул от вас.
Спасибо ) не забуду тебя, когда 10 сообщений будет )

*

AlekVolsk

  • Гуру
  • 6916
  • 413 / 4
Re: Вопрос по CSS в uikit
« Ответ #5 : 09.10.2015, 00:27:11 »
Там прописано то, что мне нужно
Код
.uk-animation-shake {
    -webkit-animation-name: uk-shake;
    animation-name: uk-shake;
}

Как присвоить сие чудо моим иконкам - понятия не имею...
.uk-animation-shake присвоить каждой иконке


Подключение файлов компонентов юикита производится в layouts/theme.config.php, ближе к концу файла будет блок Add assets, это документировано в доке по варпу на сайте ютимс

PS: по поводу обращения в личку, отвечаю: сейчас нет такой возможности, оч. сильно занят, сори
*

vlusting

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Вопрос по CSS в uikit
« Ответ #6 : 09.10.2015, 04:54:48 »
kamaz6141
AlekVolsk

Огромнейшая благодарность за помощь, всех благ Вам!
Тему можно закрыть, kamaz6141 более чем досконально проконсультировал !
*

dron

  • Завсегдатай
  • 1550
  • 16 / 10
Re: Вопрос по CSS в uikit
« Ответ #7 : 18.09.2019, 00:22:49 »
Оживлю тему.
Третий день мучаюсь с созданием таблиц с ценами... Пробовал их делать и на Flex и на Grid. Везде всплывают какие-то косяки...
На флексе они отвратительно выглядят на малых разрешениях, ибо сжимаются по ширине, а не переносятся. А на гриде проблемы с выравниванием по центру. Пробовал и совмещать оба этих способа, но тоже ничего дельного не вышло. Не силен я в этом... Может кто-то делал на каких-то проектах, поделитесь пожалуйста?
*

beliyadm

  • Легенда
  • 9656
  • 1659 / 66
  • Севастополь == Россия
Re: Вопрос по CSS в uikit
« Ответ #8 : 18.09.2019, 16:47:51 »
На флексе они отвратительно выглядят на малых разрешениях, ибо сжимаются по ширине, а не переносятся.

Используйте медиа запросы

Код
/* десктопная версия, 4 колонки */
.item {
width: 25%;
}
/* А дальше стили для мобильных девайсов разных размеров */
@media only screen and (max-width: 992px) {
.item {
width: 33%;
}
}

@media only screen and (max-width: 768px) {
.item {
width: 50%;
}
}

@media only screen and (max-width: 480px) {
.item {
width: 100%;
}
}
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

dron

  • Завсегдатай
  • 1550
  • 16 / 10
Re: Вопрос по CSS в uikit
« Ответ #9 : 18.09.2019, 17:53:44 »
Используйте медиа запросы
Да, спасибо, так тоже можно...
Но, блин, не хотелось бы что-то что-то еще придумывать... Uikit - такой мощный инструмент... Как так: 3 колонки сделать можно, а 2 под ними по центру нет? Странно, как минимум... Полная адаптивность есть, а воплотить в жизнь простейшую вещь нельзя...
*

beliyadm

  • Легенда
  • 9656
  • 1659 / 66
  • Севастополь == Россия
Re: Вопрос по CSS в uikit
« Ответ #10 : 18.09.2019, 18:00:07 »
Да, спасибо, так тоже можно...
Но, блин, не хотелось бы что-то что-то еще придумывать... Uikit - такой мощный инструмент... Как так: 3 колонки сделать можно, а 2 под ними по центру нет? Странно, как минимум... Полная адаптивность есть, а воплотить в жизнь простейшую вещь нельзя...
Не пользуюсь подобными инструментами, потому что проще все и всегда контролировать руками, три строки кода и вы полностью в курсе как это будет работать, достаточно знать CSS и не нужно изучать миллион фреймворков
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

AlekVolsk

  • Гуру
  • 6916
  • 413 / 4
Re: Вопрос по CSS в uikit
« Ответ #11 : 19.09.2019, 01:09:06 »
Как так: 3 колонки сделать можно, а 2 под ними по центру нет?
uk-flex-center на div с uk-grid
*

dron

  • Завсегдатай
  • 1550
  • 16 / 10
Re: Вопрос по CSS в uikit
« Ответ #12 : 19.09.2019, 20:02:03 »
uk-grid
Пробовал. Ширина столбцов плывет и падинг прилепает какой-то...
*

fbr

  • Завсегдатай
  • 1590
  • 185 / 7
Re: Вопрос по CSS в uikit
« Ответ #13 : 19.09.2019, 21:24:50 »
*

AlekVolsk

  • Гуру
  • 6916
  • 413 / 4
Re: Вопрос по CSS в uikit
« Ответ #14 : 20.09.2019, 01:03:15 »
Ширина столбцов плывет
она и должна плыть на адаптивном сайте, правильно кол-во колонок указывайте, а падинг - это расстояние между вашими блоками, если вы при этом маргин добавляли - то зря, сетка так не работает, а судя по скрину еще и разметка сетки нарушена

а вообще на все ваши вопросы отвечает дока юикита, https://getuikit.com/docs/grid, https://getuikit.com/docs/flex
*

dron

  • Завсегдатай
  • 1550
  • 16 / 10
Re: Вопрос по CSS в uikit
« Ответ #15 : 20.09.2019, 11:28:48 »
Ребят спасибо! Разобрался. Получилось сделать нормальный вид через grid + flex.
Код
<div class="uk-grid-small uk-child-width-1-3@s uk-flex-center uk-text-center" uk-grid>
    <div class="uk-flex-first">
        <div class="uk-card uk-card-default uk-card-body">Таблица 1</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Таблица 2</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Таблица 3</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Таблица 4</div>
    </div>
    <div class="uk-flex-last">
        <div class="uk-card uk-card-default uk-card-body">Таблица 5</div>
    </div>
</div>
« Последнее редактирование: 20.09.2019, 12:14:25 от dron »
*

beliyadm

  • Легенда
  • 9656
  • 1659 / 66
  • Севастополь == Россия
Re: Вопрос по CSS в uikit
« Ответ #16 : 20.09.2019, 16:48:18 »
а падинг - это расстояние между вашими блоками
Не путай новичков и людей, не знающих CSS, паддинг это отступ внутри блока, маржин - между

P.S. но вот действительно - нахрена все это нужно (запоминать в разных фреймворках названия классов и вложенность, если на чистом CSS это делается за 5 минут)?
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

AlekVolsk

  • Гуру
  • 6916
  • 413 / 4
Re: Вопрос по CSS в uikit
« Ответ #17 : 21.09.2019, 15:34:30 »
Не путай новичков и людей, не знающих CSS, паддинг это отступ внутри блока, маржин - между
всё верно, когда речь об азбуке, но в данном частном случае речь о конкретном компоненте конкретного фреймворка

нахрена все это нужно (запоминать в разных фреймворках названия классов и вложенность, если на чистом CSS это делается за 5 минут)?
для того, чтобы не учить CSS?


Получилось сделать нормальный вид через grid + flex.
вот я не о том же писал в #11 посту? )))
*

dron

  • Завсегдатай
  • 1550
  • 16 / 10
Re: Вопрос по CSS в uikit
« Ответ #18 : 22.09.2019, 14:16:17 »
вот я не о том же писал в #11 посту? )))
Да, все так. Только конструкция чуть сложнее получилась. Благодарю.

Продолжаю ковыряться с темой. Дошел до реализации поиска. Понравилось как в uikit реализован поиск через Внешний выпадающий блок.
Не пойму как строку поиска вывести на всю ширину контейнера. Подскажите пожалуйста...
« Последнее редактирование: 22.09.2019, 15:41:32 от dron »
*

fireman

  • Захожу иногда
  • 338
  • 10 / 0
  • в цель...
Re: Вопрос по CSS в uikit
« Ответ #19 : 22.09.2019, 23:34:06 »
Не пойму как строку поиска вывести на всю ширину контейнера. Подскажите пожалуйста...
Ну, по ходу за это отвечает стиль к div с классом uk-navbar-dropdown. В uikit.css для него стоит ширина 200px.
Можно переназначить ширину в custom.css на нужную...

Да, именно так работает.
Вопрос, на что прописать событие поиска? На крестик? Или как это можно сделать на нажатие клавиши Enter?
« Последнее редактирование: 23.09.2019, 00:01:16 от fireman »
*

AlekVolsk

  • Гуру
  • 6916
  • 413 / 4
Re: Вопрос по CSS в uikit
« Ответ #20 : 23.09.2019, 19:19:58 »
как это можно сделать на нажатие клавиши Enter
js-событие onkeyup погуглите
*

fireman

  • Захожу иногда
  • 338
  • 10 / 0
  • в цель...
Re: Вопрос по CSS в uikit
« Ответ #21 : 25.09.2019, 21:32:07 »
js-событие onkeyup погуглите
Погуглил, не смог разобраться. Но переопределил модуль поиска, добавил в макет плюшек из документации по uikit и получил такой же результат в оформлении, который привел dron.
*

dron

  • Завсегдатай
  • 1550
  • 16 / 10
Re: Вопрос по CSS в uikit
« Ответ #22 : 26.09.2019, 00:43:21 »
Погуглил, не смог разобраться. Но переопределил модуль поиска, добавил в макет плюшек из документации по uikit и получил такой же результат в оформлении, который привел dron.
У меня строка поиска вываливалась правее от иконки и маленькая. Я так и не смог её нормально растянуть и отцентрировать ((( Плюс, на маленьких экранах она у меня ломает шаблон ( У Вас все в порядке?
*

fireman

  • Захожу иногда
  • 338
  • 10 / 0
  • в цель...
Re: Вопрос по CSS в uikit
« Ответ #23 : 29.09.2019, 20:09:15 »
Все в порядке, я сам определяю и ширину и позиционирование всплывающего блока со строкой поиска.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться