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

API #

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.