Layout ~ Ratios
image
Taming variable content

Content comes in all shapes, sizes and lengths, creating layout challenges. Silva's ratio module constrains content in a predetermined aspect ratio, which will be maintained responsively. The amount of ratios and their values are entirely configurable.

page layout
full screen
grid
alignment
spacing
ratios
Intro

Using utility classes, a layout container can be assigned a ratio. A ratio is a predetermined balance between the element's width and height that will be maintained even when the element is resized.

Normal (3:2)
1
2
3
4
5
6
Square (1:1)
1
2
3
4
5
6
Tall (2:3)
1
2
3
4
5
6
TV (4:3)
1
2
3
4
5
6
Wide (16:9)
1
2
3
4
5
6
Cinema (21:9)
1
2
3
Polyvison (4:1)
1
1
Mixed ratios

Ratio containers can be combined horizontally or vertically.

Cinema
Tall
Square
Tall
Square
Cinema
Tall
Square
No ratio
Responsive ratios

The ratio of an elements can be set per breakpoint.

1
Grow & Fit

The default behavior of ratio containers is that they have an initial height that respects the given ratio, yet the height grows if the height of the inner content is larger than the initial height. To enforce a ratio no matter the inner content, a ratio container can be set to Fit mode. In fit mode, excess height taken up by the inner content is simply cut off.

This is a layout container with the square (1:1) ratio applied to it. Due to the amount of text in this container, however, the height will grow beyond the initial 1:1 ratio. This is a layout container with the square (1:1) ratio applied to it. Due to the amount of text in this container, however, the height will grow beyond the initial 1:1 ratio. This is a layout container with the square (1:1) ratio applied to it. Due to the amount of text in this container, however, the height will grow beyond the initial 1:1 ratio. This is a layout container with the square (1:1) ratio applied to it. Due to the amount of text in this container, however, the height will grow beyond the initial 1:1 ratio. This is a layout container with the square (1:1) ratio applied to it. Due to the amount of text in this container, however, the height will grow beyond the initial 1:1 ratio.
This is a layout container with the square (1:1) ratio applied to it. No matter the amount of text, the ratio is enforced and excess content will be cut off. This is a layout container with the square (1:1) ratio applied to it. No matter the amount of text, the ratio is enforced and excess content will be cut off. This is a layout container with the square (1:1) ratio applied to it. No matter the amount of text, the ratio is enforced and excess content will be cut off. This is a layout container with the square (1:1) ratio applied to it. No matter the amount of text, the ratio is enforced and excess content will be cut off. This is a layout container with the square (1:1) ratio applied to it. No matter the amount of text, the ratio is enforced and excess content will be cut off. This is a layout container with the square (1:1) ratio applied to it. No matter the amount of text, the ratio is enforced and excess content will be cut off. This is a layout container with the square (1:1) ratio applied to it. No matter the amount of text, the ratio is enforced and excess content will be cut off.
Content types

Ratio cells in fit mode allow for a cover effect of specific content types.

frog
Layout Rows

Ratios can also be applied to layout rows. This panel has a ratio applied both to the layout row and its inner contents.

frog
frog
frog
frog