In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
Following is a brief look at how it works:
With the directive vs-w
define the width of the column (vs-col
) its value is 1-12 an example of sizes would be: 12 = 100%, 6 = 50%, 4 = 25%
100%
50%
50%
33.3%
33.3%
33.3%
25%
25%
25%
25%
16.6%
16.6%
16.6%
16.6%
16.6%
16.6%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
To give a distance with respect to the left we have the directive vs-offset that with the same measures 1-12
we add the space specified a serious example 12 = 100%
, 6 = 50%
, 4 = 25%
.
offset - 6
offset - 2
offset - 8
offset - 7
offset - 4
If we need to align the elements horizontally, use the vs-justify
directive that uses CSS attributes as parameters: flex-start
, center
, flex-end
, space-around
, space-between
.
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
offset - 6
In some cases, we want to order the elements to our liking. To do this, use the directive vs-order
that has a parameter you just have to pass the number in which we want to order the vs-col
with respect to his brothers vs-col
1 / order 3
2 / order 1
3 / order 4
4 / order 2
There are some measures that can only be added in a specific size of the device, the directives are:
vs-lg
: is for large devices such as desktops or laptops (large).vs-sm
: is for medium devices such as laptops or tablets.vs-xs
: is for small devices such as tablets (small) and phones.vs-lg = 2
vs-lg = 8
vs-lg = 2
Name | Type | Parameters | Description | default |
---|---|---|---|---|
vs-w | Number, String | 1-12 | Width of the vs-row or vs-colum. | 12 |
vs-offset | Number, String | 1-12 | Distance to the left of the. | 0 |
vs-justify | String | flex-start, center, flex-end, space-around, space-between | Define the alignment vertically of the elements within the vs-row or vs-col. | |
vs-align | String | flex-start, center, flex-end, space-around, space-between | Define the horizontal alignment of the elements within the vs-row or vs-col. | |
vs-order | Number | Changes the order of the vs-col with respect to his brothers vs-col. | ||
vs-lg | Number,String | 1-12 | Is for large devices such as desktops or laptops (large). | |
vs-sm | Number,String | 1-12 | Is for medium devices such as laptops or tablets. | |
vs-xs | Number,String | 1-12 | Is for small devices such as tablets (small) and phones. |