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 текст
 
Текст для редактирования
 
 
  
Ссылки поддерживаются 2 типов:
 
 Обычная ссылка
 Ссылка с подчеркиванием 
 
 
 
 
Forms
 
Basic
 
 
 
  
  
 
 
  
  
 
 
  
 
 
 
 
Two columns
 
 
 
 
  
  
 
 
  
 
 
 
  
  
 
 
 
 
 
 
Help info
 
 
 
  
   
 
 
 
 
  
   
 
 
 
 
  
   
 
 
 
 
 
 
 
Input
 
 
 
  
  
 
 
Чтобы отображался флаг страны, код должен быть в 2-значном формате, например: us, de, es
 
  
   
 
 
  
  
 
 
  
  
 
 
  
    
 
 
  
   
 
 
 
 
 
Textarea
 
 
 
  
  
 
 
  
  
 
 
  
  
 
 
 
 
 
Checkbox
 
 
 
Horizontal
 
 
    
 
 
Vertical
 
 
  
 
  
 
 
 
 
 
Radio
 
 
 
Horizontal
 
 
    
 
 
Vertical
 
 
  
 
  
 
 
 
 
 
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.  
  2. Second element
    3.  
  3. Third element
    4.  
 
 
 
Пример информационного списка
 
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
 
Пример списка для файловой структуры
 
  
 
 
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
 
 
     
 
 
 
List with radio
 
 
     
 
 
 
 
 
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
 
 
    
 
 
Toolbar
 
 
  
 
 
Static block
 
 
  
 
 
 
    
 
Blade size