Grid
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:
- 1 - Establish a set of column in the horizontal space defined by row (abbreviated col)
- 2 - Your content elements should be placed directly in the col, and only col should be placed directly in row
- 3 - The column grid system is a value from 1-12 to represent its range spans. For example, three columns of equal width can be created by .col-4 (33.3%).
- 4 - If the sum of col spans in a row are more than 12, then the overflowing col as a whole will start a new line arrangement.
Design concept
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%
Column offset
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
Flex layout
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
Flex alignment
To align the elements vertically we have the directive vs-align that as parameters the same known values of css: center, flex-end, flex-start.
Align Top
col - 3
col - 3
col - 3
col - 3
Align Center
col - 3
col - 3
col - 3
col - 3
Align Bottom
col - 3
col - 3
col - 3
col - 3
Flex order
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
Responsive layout
There are some measures that can only be added in a specific size of the device, the directives are:
- 1 -
vs-lg: is for large devices such as desktops or laptops (large). - 2 -
vs-sm: is for medium devices such as laptops or tablets. - 3 -
vs-xs: is for small devices such as tablets (small) and phones.
vs-lg = 2
vs-lg = 8
vs-lg = 2