# Icons

У нас используются специальный шрифт для иконок FontAwesome, подробнее здесь. Для того, чтобы начать использовать иконки, достаточно добавить следующий код: <i class="fa fa-folder">, данный код выведет вот такую папку

Чтобы она соответствовала стилю, нужно использовать ее в нужном контексте, например таблиц, списков и т д. Тогда код будет следующим, расмотрим на примере .list

# Typoraphy

## Headings

Можно использовать заголовки <h1> — <h3>, а также классы, с любыми тэгами:
Например <div class="t">Heading<div>

# h1. Heading

## h2. Heading

### h3. Heading

Class "t" Heading
Class "sub-t" Heading

## Paragraphs

Текст поддерживается 5 типов:

Обычный текст

Текст для debug

Текст для note

Minisize текст

Текст для редактирования

## Links

Ссылки поддерживаются 2 типов:
Обычная ссылка
Ссылка с подчеркиванием

# Forms

## Basic

Имя:
Фамилия:

## Two columns

Имя:
Фамилия:

## Help info

Phone
Phone
Phone

## Input

Form input
Чтобы отображался флаг страны, код должен быть в 2-значном формате, например: us, de, es
Form input with flag country
Form input numeric
Form input mini numeric
Form input file
Form input calendar

## Textarea

Form textarea
Form textarea small
Form textarea large

## Checkbox

Horizontal
Electronics Apple Silver
Vertical
Black
Blue

## Radio

Horizontal
Electronics Apple Silver
Vertical
Black
Blue

## Switch

# Buttons

Поддерживаются кнопки 3 видов:

## Basic

## Cancel

## Disable

# Tables

## Basic

| Pic | Name | Code
--- | --- | --- | ---
|  | Accesoires | accesoires

## Table with images

Обратите внимание, чтобы название обрезалось, если слишком длинное, нужно использовать модификатор __product-name, тоже самое и для __product-code, ознакомится с полным списком модификаторов можно здесь

И конечно чтобы использовать изображения нужно указывать ссылку на картинку в background-image:

| Pic | Name | Code
--- | --- | --- | ---
|  | Samsung Tab 8.9" 16gb Wifi+4g AT&T I957 | v-b006o13o1q

## Table with text

Для того, чтобы использовать название и описание, нужно использовать .table-t для названия и .table-descr для описания

Type | Title | Date
--- | --- | ---
| New product was added Username successfully added new product «product name» in category «Category name» | 2 m ago
| New product was added Username successfully added new product «product name» in category «Category name» | 2 m ago
| New product was added Username successfully added new product «product name» in category «Category name» | 2 m ago

## List modificatros for table

Приведу некоторый список модификаторов, которые используются, для конкретных значений

- table-col __author/table-col __version
  Используется для выделения автора или версии продукта
- table-col __date
  Используется для выделения даты
- table-col __product-range/table-col __product-count
  Используется для небольших значений, 1-3 знаков
- table-col __lang
  Используется для языка
- table-col __product-control
  Используется для переключателей (checkbox)
- table-col __product-img
  Используется для картинки продукта или иконки
- table-col __product-name
  Используется для названия продукта
- table-col __product-code
  Используется для кодов

# Breadcrumbs

# Pagination

# Lists

## Default

Расмотрим списки, как они выглядят по умолчанию:

Пример простых списков <ul> и <ol>

UL list

- First element
- Second element
- Third element

OL List

1. First element
2. Second element
3. Third element

Пример информационного списка

## List info

- Author
  Virto Commerce
- Title
  Virto Commerce Core
- ID
  VirtoCommerce.Core
- Version
  1.0.0.0
- Description
  Core functionality
- Title
  Virto Commerce Core

## List number

Пример нумерованного списка

- element
- element
- element

## List tags

Пример списка для тэгов

- security
- core

## List files

Пример списка для файловой структуры

- Folder 1 Description for folder 1
  - Folder 1.1 Description for folder 1.1
  - Folder 1.2 Description for folder 1.2
- Folder 2 Description for folder 2
  - Folder 2.1 Description for folder 2.1
  - Folder 2.2 Description for folder 2.2

## List items

Пример списка для продуктов

- Virtual
- Apple

## List items with text

Пример списка для продуктов с названием и описанием
Чтобы вывести название и описание, нужно использовать .list-t для названия и .list-descr для описания, также можно использовать и иконку <i class="list-ico fa-image">, если это необходимо. Подробнее о всех иконках здесь

- Category A container for other Categories and Products or Variations.
- Product The main Variation. Can be used for targeted promotions.
- Variation Represents orderable item of merchandise for sale. Contains details, such as names, description, images, prices and inventory information.

## List choosen

Пример выбранных элементов из списка

- × Binding: Electronics
- × Brand: Apple
- × Color: Silver

## List with checkboxes

Ease US Ease US Ease US Ease US

## List with radio

Ease US Ease US Ease US Ease US

# Tree

## Introduction

Расмотрим по пунктам

Дерево начинается с <ul class="tree">, далее идут его дети <li class="tree-item">, и сообственно сам нод, .tree-block

- Order #CU04829
  Feb 17, 2015
  218 USD

Теперь добавим еще 1 ветку

- Order #CU04829
  Feb 17, 2015
  218 USD
  - Order #CU04829
    Feb 17, 2015
    218 USD

Примечание: Если всего 2 ветки, то для .tree-node, нужно добавить модфификатор .tree-node.__one-el, для всех остальных случаев не нужно

Расмотрим еще пример с 3 ветками

- Order #CU04829
  Feb 17, 2015
  218 USD
  - Order #CU04829
    Feb 17, 2015
    218 USD
  - Order #CU04829
    Feb 17, 2015
    218 USD

Подсказка: Для того, чтобы добавить детей в новую ветку, мы используем .list-tree, который идет за таким же .list-tree. Если нужно добавить новые ветки, то используем .tree-node, который идет строго после .tree-block

А теперь расмотрим более сложный пример

- Order #CU04829
  Feb 17, 2015
  218 USD
  - PaymentIn #PA04829
    Feb 17, 2015
    10 USD
    - PaymentIn #PA04829
      Feb 17, 2015
      10 USD
    - PaymentIn #PA04829
      Feb 17, 2015
      10 USD
  - Shipment #SH04829
    Feb 17, 2015
    0 USD

Reverse

Чтобы выделить активный нод, нужно добавить .tree-block.__selected,
тоесть получится так: <div class="tree-block __selected">

## Tree vertical

Пример вертикального дерева, по умолчанию, дерево вертикальное, чтобы сделать его горизонтальным, нужно добавить модификатор __horizontal, подробнее можно узнать здесь

- Order #CU04829
  Feb 17, 2015
  218 USD
  - PaymentIn #PA04829
    Feb 17, 2015
    10 USD
  - Shipment #SH04829
    Feb 17, 2015
    0 USD

## Tree horizontal

Пример горизонтального дерева

- Order #CU04829
  Feb 17, 2015
  218 USD
  - PaymentIn #PA04829
    Feb 17, 2015
    10 USD
  - Shipment #SH04829
    Feb 17, 2015
    0 USD

# Widgets

У виджетов есть несколько основных шаблонов: 1 с названием и количеством, 2 с названием и иконкой

Пример разметки с названием и количеством

Пример разметки с названием и иконкой

# Blade

Расмотрим пример простого блейда

## Blade constructor

Конструктор для блейдов
Header
Icon Title Description
Toolbar
Static block
Normal Collapsed Expanded
Blade size
Normal Medium Large Xlarge