Корзина
Ваша корзина пуста
Выберите в каталоге интересующий товар и нажмите кнопку "В корзину"
Заказать звонок
Город не выбран
Например:
Челябинск
Екатеринбург
Челябинск
Екатеринбург
Москва
Ваш город
+7 (950) 000 00 00
г. Челябинск, ул. Труда, д. 64а, оф. 201
Пн-Пт: 9:30-18:30 Cб-Вс: Выходной
+7 (950) 000 00 00
г. Челябинск, Копейское ш., 64
Пн-Пт: 9:30-18:30 Cб-Вс: Выходной
+7 (950) 000 00 00
г. Екатеринбург, Варшавское ш., 159, оф 206
Пн-Пт: 9:30-18:30 Cб-Вс: Выходной
Поиск
Войти
Готовый интернет-магазин на 1С-Битрикс
Телефоны
+7 (950) 000 00 00
Главный офис
+7 (950) 000 00 00
Магазин 1
+7 (950) 000 00 00
Магазин 2

Возможности

Типография

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

Заголовок 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)