г. Ярославль, ул. Нагорная, дом 9/31
Стоматологические материалы и оборудование
Заказать звонок
Войти
Логин
Пароль
Войти как пользователь
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности
Логин
Пароль
Войти как пользователь
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности
Логин
Пароль
Войти как пользователь
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности

Возможности

Типография

Стандартизированная типография на всем сайте. Далее приведены все стандарты типографии шаблона.

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

Интернет-магазин (англ. online shop или e-shop) — сайт, торгующий товарами посредством сети Интернет. Позволяет пользователям онлайн, в своём браузере или через мобильное приложение, сформировать заказ на покупку, выбрать способ оплаты и доставки заказа, оплатить заказ.
(p, .intec-ui-markup-p, [data-ui-markup="p"])

При этом продажа товаров осуществляется дистанционным способом и она накладывает ограничения на продаваемые товары.
(blockquote, .intec-ui-markup-blockquote, [data-ui-markup="blockquote"])

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

Когда онлайн-магазин настроен на то, чтобы позволить компаниям покупать у других компаний, этот процесс называется онлайн-магазинами бизнес для бизнеса (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">
Схема 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

Сообщение или оповещение (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 active" role="tabpanel">
Контент первой вкладки.
currentКод PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
currentКод PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
currentКод PHP">
Схема blue
blueКод PHP-tab-1" class="intec-ui-part-tab active" role="tabpanel">
Контент первой вкладки.
blueКод PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
blueКод PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
blueКод PHP">
Схема blue-1
blue-1Код PHP-tab-1" class="intec-ui-part-tab active" role="tabpanel">
Контент первой вкладки.
blue-1Код PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
blue-1Код PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
blue-1Код PHP">
Схема red
redКод PHP-tab-1" class="intec-ui-part-tab active" role="tabpanel">
Контент первой вкладки.
redКод PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
redКод PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
redКод PHP">
Схема green
greenКод PHP-tab-1" class="intec-ui-part-tab active" role="tabpanel">
Контент первой вкладки.
greenКод PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
greenКод PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
greenКод PHP">
Схема green-1
green-1Код PHP-tab-1" class="intec-ui-part-tab active" role="tabpanel">
Контент первой вкладки.
green-1Код PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
green-1Код PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
green-1Код PHP">
Схема orange
orangeКод PHP-tab-1" class="intec-ui-part-tab active" role="tabpanel">
Контент первой вкладки.
orangeКод PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
orangeКод PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
orangeКод PHP">
Схема gray
grayКод PHP-tab-1" class="intec-ui-part-tab active" role="tabpanel">
Контент первой вкладки.
grayКод PHP-tab-2" class="intec-ui-part-tab" role="tabpanel">
Контент второй вкладки.
grayКод PHP-tab-3" class="intec-ui-part-tab" role="tabpanel">
Контент третьей вкладки.
grayКод PHP">
Выравнивание

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