Icons

We utilize special font for icons FontAwesome, more info here. In order to start using icons add the folowing html: <i class="fa fa-folder"> and it will display folder icon like this

                        
In order for the icon to correspond to appropriate style it needs to be used in the correct context, for instance table, list etc. In that case the html will be as following example for the list:.list

                    

Typography

Headings

you can use headers <h1><h3>, and classes "t", "sub-t" with any tags:
Example <div class="t">Heading<div>

h1. Heading

h2. Heading

h3. Heading

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

                        

Paragraphs

5 types of texts are supported:

Regular text

Debug text

Note text

Minisize text

Editable text


                        
                        
2 types of links supported:

                    

Forms

Basic


                        

Two columns


                        

Help info


                        

Input

In order for the country flag to display, code needs to be in 2 character format, for example: us, de, es

                        

Textarea


                        

Checkbox

Horizontal
Vertical

                        

Radio

Horizontal
Vertical

                        

Switch


                    

Buttons

3 types of buttons are supported:

Basic


                        

Cancel


                        

Disable


                    

Tables

Basic

Pic Name Code
Accesoires accesoires

                        

Table with images

Please note: to make sure long names fit correctly use the following modifier __product-name, same for __product-code, get the full list of table modifiers here

And in order to use images, the link to an image needs to be specified background-image:

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

                        

Table with text

In order to use title with description use span .table-t for title and .table-descr for description
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

                        

Modifiers list for table

List of modifiers that can be used for specific values
  • table-col __author/table-col __version
    Used to display author and product version
  • table-col __date
    Used for displaying dates
  • table-col __product-range/table-col __product-count
    Used for displaying small values, 1-3 characters
  • table-col __lang
    Used to display language
  • table-col __product-control
    Used for checkboxes
  • table-col __product-img
    Used for images or icons
  • table-col __product-name
    Used for displaying product name
  • table-col __product-code
    Used for displaying product id

Breadcrumbs


                    

Pagination


                    

Lists

Default

Lets see lists and how they look by default:

Example of simple lists <ul> и <ol>

UL list
  • First element
  • Second element
  • Third element
OL List
  1. First element
  2. Second element
  3. Third element

                        
Example of informational list

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

Example of numbered list
  • element
  • element
  • element

                        

List tags

Example of tag list
  • security
  • core

                        

List files

Example of file structure list

                        

List items

Example of product list
  • Virtual
  • Apple

                        

List items with text

Example of product list with title and description
In order to display title and description, use .list-t for title and .list-descr for description, icon can be added using <i class="list-ico fa-image">, if necessary. More information about icons here
  • 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 with chosen/selected elements

Example of selected list elements
  • × Binding: Electronics
  • × Brand: Apple
  • × Color: Silver

                        

List with checkboxes


                        

List with radio


                    

Tree

Introduction

Lets examing in order

Tree starts with <ul class="tree">, then children <li class="tree-item">, and then node, .tree-block

  • Order #CU04829
    Feb 17, 2015
    218 USD

                        

Now lets add 1 more branch

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

                        
Note: if only 2 branches exist, then for .tree-node will need to add modifier .tree-node.__one-el, for all other cases modified is not needed

Example with 3 branches

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

                        
Note: in order to add children to the new branch we use .list-tree, which follows the same .list-tree. If you need to add new branch then use .tree-node, which must strictly follow .tree-block

Now lets examing more comlicated case

  • 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

                        
In order to highlight selected leaf add .tree-block.__selected,
so it looks like this: <div class="tree-block __selected">

Tree vertical

Example of vertical tree, by default tree is vertical. In order to make tree horizontal add the following modifier __horizontal, more details available here
  • Order #CU04829
    Feb 17, 2015
    218 USD
    • PaymentIn #PA04829
      Feb 17, 2015
      10 USD
    • Shipment #SH04829
      Feb 17, 2015
      0 USD

                        

Tree horizontal

Example of horizontal tree
  • Order #CU04829
    Feb 17, 2015
    218 USD
    • PaymentIn #PA04829
      Feb 17, 2015
      10 USD
    • Shipment #SH04829
      Feb 17, 2015
      0 USD

                    

Widgets

Widgets have 2 main templates: 1 with title and quantity, 2 with title and icon

Example using title and quantity template

                        
Example using title and icon template

                    

Tabs

Add tab Remove tab
Tab 1
Tab 2
Tab 3
Text 1
Typography

Example text 1

Warning

Forms
Text 2
Typography

Example text 2

Warning

Forms
Text 3
Typography

Example text 3

Warning

Forms
<div class="tab-cnt"> can include any content