empty basket
Ваша корзина пуста
Выберите в каталоге интересующий товар
и нажмите кнопку «В корзину».
Перейти в каталог
Заказать звонок
лого измененный.png
Artiteq - изящный штрих Вашего интерьера info@artiteq-rus.ru
Москва, Духовской пер., д. 17, с. 11
Время работы:
Пн-Пт 10.00-19.00 

Сб.- Вс.-выходной 
Заказать звонок
Войти
Логин
Пароль
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности
лого измененный.png
Логин
Пароль
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности
лого измененный.png
Москва, Духовской пер., д. 17, с. 11
Время работы:
Пн-Пт 10.00-19.00 

Сб.- Вс.-выходной 

Возможности

н на то, чтобы позволить компаниям покупать у других компаний, этот процесс называется онлайн-магазинами бизнес для бизнеса (B2B).

(i, .intec-ui-markup-i, [data-ui-markup="i"])

Когда онлайн-магазин настроен на то, чтобы позволить компаниям покупать у других компаний, этот процесс называется онлайн-магазинами бизнес для бизнеса (B2B).
(b, .intec-ui-markup-b, [data-ui-markup="b"])

Заголовок H3 (h3, .intec-ui-markup-h3, [data-ui-markup="h3"])

  • Пункт обычного списка
  • Пункт обычного списка
  • Пункт обычного списка
  • Пункт обычного списка
  • (ul li, .intec-ui-markup-ul .intec-ui-markup-li, [data-ui-markup="ul"] [data-ui-markup="li"])

Заголовок H4 (h4, .intec-ui-markup-h4, [data-ui-markup="h4"])

  1. Пункт нумерованного списка
  2. Пункт нумерованного списка
  3. Пункт нумерованного списка
  4. Пункт нумерованного списка
  5. (ol li, .intec-ui-markup-ol .intec-ui-markup-li, [data-ui-markup="ol"] [data-ui-markup="li"])
Заголовок H5 (h5, .intec-ui-markup-h5, [data-ui-markup="h5"])

Ссылка 1,Ссылка 2,Ссылка 3(a, .intec-ui-markup-a, [data-ui-markup="a"])

Заголовок H6 (h6, .intec-ui-markup-h6, [data-ui-markup="h6"])

Горизонтальная линия (hr, .intec-ui-markup-hr, [data-ui-markup="hr"])


Код (code, .intec-ui-markup-code, [data-ui-markup="code"])
<div class="intec-ui-markup-code">
Пример оформления кода
</div>

Заголовок 1Заголовок 2Заголовок 3
Столбец 1Столбец 2Столбец 3
Столбец 1Столбец 2Столбец 3
Столбец 1Столбец 2Столбец 3
Заголовок 1Заголовок 2Заголовок 3
Столбец 1Столбец 2Столбец 3
Столбец 1Столбец 2Столбец 3
Столбец 1Столбец 2Столбец 3
Заголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6Заголовок 7Заголовок 8Заголовок 9Заголовок 10Заголовок 11Заголовок 12Заголовок 13Заголовок 14Заголовок 15
Столбец 1Столбец 2Столбец 3Столбец 4Столбец 5Столбец 6Столбец 7Столбец 8Столбец 9Столбец 10Столбец 11Столбец 12Столбец 13Столбец 14Столбец 15
Столбец 1Столбец 2Столбец 3Столбец 4Столбец 5Столбец 6Столбец 7Столбец 8Столбец 9Столбец 10Столбец 11Столбец 12Столбец 13Столбец 14Столбец 15
Столбец 1Столбец 2Столбец 3Столбец 4Столбец 5Столбец 6Столбец 7Столбец 8Столбец 9Столбец 10Столбец 11Столбец 12Столбец 13Столбец 14Столбец 15

Отступы

Имеются классы для работы с margin и padding.

  • .intec-ui-p - класс для работы с padding;
  • .intec-ui-m - класс для работы с margin.

