Grid system

Grid systems are used for creating page layouts through a series of rows and columns that included your content. Skeleton FX includes a responsive fluid grid system that appropriately scales up to 10 columns as the device or viewport size increases. It has 4 types of predefined classes for easy layout options. Each type is responsible for the corresponding device according to the screen resolution. You can use the following classes: .width-* (for common layouts), .width-tiny-* (for resolution between 320px and 479px), .width-small-* (for resolution between 480px and 767px), .width-medium-* (for resolution ≥ 768px) or .width-large-* (for resolution ≥ 960px.

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, if applying any .width-medium-* class to an element will not only affect its styling on medium devices but also on large devices if a .width-large-* class is not present.

Example:

.width-1-1 .width-medium-1-1 .width-small-1-1

.width-1-2 .width-2-4 .width-3-6 .width-5-10

.width-1-3 .width-2-6

.width-2-3 .width-4-6

.width-1-4

.width-3-4

.width-1-5 .width-2-10

.width-4-5 .width-8-10

.width-2-5 .width-4-10

.width-3-5 .width-6-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

.width-1-10

.width-medium-1-10

.width-small-1-10

If you need for different devices build different layouts just include an additional major classes in accordance with the appropriate screen resolution.

Example:

.width-tiny-1-1 .width-small-1-3 .width-medium-1-4

.width-tiny-1-1 .width-small-2-3 width-medium-3-4

If you need to make separated grid blocks include an additional class .column-block. It can be useful in example for media content populating. For add border include an additional class .bordered. For add rounded corners include an additional class .rounded.

Example: