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. 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

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

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