front-end фреймворк "UIkit"

В шаблоне используется «UIkit» - высокомодульный front-end фреймворк выделяющийся среди большинства своим гибким и адаптивным компонентам с понятными именами. Содержит множество модульных компонентов, среди которых: меню, HTML формы, таблицы, JS компоненты (выезжающие вкладки и модальные окна, общие элементы, такие как кнопки, знаки и перекрывающие слои), а также компоненты макета, такие как жидкие, адаптивные системы сеток.

Перечисленное ниже - только часть простйеших примеров которые вы можете реализовать на страницах сайта, остальные решения можно посмотреть на сайте getuikit.com

Всплывающие окна при клике на элемент

Подробнее...


Кликни <a href="#modal-example" uk-toggle>здесь</a> что бы появилось всплывающее окно

<div id="modal-example" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Заголовок всплывающего окна</h2>
        <p>Здесь содержимое всплывающего окна</p>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Закрыть окно</button>
        </p>
    </div>
</div>    

Реализация:

Кликни здесь чтобы появилось всплывающее окно

Выезжающая панель при клике на элемент

Подробнее...


Кликни <a href="#offcanvas-usage" uk-toggle>здесь</a> чтобы появилась выезжающая панель

<div id="offcanvas-usage" uk-offcanvas>
    <div class="uk-offcanvas-bar">
        <button class="uk-offcanvas-close" type="button" uk-close></button>
        <h3 class="uk-modal-title">Заголовок выезжающей панели</h3>
        <p>Здесь содержимое  выезжающей панели</p>
    </div>
</div>    
Кликни здесь чтобы появилась выезжающая панель

Заголовок выезжающей панели

Здесь содержимое выезжающей панели

Слайдер изображений

Подробнее...


<div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="/wa-data/public/site/img/light.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/wa-data/public/site/img/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/wa-data/public/site/img/dark.jpg" alt="" uk-cover>
        </li>
    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>    

Достаточно заменить текущие URL изображений, удалить или добавить новые

Пример

Есть вопросы или предложение?

Для того что бы задать вопрос, Вам необходимо авторизоваться или зарегистрироваться