Responsive web Framework

DOCUMENTATION

Grid

NOT AVAILABLE FOR TINY SCREENS

(minimum width: 480px)

Rows

Rows are the essential part of the grid system. They provide the main structure on which the various elements are distributed.

It should be used by setting a .row property on a <div/> tag) whether or not accompanied by a behavior modifier.

.row
Normal row
.row .row-sec
Row with proportional fixed width not responsive.
.row .row-flex
Responsive proportional width line. It is used to take advantage as much as possible of the work area but without losing the spacing on the sides.
.row .row-lock
Line of responsive maximum size. Avoid overlapping a certain width. Generally used in conjunction with the previous property.

Columns

As its name says, they are the divisions within a line. The standard of 12 columns is used, being able to group several according to the desired length and responsive dimension sought. This makes the classes of this type have a structure like the following:

col - dimension groupofcolumns
explained befor.

It is important that the indicated dimension be accompanied by the class .col in order to indentify them.

.col
Example of responsive size of columns.

Column modifiers

In conjunction with the above, these can be supported with auxiliary values to provide other features. These auxiliary modifiers are at the end of the class, separated by a hyphen

col - dimension groupofcolumns - auxiliary

It is important to note that these given properties affect the visual appearance, it is convenient to state the following dimension in order to cancel prior effects

-push and -push
They serve to visually change the order of the columns
-off
Offset. Provides a space adjacent to the right side. Although it would be equivalent to inserting an empty column of the same length, it is useful in the case of requiring suppressing intermediate columns.

Different segmentation

Although segmentation in 12 parts is the most common because it allows segmentation in 1, 2, 3, 4 and 6 parts, the first problem I had when I wanted to divide the space into more columns. What if I wanted to divide it into five? Should I leave a dead cell or place them a lateral spacing to keep it balanced?.
Initially I considered using the value of 60 in order to also make it divisible by 5; But it was starting to be a bit impractical. Few remember that to divide between 5 parts, we had to group every 12 columns. What if I wanted to divide it into 11?

That take me to make the followin divisions n of5 and n of7 whre n is the number of grouped columns, over a grid of 5 or 7 columns. .

See it! icon execute code

Common variations

As noted in the previous examples, when defining a column, although the width is defined according to the user's requirement, not the same with the height, because those columns with greater content will have greater height than the others. This coupled with the fact that the columns do not contain any internal spacing. To solve this situation, two row properties have been established which affect the columns directly contained in this.

It is important to note that both options may not be properly deployed in older browsers.

.row-eq
Equal size columns
.row-pad
Columns with internal spacing