Стандартизированная типография на всем сайте. Далее приведены все стандарты типографии шаблона.
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, .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, .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, .intec-ui-markup-h4, [data-ui-markup="h4"]
)ol li, .intec-ui-markup-ol .intec-ui-markup-li, [data-ui-markup="ol"] [data-ui-markup="li"]
)h5, .intec-ui-markup-h5, [data-ui-markup="h5"]
)
Ссылка 1,
Ссылка 2,
Ссылка 3
(a, .intec-ui-markup-a, [data-ui-markup="a"]
)
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.Использование класса отступов
.intec-ui-(m|p)-<значение>
;.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
- Синяя цветовая схема 1red
- Красная цветовая схемаgreen
- Зеленая цветовая схемаgreen-1
- Зеленая цветовая схема 1orange
- Оранжевая цветовая схема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
, то подразумевается скргление углов на половину высоты элемента.
Интерактивная кнопка обычно состоит из 2-х частей. Первая часть это контейнер с классом .intec-ui-part-icon
(иконка), вторая - .intec-ui-part-content
(содержимое кнопки). Кнопка может содержать любое количество частей. Каждая часть может быть расположена в любом месте. Отступ между частями интерактивной кнопки зависит от размеров текста.
input
)
Класс для применения: .intec-ui.intec-ui-control-input
.
Для того чтобы сделать поле ввода блочным элементом, необходимо добавить класс .intec-ui-mod-block
.
Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>
, где <значение> - число.
Для того чтобы скруглить углы поля ввода, необходимо добавить класс .intec-ui-mod-round-<значение>
, где значение
- это число от 1
до 5
, которое эквивалентно скруглению в пикселях, none
или half
. Если значение
half
, то подразумевается скргление углов на половину высоты элемента.
numeric
)
Класс для применения: .intec-ui.intec-ui-control-numeric
.
Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>
, где <значение> - число.
alert
)
Класс для применения: .intec-ui.intec-ui-control-alert
.
checkbox
)
Класс для применения: .intec-ui.intec-ui-control-checkbox
. Имеет нестандартную сетку.
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-<значение>
, где <значение> - число.
Имеет выравнивание вкладок слева, справа и по центру. Необходимо добавить класс .intec-ui-mod-position-<значение>
, где <значение> - left
, right
или center
. Позиционирование работает только при блочном варианте отображения.