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
Links
2 types of links supported:
Forms
Basic
Two columns
Help info
Input
Textarea
Checkbox
Radio
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 __versionUsed to display author and product version
-
table-col __dateUsed for displaying dates
-
table-col __product-range/table-col __product-countUsed for displaying small values, 1-3 characters
-
table-col __langUsed to display language
-
table-col __product-controlUsed for checkboxes
-
table-col __product-imgUsed for images or icons
-
table-col __product-nameUsed for displaying product name
-
table-col __product-codeUsed 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
- First element
- Second element
- Third element
Example of informational list
List info
-
AuthorVirto Commerce
-
TitleVirto Commerce Core
-
IDVirtoCommerce.Core
-
Version1.0.0.0
-
DescriptionCore functionality
-
TitleVirto Commerce Core
List number
Example of numbered list
- element
- element
- element
List tags
Example of tag list
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
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 #CU04829Feb 17, 2015218 USD
Now lets add 1 more branch
-
Order #CU04829Feb 17, 2015218 USD
-
Order #CU04829Feb 17, 2015218 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 #CU04829Feb 17, 2015218 USD
-
Order #CU04829Feb 17, 2015218 USD
-
Order #CU04829Feb 17, 2015218 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 #CU04829Feb 17, 2015218 USD
-
PaymentIn #PA04829Feb 17, 201510 USD
-
PaymentIn #PA04829Feb 17, 201510 USD
-
PaymentIn #PA04829Feb 17, 201510 USD
-
-
Shipment #SH04829Feb 17, 20150 USD
-
In order to highlight selected leaf add .tree-block.__selected,
so it looks like this: <div class="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 #CU04829Feb 17, 2015218 USD
-
PaymentIn #PA04829Feb 17, 201510 USD
-
Shipment #SH04829Feb 17, 20150 USD
-
Tree horizontal
Example of horizontal tree
-
Order #CU04829Feb 17, 2015218 USD
-
PaymentIn #PA04829Feb 17, 201510 USD
-
Shipment #SH04829Feb 17, 20150 USD
-
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