Использование класса отступов

  1. .intec-ui-(m|p)-<значение>;
  2. .intec-ui-(m|p)-(t|r|b|l|v|h)-<значение>.

(m|p) означает тип отступа (margin или padding соответственно).(t|r|b|l|v|h) направление отступа (top, right, bottom, left, vertical или horizontal соответственно), v означает отступ сверху и снизу, h - слева и справа.<значение> может иметь none, что означает необходимость убрать отступ, либо значение от 5 до 100 с шагом в 5. В варианте 1, где не указано направление оступа, он будет применен ко всем сторонам.

Элементы интерфейса

Каждый элемент интерфейса имеет класс .intec-ui, а также собственный класс .intec-ui-control-<элемент>.

Большинство элементов (кнопки, поля ввода, счетчики) имеют сетку в 4px и стандартную высоту в 32px. Размеры элементов можно менять с помощью класса .intec-ui-size-<размер>, где размер - это число от 1 до 5. Каждый размер увеличивает высоту элемента на 4px.

Все элементы (кроме полей ввода) имеют цветовые схемы. Цветовые схемы задаются с помощью класса .intec-ui-scheme-<схема>
Доступны следующие цветовые схемы:

  • current - Текущая цветовая схема сайта
  • blue - Синяя цветовая схема
  • blue-1 - Синяя цветовая схема 1
  • red - Красная цветовая схема
  • green - Зеленая цветовая схема
  • green-1 - Зеленая цветовая схема 1
  • orange - Оранжевая цветовая схема
  • gray - Серая цветовая схема

Кнопка (button)

Класс для применения: .intec-ui.intec-ui-control-button.

Кнопка
Блочная кнопка

Для того чтобы сделать кнопку блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Кнопка
Прозрачная кнопка

Для того чтобы сделать кнопку прозрачной, необходимо добавить класс .intec-ui-mod-transparent.

Кнопка
Ссылочная кнопка

Для того чтобы сделать кнопку ссылочной, необходимо добавить класс .intec-ui-mod-link.

Скругление углов

Для того чтобы скруглить углы кнопки, необходимо добавить класс .intec-ui-mod-round-<значение>, где значение - это число от 1 до 5, которое эквивалентно скруглению в пикселях, none или half. Если значениеhalf, то подразумевается скргление углов на половину высоты элемента.

noneКод PHP intec-ui-scheme-current">Кнопка (none)
1Код PHP intec-ui-scheme-current">Кнопка (1)
2Код PHP intec-ui-scheme-current">Кнопка (2)
3Код PHP intec-ui-scheme-current">Кнопка (3)
4Код PHP intec-ui-scheme-current">Кнопка (4)
5Код PHP intec-ui-scheme-current">Кнопка (5)
halfКод PHP intec-ui-scheme-current">Кнопка (half)
Интерактивная кнопка

Интерактивная кнопка обычно состоит из 2-х частей. Первая часть это контейнер с классом .intec-ui-part-icon (иконка), вторая - .intec-ui-part-content (содержимое кнопки). Кнопка может содержать любое количество частей. Каждая часть может быть расположена в любом месте. Отступ между частями интерактивной кнопки зависит от размеров текста.

Кнопка
Кнопка
Цветовые схемы
Кнопка
currentКод PHP">Кнопка (current)
blueКод PHP">Кнопка (blue)
blue-1Код PHP">Кнопка (blue-1)
redКод PHP">Кнопка (red)
greenКод PHP">Кнопка (green)
green-1Код PHP">Кнопка (green-1)
orangeКод PHP">Кнопка (orange)
grayКод PHP">Кнопка (gray)
Размеры
Кнопка
1Код PHP">Кнопка (1)
2Код PHP">Кнопка (2)
3Код PHP">Кнопка (3)
4Код PHP">Кнопка (4)
5Код PHP">Кнопка (5)

Поле ввода (input)

Класс для применения: .intec-ui.intec-ui-control-input.

Блочное поле ввода

Для того чтобы сделать поле ввода блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Скругление углов

