Get UIkit

Встроенный фреймворк UIkit

UIkit - это легкая, модульная платформа (фреймворк) для разработки быстрых и мощных веб-интерфейсов. Он поставляется с широким спектром многоразовых и сочетающихся компонентов. Все UIkit классы с уникальными именами, поэтому они не будут мешать работе других конструкций и расширений, которые используются совместно не вызывая ошибок. Здесь представлен обзор различных UIkit компонентов, которые можно легко изменять и вносить новые элементы, что сделает сайт не похожим на другие

Сетевое представительство UIkit (примеры свежих наработок)

UIkit

Здесь представлены основные возможности оформления сайта с помощью вспомогательного фреймворка UIkit, путём простой вставки кода

Кнопки, которые не "привязаны" к структуре сайта, в цветных сделаны несуществующие меню с произвольными ссылками, кнопка Tooltip - выдаёт подсказку, Modal - открывает модальное окно, но самое пристальное внимание обратите на Off-canvas, здесь спрятан огромный потенциал для развития нестандартного сайта

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Article title

Котик
Котяра
Котик

Эффекты с изображениями

Раньше для этого необходимо было установить отдельный модуль, теперь расширенные возможности работы с картинками и фото заложены в систему управления сайтом и не вызывает дополнительной нагрузки на сервер, априори - это сделает работу сайта ещё быстрее

<div class="myclass">...</div>

Оформление текста с помощью классов

text-muted
text-info
text-success
text-warning
text-danger
a element
em element
strong
code element
del element
ins element
mark element
q inside a q element
abbr element
dfn element

Badge 1 Success 4 Warning 3 Danger 4

Разметка страниц

h1

h2

h3

h4

h5
h6

Lorem ipsum dolor.

Someone famous
  • Автор

    24 августа, 2090 г. в 21:05

    Информация о авторе рубрики

Divider

Вверху меню с произвольными страницами

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Box

Это не модуль, а простое оформление стиля (uk-panel-box) с помощью UIkit

Box primary

И это не модуль, а простое оформление стиля (uk-panel-box-primary) с помощью UIkit

Box secondary

Так же, не модуль, а простое оформление стиля (uk-panel-box-secondary) с помощью UIkit

Информационное сообщение

Подтверждение

Предупреждение

Сообщение о ошибке

Прогресс бары с цветным оформлением:

35%
55%
65%
85%
Стили оформления форм
Размеры форм


  • List item 1
  • List item 2
  • List item 3
  • List item 1
  • List item 2
  • List item 3
Table caption
TableHeading
Table Data
Table Data
Description lists
Description text.
Description lists
Description text.