Для того чтобы скруглить углы поля ввода, необходимо добавить класс .intec-ui-mod-round-<значение>, где значение - это число от 1 до 5, которое эквивалентно скруглению в пикселях, none или half. Если значениеhalf, то подразумевается скргление углов на половину высоты элемента.

noneКод PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (none)" />
1Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (1)" />
2Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (2)" />
3Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (3)" />
4Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (4)" />
5Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (5)" />
halfКод PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (half)" />
Размеры
1Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (1)" />
2Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (2)" />
3Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (3)" />
4Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (4)" />
5Код PHP" value="Поле ввода ()" data-bx-app-ex-value="Поле ввода (5)" />

Числовое поле ввода (numeric)

Класс для применения: .intec-ui.intec-ui-control-numeric.

Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Вариант по умолчанию
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Цветовые схемы
Схема по умолчанию
currentКод PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема current
blueКод PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема blue
blue-1Код PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема blue-1
redКод PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема red
greenКод PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема green
green-1Код PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема green-1
orangeКод PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема orange
grayКод PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема gray
Размеры
1Код PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема 1
2Код PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема 2
3Код PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема 3
4Код PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема 4
5Код PHP" data-ui-control="numeric" data-ui-options="{'value': 1}">
Схема 5

Сообщение или оповещение (alert)

Класс для применения: .intec-ui.intec-ui-control-alert.

Сообщение или оповещение.
Цветовые схемы
Сообщение или оповещение.
currentКод PHP intec-ui-m-b-20"> Сообщение или оповещение. (current)
blueКод PHP intec-ui-m-b-20"> Сообщение или оповещение. (blue)
blue-1Код PHP intec-ui-m-b-20"> Сообщение или оповещение. (blue-1)
redКод PHP intec-ui-m-b-20"> Сообщение или оповещение. (red)
greenКод PHP intec-ui-m-b-20"> Сообщение или оповещение. (green)
green-1Код PHP intec-ui-m-b-20"> Сообщение или оповещение. (green-1)
orangeКод PHP intec-ui-m-b-20"> Сообщение или оповещение. (orange)
grayКод PHP intec-ui-m-b-20"> Сообщение или оповещение. (gray)

Checkbox (checkbox)

Класс для применения: .intec-ui.intec-ui-control-checkbox. Имеет нестандартную сетку.



Размеры





Цветовые схемы









Radio (radiobox)

Класс для применения: .intec-ui.intec-ui-control-radiobox. Имеет нестандартную сетку.



Размеры





Цветовые схемы









Переключатели (switch)

Класс для применения: .intec-ui.intec-ui-control-switch. Имеет нестандартную сетку.



Размеры





Цветовые схемы









Вкладки (tabs)

Класс для применения: .intec-ui.intec-ui-control-tabs. Имеет нестандартную сетку.

Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.

Для того чтобы сделать вкладки блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Вариант по умолчанию
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Вариант 1
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Вариант 2
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Цветовые схемы
Схема по умолчанию
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема current
currentКод PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
currentКод PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
currentКод PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Схема blue
blueКод PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
blueКод PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
blueКод PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Схема blue-1
blue-1Код PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
blue-1Код PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
blue-1Код PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Схема red
redКод PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
redКод PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
redКод PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Схема green
greenКод PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
greenКод PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
greenКод PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Схема green-1
green-1Код PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
green-1Код PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
green-1Код PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Схема orange
orangeКод PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
orangeКод PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
orangeКод PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Схема gray
grayКод PHP-tab-1" class="intec-ui-part-tab">
Контент первой вкладки.
grayКод PHP-tab-2" class="intec-ui-part-tab">
Контент второй вкладки.
grayКод PHP-tab-3" class="intec-ui-part-tab">
Контент третьей вкладки.
Выравнивание

Имеет выравнивание вкладок слева, справа и по центру. Необходимо добавить класс .intec-ui-mod-position-<значение>, где <значение> - left, right или center. Позиционирование работает только при блочном варианте отображения.